diff --git a/docs/next.config.ts b/docs/next.config.ts
index 7a5ccb7bd699a..3c950e03d2c17 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -5,6 +5,7 @@ import * as semver from 'semver';
 import { createRequire } from 'module';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { withDeploymentConfig } from '@mui/internal-docs-infra/withDocsInfra';
+import type { LoaderOptions as PrecomputedTypesLoaderOptions } from '@mui/internal-docs-infra/pipeline/loadPrecomputedTypes';
 import { findPages } from './src/modules/utils/find';
 import { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
 import { SOURCE_CODE_REPO, SOURCE_GITHUB_BRANCH } from './constants';
@@ -78,6 +79,7 @@ export default withDeploymentConfig({
     // TODO, those shouldn't be needed in the first place
     '@mui/monorepo', // Migrate everything to @mui/internal-core-docs until the @mui/monorepo dependency becomes obsolete
     '@mui/internal-core-docs', // needed to fix slashes in the generated links (https://github.com/mui/mui-x/pull/13713#issuecomment-2205591461, )
+    '@mui/internal-docs-infra', // TEMP: local link points at ../mui-public/packages/docs-infra source tree
   ],
   // Avoid conflicts with the other Next.js apps hosted under https://mui.com/
   assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/x',
@@ -132,6 +134,11 @@ export default withDeploymentConfig({
           ),
           docs: path.resolve(MONOREPO_PATH, './docs'),
           docsx: path.resolve(currentDirectory, '../docs'),
+          // TEMP: force React dedupe so linked @mui/internal-docs-infra doesn't
+          // load its own React copy (breaks hooks with "Cannot read properties
+          // of null (reading 'useMemo')").
+          react: path.resolve(currentDirectory, 'node_modules/react'),
+          'react-dom': path.resolve(currentDirectory, 'node_modules/react-dom'),
         },
       },
       module: {
@@ -166,6 +173,20 @@ export default withDeploymentConfig({
             include: [/(@mui[\\/]monorepo)$/, /(@mui[\\/]monorepo)[\\/](?!.*node_modules)/],
             use: options.defaultLoaders.babel,
           },
+          // New types pipeline (POC) — intercept `types.*.ts` next to API pages and
+          // precompute props metadata at build time via the docs-infra loader.
+          {
+            test: /[/\\]docs[/\\]pages[/\\]x[/\\]api[/\\].+[/\\]types\..*\.ts$/,
+            use: [
+              options.defaultLoaders.babel,
+              {
+                loader: '@mui/internal-docs-infra/pipeline/loadPrecomputedTypes',
+                options: {
+                  socketDir: '.next/docs-infra',
+                } satisfies PrecomputedTypesLoaderOptions,
+              },
+            ],
+          },
           {
             test: /\.(ts|tsx)$/,
             loader: 'string-replace-loader',
diff --git a/docs/package.json b/docs/package.json
index 6cb487b7c2e29..63ee0e1e56ec3 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,6 +9,7 @@
     "dev": "cross-env-shell 'next dev --webpack --port ${PORT:-3001}'",
     "deploy": "git fetch upstream master && git push -f upstream FETCH_HEAD:docs-v9",
     "icons": "rimraf public/static/icons/* && node ./scripts/buildIcons.js",
+    "internal-validate": "docs-infra validate",
     "serve": "serve ./export -l 3010",
     "create-playground": "node ./scripts/createPlayground.js",
     "typescript": "tsc -p tsconfig.json",
diff --git a/docs/pages/x/api/charts/animated-area.js b/docs/pages/x/api/charts/animated-area.js
index 630180fbcf0dd..c01b6cf24fb02 100644
--- a/docs/pages/x/api/charts/animated-area.js
+++ b/docs/pages/x/api/charts/animated-area.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './animated-area.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAnimatedArea } from './types.animated-area';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/animated-area',
-    false,
-    /\.\/animated-area.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AnimatedArea" allowedProps={allowedProps}>
+      <TypesAnimatedArea />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/animated-line.js b/docs/pages/x/api/charts/animated-line.js
index bab3d4034566e..1b4eef3d57aa2 100644
--- a/docs/pages/x/api/charts/animated-line.js
+++ b/docs/pages/x/api/charts/animated-line.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './animated-line.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAnimatedLine } from './types.animated-line';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/animated-line',
-    false,
-    /\.\/animated-line.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AnimatedLine" allowedProps={allowedProps}>
+      <TypesAnimatedLine />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/area-element.js b/docs/pages/x/api/charts/area-element.js
index 98c0a96736901..05ffc6314e35f 100644
--- a/docs/pages/x/api/charts/area-element.js
+++ b/docs/pages/x/api/charts/area-element.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './area-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAreaElement } from './types.area-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/area-element',
-    false,
-    /\.\/area-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AreaElement" allowedProps={allowedProps}>
+      <TypesAreaElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/area-plot.js b/docs/pages/x/api/charts/area-plot.js
index da51c70f88bd0..4b2d3f0ab6158 100644
--- a/docs/pages/x/api/charts/area-plot.js
+++ b/docs/pages/x/api/charts/area-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './area-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAreaPlot } from './types.area-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/area-plot',
-    false,
-    /\.\/area-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AreaPlot" allowedProps={allowedProps}>
+      <TypesAreaPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/axis-config.js b/docs/pages/x/api/charts/axis-config.js
index e23b725c73e87..fe1b90232d10b 100644
--- a/docs/pages/x/api/charts/axis-config.js
+++ b/docs/pages/x/api/charts/axis-config.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './axis-config.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAxisConfig } from './types.axis-config';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/axis-config.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AxisConfig" allowedProps={allowedProps}>
+      <TypesAxisConfig />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-chart-premium.js b/docs/pages/x/api/charts/bar-chart-premium.js
index e2a82bfa5b1c1..2fe11fd890338 100644
--- a/docs/pages/x/api/charts/bar-chart-premium.js
+++ b/docs/pages/x/api/charts/bar-chart-premium.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-chart-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarChartPremium } from './types.bar-chart-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'initialZoom', 'layout', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-chart-premium',
-    false,
-    /\.\/bar-chart-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarChartPremium" allowedProps={allowedProps}>
+      <TypesBarChartPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-chart-pro.js b/docs/pages/x/api/charts/bar-chart-pro.js
index 233b46a4e6a98..e6fc8ecfa3cdb 100644
--- a/docs/pages/x/api/charts/bar-chart-pro.js
+++ b/docs/pages/x/api/charts/bar-chart-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-chart-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarChartPro } from './types.bar-chart-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'initialZoom', 'layout', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-chart-pro',
-    false,
-    /\.\/bar-chart-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarChartPro" allowedProps={allowedProps}>
+      <TypesBarChartPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-chart.js b/docs/pages/x/api/charts/bar-chart.js
index 96b2679b10cc5..0e25ee1588174 100644
--- a/docs/pages/x/api/charts/bar-chart.js
+++ b/docs/pages/x/api/charts/bar-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarChart } from './types.bar-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'layout', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-chart',
-    false,
-    /\.\/bar-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarChart" allowedProps={allowedProps}>
+      <TypesBarChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-element.js b/docs/pages/x/api/charts/bar-element.js
index 8850e8d79d961..9e1f116dae2c4 100644
--- a/docs/pages/x/api/charts/bar-element.js
+++ b/docs/pages/x/api/charts/bar-element.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarElement } from './types.bar-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-element',
-    false,
-    /\.\/bar-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarElement" allowedProps={allowedProps}>
+      <TypesBarElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-label.js b/docs/pages/x/api/charts/bar-label.js
index 062f1476b9b26..0d73ab30e465b 100644
--- a/docs/pages/x/api/charts/bar-label.js
+++ b/docs/pages/x/api/charts/bar-label.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarLabel } from './types.bar-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['height', 'hidden', 'placement', 'width', 'x', 'xOrigin', 'y', 'yOrigin'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-label',
-    false,
-    /\.\/bar-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarLabel" allowedProps={allowedProps}>
+      <TypesBarLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-plot.js b/docs/pages/x/api/charts/bar-plot.js
index 89b6ecb68ef15..a0208db2af5fb 100644
--- a/docs/pages/x/api/charts/bar-plot.js
+++ b/docs/pages/x/api/charts/bar-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarPlot } from './types.bar-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['borderRadius', 'className', 'onItemClick', 'renderer', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/bar-plot',
-    false,
-    /\.\/bar-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarPlot" allowedProps={allowedProps}>
+      <TypesBarPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/bar-series.js b/docs/pages/x/api/charts/bar-series.js
index 904280a5f800e..e90f145ac737f 100644
--- a/docs/pages/x/api/charts/bar-series.js
+++ b/docs/pages/x/api/charts/bar-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './bar-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesBarSeries } from './types.bar-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/bar-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="BarSeries" allowedProps={allowedProps}>
+      <TypesBarSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/candlestick-chart.js b/docs/pages/x/api/charts/candlestick-chart.js
index 26abc37bbd4e0..4c5d5d97d97d2 100644
--- a/docs/pages/x/api/charts/candlestick-chart.js
+++ b/docs/pages/x/api/charts/candlestick-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './candlestick-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesCandlestickChart } from './types.candlestick-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'colors', 'dataset', 'desc', 'disableAxisListener', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'initialZoom', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/candlestick-chart',
-    false,
-    /\.\/candlestick-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="CandlestickChart" allowedProps={allowedProps}>
+      <TypesCandlestickChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/candlestick-plot.js b/docs/pages/x/api/charts/candlestick-plot.js
index 08b06c5447965..c18f0c4315844 100644
--- a/docs/pages/x/api/charts/candlestick-plot.js
+++ b/docs/pages/x/api/charts/candlestick-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './candlestick-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesCandlestickPlot } from './types.candlestick-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/candlestick-plot',
-    false,
-    /\.\/candlestick-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="CandlestickPlot" allowedProps={allowedProps}>
+      <TypesCandlestickPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/chart-image-export-options.js b/docs/pages/x/api/charts/chart-image-export-options.js
index c2d92749451fc..14ec42ad5bc22 100644
--- a/docs/pages/x/api/charts/chart-image-export-options.js
+++ b/docs/pages/x/api/charts/chart-image-export-options.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chart-image-export-options.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartImageExportOptions } from './types.chart-image-export-options';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/chart-image-export-options.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartImageExportOptions" allowedProps={allowedProps}>
+      <TypesChartImageExportOptions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/chart-print-export-options.js b/docs/pages/x/api/charts/chart-print-export-options.js
index 5fcbd2fc48570..415fe973526e2 100644
--- a/docs/pages/x/api/charts/chart-print-export-options.js
+++ b/docs/pages/x/api/charts/chart-print-export-options.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chart-print-export-options.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartPrintExportOptions } from './types.chart-print-export-options';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/chart-print-export-options.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartPrintExportOptions" allowedProps={allowedProps}>
+      <TypesChartPrintExportOptions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-axis-highlight.js b/docs/pages/x/api/charts/charts-axis-highlight.js
index e5adae243673c..beb00f309e5a7 100644
--- a/docs/pages/x/api/charts/charts-axis-highlight.js
+++ b/docs/pages/x/api/charts/charts-axis-highlight.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-axis-highlight.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsAxisHighlight } from './types.charts-axis-highlight';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-axis-highlight',
-    false,
-    /\.\/charts-axis-highlight.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsAxisHighlight" allowedProps={allowedProps}>
+      <TypesChartsAxisHighlight />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-axis-tooltip-content.js b/docs/pages/x/api/charts/charts-axis-tooltip-content.js
index 847c27787cb58..72de58bcd9192 100644
--- a/docs/pages/x/api/charts/charts-axis-tooltip-content.js
+++ b/docs/pages/x/api/charts/charts-axis-tooltip-content.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-axis-tooltip-content.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsAxisTooltipContent } from './types.charts-axis-tooltip-content';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'sort'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-axis-tooltip-content',
-    false,
-    /\.\/charts-axis-tooltip-content.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsAxisTooltipContent" allowedProps={allowedProps}>
+      <TypesChartsAxisTooltipContent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-axis.js b/docs/pages/x/api/charts/charts-axis.js
index b3247a82b3618..156b609cbf488 100644
--- a/docs/pages/x/api/charts/charts-axis.js
+++ b/docs/pages/x/api/charts/charts-axis.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-axis.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsAxis } from './types.charts-axis';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-axis',
-    false,
-    /\.\/charts-axis.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsAxis" allowedProps={allowedProps}>
+      <TypesChartsAxis />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-brush-overlay.js b/docs/pages/x/api/charts/charts-brush-overlay.js
index 07a8ec37e348c..3ef251c4397f2 100644
--- a/docs/pages/x/api/charts/charts-brush-overlay.js
+++ b/docs/pages/x/api/charts/charts-brush-overlay.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-brush-overlay.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsBrushOverlay } from './types.charts-brush-overlay';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-brush-overlay',
-    false,
-    /\.\/charts-brush-overlay.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsBrushOverlay" allowedProps={allowedProps}>
+      <TypesChartsBrushOverlay />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-clip-path.js b/docs/pages/x/api/charts/charts-clip-path.js
index 566fc52ebcd24..cb6d13615bd82 100644
--- a/docs/pages/x/api/charts/charts-clip-path.js
+++ b/docs/pages/x/api/charts/charts-clip-path.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-clip-path.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsClipPath } from './types.charts-clip-path';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['id', 'offset'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-clip-path',
-    false,
-    /\.\/charts-clip-path.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsClipPath" allowedProps={allowedProps}>
+      <TypesChartsClipPath />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-container-premium.js b/docs/pages/x/api/charts/charts-container-premium.js
index 655fd9617fd4a..aa912b1416be1 100644
--- a/docs/pages/x/api/charts/charts-container-premium.js
+++ b/docs/pages/x/api/charts/charts-container-premium.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-container-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsContainerPremium } from './types.charts-container-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-container-premium',
-    false,
-    /\.\/charts-container-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsContainerPremium" allowedProps={allowedProps}>
+      <TypesChartsContainerPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-container-pro.js b/docs/pages/x/api/charts/charts-container-pro.js
index d3fd760dc4918..90bd3d7c23407 100644
--- a/docs/pages/x/api/charts/charts-container-pro.js
+++ b/docs/pages/x/api/charts/charts-container-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-container-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsContainerPro } from './types.charts-container-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colors', 'dataset', 'disableAxisListener', 'height', 'highlightedItem', 'id', 'initialZoom', 'margin', 'onHighlightChange', 'onZoomChange', 'series', 'skipAnimation', 'width', 'xAxis', 'yAxis', 'zAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-container-pro',
-    false,
-    /\.\/charts-container-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsContainerPro" allowedProps={allowedProps}>
+      <TypesChartsContainerPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-container.js b/docs/pages/x/api/charts/charts-container.js
index 6fd8e673f74e1..8a2419f704ce2 100644
--- a/docs/pages/x/api/charts/charts-container.js
+++ b/docs/pages/x/api/charts/charts-container.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-container.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsContainer } from './types.charts-container';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableHitArea', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'hiddenItems', 'highlightedAxis', 'highlightedItem', 'hitAreaRadius', 'id', 'initialHiddenItems', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'radiusAxis', 'rotationAxis', 'series', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-container',
-    false,
-    /\.\/charts-container.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsContainer" allowedProps={allowedProps}>
+      <TypesChartsContainer />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-data-provider-premium.js b/docs/pages/x/api/charts/charts-data-provider-premium.js
index 932bddf7ef978..12c42ded7d038 100644
--- a/docs/pages/x/api/charts/charts-data-provider-premium.js
+++ b/docs/pages/x/api/charts/charts-data-provider-premium.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-data-provider-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsDataProviderPremium } from './types.charts-data-provider-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colors', 'dataset', 'height', 'id', 'localeText', 'margin', 'series', 'skipAnimation', 'slotProps', 'slots', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-data-provider-premium',
-    false,
-    /\.\/charts-data-provider-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsDataProviderPremium" allowedProps={allowedProps}>
+      <TypesChartsDataProviderPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-data-provider-pro.js b/docs/pages/x/api/charts/charts-data-provider-pro.js
index 247b7f4c2d801..2155d418c4016 100644
--- a/docs/pages/x/api/charts/charts-data-provider-pro.js
+++ b/docs/pages/x/api/charts/charts-data-provider-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-data-provider-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsDataProviderPro } from './types.charts-data-provider-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colors', 'dataset', 'height', 'id', 'localeText', 'margin', 'series', 'skipAnimation', 'slotProps', 'slots', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-data-provider-pro',
-    false,
-    /\.\/charts-data-provider-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsDataProviderPro" allowedProps={allowedProps}>
+      <TypesChartsDataProviderPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-data-provider.js b/docs/pages/x/api/charts/charts-data-provider.js
index c4bf4e50dbb5e..cf23cd92e60e0 100644
--- a/docs/pages/x/api/charts/charts-data-provider.js
+++ b/docs/pages/x/api/charts/charts-data-provider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-data-provider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsDataProvider } from './types.charts-data-provider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colors', 'dataset', 'height', 'id', 'localeText', 'margin', 'series', 'skipAnimation', 'slotProps', 'slots', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-data-provider',
-    false,
-    /\.\/charts-data-provider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsDataProvider" allowedProps={allowedProps}>
+      <TypesChartsDataProvider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-grid.js b/docs/pages/x/api/charts/charts-grid.js
index a7ec105b0ce79..a5c39719dd1cb 100644
--- a/docs/pages/x/api/charts/charts-grid.js
+++ b/docs/pages/x/api/charts/charts-grid.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-grid.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsGrid } from './types.charts-grid';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'horizontal', 'vertical'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-grid',
-    false,
-    /\.\/charts-grid.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsGrid" allowedProps={allowedProps}>
+      <TypesChartsGrid />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-item-tooltip-content.js b/docs/pages/x/api/charts/charts-item-tooltip-content.js
index f8143c0e574e2..24a9c41c87817 100644
--- a/docs/pages/x/api/charts/charts-item-tooltip-content.js
+++ b/docs/pages/x/api/charts/charts-item-tooltip-content.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-item-tooltip-content.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsItemTooltipContent } from './types.charts-item-tooltip-content';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-item-tooltip-content',
-    false,
-    /\.\/charts-item-tooltip-content.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsItemTooltipContent" allowedProps={allowedProps}>
+      <TypesChartsItemTooltipContent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-legend.js b/docs/pages/x/api/charts/charts-legend.js
index 6441b2214c7ae..00819030c571b 100644
--- a/docs/pages/x/api/charts/charts-legend.js
+++ b/docs/pages/x/api/charts/charts-legend.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-legend.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsLegend } from './types.charts-legend';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'direction', 'onItemClick', 'slotProps', 'slots', 'toggleVisibilityOnClick'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-legend',
-    false,
-    /\.\/charts-legend.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsLegend" allowedProps={allowedProps}>
+      <TypesChartsLegend />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-localization-provider.js b/docs/pages/x/api/charts/charts-localization-provider.js
index a7697d44da743..07de4f703ddf7 100644
--- a/docs/pages/x/api/charts/charts-localization-provider.js
+++ b/docs/pages/x/api/charts/charts-localization-provider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-localization-provider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsLocalizationProvider } from './types.charts-localization-provider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['localeText'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-localization-provider',
-    false,
-    /\.\/charts-localization-provider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsLocalizationProvider" allowedProps={allowedProps}>
+      <TypesChartsLocalizationProvider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-reference-line.js b/docs/pages/x/api/charts/charts-reference-line.js
index 604b689fb73cb..6e42e910b5de1 100644
--- a/docs/pages/x/api/charts/charts-reference-line.js
+++ b/docs/pages/x/api/charts/charts-reference-line.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-reference-line.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsReferenceLine } from './types.charts-reference-line';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axisId', 'classes', 'label', 'labelAlign', 'labelStyle', 'lineStyle', 'spacing', 'x', 'y'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-reference-line',
-    false,
-    /\.\/charts-reference-line.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsReferenceLine" allowedProps={allowedProps}>
+      <TypesChartsReferenceLine />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-surface.js b/docs/pages/x/api/charts/charts-surface.js
index a0f15d7d3dbdd..04f9c6d0a2ba6 100644
--- a/docs/pages/x/api/charts/charts-surface.js
+++ b/docs/pages/x/api/charts/charts-surface.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-surface.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsSurface } from './types.charts-surface';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['desc', 'title'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-surface',
-    false,
-    /\.\/charts-surface.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsSurface" allowedProps={allowedProps}>
+      <TypesChartsSurface />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-text.js b/docs/pages/x/api/charts/charts-text.js
index b4fd56b367a5a..a03cd05fe2e23 100644
--- a/docs/pages/x/api/charts/charts-text.js
+++ b/docs/pages/x/api/charts/charts-text.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-text.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsText } from './types.charts-text';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['lineHeight', 'needsComputation', 'style', 'text'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-text',
-    false,
-    /\.\/charts-text.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsText" allowedProps={allowedProps}>
+      <TypesChartsText />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-toolbar-image-export-trigger.js b/docs/pages/x/api/charts/charts-toolbar-image-export-trigger.js
index 2406a15f6c90c..7eee91f0b0333 100644
--- a/docs/pages/x/api/charts/charts-toolbar-image-export-trigger.js
+++ b/docs/pages/x/api/charts/charts-toolbar-image-export-trigger.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-toolbar-image-export-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsToolbarImageExportTrigger } from './types.charts-toolbar-image-export-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['options', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-toolbar-image-export-trigger',
-    false,
-    /\.\/charts-toolbar-image-export-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsToolbarImageExportTrigger" allowedProps={allowedProps}>
+      <TypesChartsToolbarImageExportTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-toolbar-print-export-trigger.js b/docs/pages/x/api/charts/charts-toolbar-print-export-trigger.js
index 6152129bc96af..748c68540f273 100644
--- a/docs/pages/x/api/charts/charts-toolbar-print-export-trigger.js
+++ b/docs/pages/x/api/charts/charts-toolbar-print-export-trigger.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-toolbar-print-export-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsToolbarPrintExportTrigger } from './types.charts-toolbar-print-export-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['options', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-toolbar-print-export-trigger',
-    false,
-    /\.\/charts-toolbar-print-export-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsToolbarPrintExportTrigger" allowedProps={allowedProps}>
+      <TypesChartsToolbarPrintExportTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-toolbar-pro.js b/docs/pages/x/api/charts/charts-toolbar-pro.js
index 03203e17f2da8..c4859f7c425fc 100644
--- a/docs/pages/x/api/charts/charts-toolbar-pro.js
+++ b/docs/pages/x/api/charts/charts-toolbar-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-toolbar-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsToolbarPro } from './types.charts-toolbar-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-toolbar-pro',
-    false,
-    /\.\/charts-toolbar-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsToolbarPro" allowedProps={allowedProps}>
+      <TypesChartsToolbarPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-toolbar-zoom-in-trigger.js b/docs/pages/x/api/charts/charts-toolbar-zoom-in-trigger.js
index 9dd668a88ba77..b412330ccf4e6 100644
--- a/docs/pages/x/api/charts/charts-toolbar-zoom-in-trigger.js
+++ b/docs/pages/x/api/charts/charts-toolbar-zoom-in-trigger.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-toolbar-zoom-in-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsToolbarZoomInTrigger } from './types.charts-toolbar-zoom-in-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-toolbar-zoom-in-trigger',
-    false,
-    /\.\/charts-toolbar-zoom-in-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsToolbarZoomInTrigger" allowedProps={allowedProps}>
+      <TypesChartsToolbarZoomInTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-toolbar-zoom-out-trigger.js b/docs/pages/x/api/charts/charts-toolbar-zoom-out-trigger.js
index ce3798642090b..cad1ec84e727d 100644
--- a/docs/pages/x/api/charts/charts-toolbar-zoom-out-trigger.js
+++ b/docs/pages/x/api/charts/charts-toolbar-zoom-out-trigger.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-toolbar-zoom-out-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsToolbarZoomOutTrigger } from './types.charts-toolbar-zoom-out-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-toolbar-zoom-out-trigger',
-    false,
-    /\.\/charts-toolbar-zoom-out-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsToolbarZoomOutTrigger" allowedProps={allowedProps}>
+      <TypesChartsToolbarZoomOutTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-tooltip-container.js b/docs/pages/x/api/charts/charts-tooltip-container.js
index a9db2d6cee91a..0e98784fc7c7e 100644
--- a/docs/pages/x/api/charts/charts-tooltip-container.js
+++ b/docs/pages/x/api/charts/charts-tooltip-container.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-tooltip-container.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsTooltipContainer } from './types.charts-tooltip-container';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['anchor', 'anchorEl', 'children', 'classes', 'component', 'components', 'componentsProps', 'container', 'disablePortal', 'keepMounted', 'modifiers', 'open', 'placement', 'popperOptions', 'popperRef', 'position', 'slotProps', 'slots', 'sx', 'transition', 'trigger'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-tooltip-container',
-    false,
-    /\.\/charts-tooltip-container.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsTooltipContainer" allowedProps={allowedProps}>
+      <TypesChartsTooltipContainer />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-tooltip.js b/docs/pages/x/api/charts/charts-tooltip.js
index 051376e0ac538..8981ac302ed81 100644
--- a/docs/pages/x/api/charts/charts-tooltip.js
+++ b/docs/pages/x/api/charts/charts-tooltip.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-tooltip.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsTooltip } from './types.charts-tooltip';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['anchor', 'anchorEl', 'classes', 'component', 'components', 'componentsProps', 'container', 'disablePortal', 'keepMounted', 'modifiers', 'open', 'placement', 'popperOptions', 'popperRef', 'position', 'slotProps', 'slots', 'sort', 'sx', 'transition', 'trigger'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-tooltip',
-    false,
-    /\.\/charts-tooltip.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsTooltip" allowedProps={allowedProps}>
+      <TypesChartsTooltip />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-wrapper.js b/docs/pages/x/api/charts/charts-wrapper.js
index 2b1de631ae737..37fc3107b6c73 100644
--- a/docs/pages/x/api/charts/charts-wrapper.js
+++ b/docs/pages/x/api/charts/charts-wrapper.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-wrapper.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsWrapper } from './types.charts-wrapper';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['extendVertically', 'hideLegend', 'legendDirection', 'legendPosition'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-wrapper',
-    false,
-    /\.\/charts-wrapper.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsWrapper" allowedProps={allowedProps}>
+      <TypesChartsWrapper />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-x-axis.js b/docs/pages/x/api/charts/charts-x-axis.js
index 8475d03a81cf7..c44e0c0b4212f 100644
--- a/docs/pages/x/api/charts/charts-x-axis.js
+++ b/docs/pages/x/api/charts/charts-x-axis.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-x-axis.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsXAxis } from './types.charts-x-axis';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axisId', 'classes', 'disableLine', 'disableTicks', 'label', 'labelStyle', 'slotProps', 'slots', 'tickInterval', 'tickLabelInterval', 'tickLabelMinGap', 'tickLabelPlacement', 'tickLabelStyle', 'tickMaxStep', 'tickMinStep', 'tickNumber', 'tickPlacement', 'tickSize'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-x-axis',
-    false,
-    /\.\/charts-x-axis.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsXAxis" allowedProps={allowedProps}>
+      <TypesChartsXAxis />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-y-axis.js b/docs/pages/x/api/charts/charts-y-axis.js
index f070dab82d0d6..923789e685d65 100644
--- a/docs/pages/x/api/charts/charts-y-axis.js
+++ b/docs/pages/x/api/charts/charts-y-axis.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-y-axis.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsYAxis } from './types.charts-y-axis';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axisId', 'classes', 'disableLine', 'disableTicks', 'label', 'labelStyle', 'slotProps', 'slots', 'tickInterval', 'tickLabelInterval', 'tickLabelPlacement', 'tickLabelStyle', 'tickMaxStep', 'tickMinStep', 'tickNumber', 'tickPlacement', 'tickSize'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-y-axis',
-    false,
-    /\.\/charts-y-axis.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsYAxis" allowedProps={allowedProps}>
+      <TypesChartsYAxis />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/charts-zoom-slider.js b/docs/pages/x/api/charts/charts-zoom-slider.js
index c902e6c27be51..11c104188591f 100644
--- a/docs/pages/x/api/charts/charts-zoom-slider.js
+++ b/docs/pages/x/api/charts/charts-zoom-slider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './charts-zoom-slider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsZoomSlider } from './types.charts-zoom-slider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/charts-zoom-slider',
-    false,
-    /\.\/charts-zoom-slider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsZoomSlider" allowedProps={allowedProps}>
+      <TypesChartsZoomSlider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/continuous-color-legend.js b/docs/pages/x/api/charts/continuous-color-legend.js
index fa3c42ac6e0e8..40df520f7ee5b 100644
--- a/docs/pages/x/api/charts/continuous-color-legend.js
+++ b/docs/pages/x/api/charts/continuous-color-legend.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './continuous-color-legend.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesContinuousColorLegend } from './types.continuous-color-legend';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axisDirection', 'axisId', 'classes', 'direction', 'gradientId', 'labelPosition', 'maxLabel', 'minLabel', 'reverse', 'rotateGradient', 'thickness'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/continuous-color-legend',
-    false,
-    /\.\/continuous-color-legend.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ContinuousColorLegend" allowedProps={allowedProps}>
+      <TypesContinuousColorLegend />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/focused-funnel-section.js b/docs/pages/x/api/charts/focused-funnel-section.js
index fc8be4b84bf29..2459d2ada5da0 100644
--- a/docs/pages/x/api/charts/focused-funnel-section.js
+++ b/docs/pages/x/api/charts/focused-funnel-section.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './focused-funnel-section.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFocusedFunnelSection } from './types.focused-funnel-section';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/focused-funnel-section',
-    false,
-    /\.\/focused-funnel-section.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FocusedFunnelSection" allowedProps={allowedProps}>
+      <TypesFocusedFunnelSection />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/focused-heatmap-cell.js b/docs/pages/x/api/charts/focused-heatmap-cell.js
index f6256afac0656..9c9006c795d13 100644
--- a/docs/pages/x/api/charts/focused-heatmap-cell.js
+++ b/docs/pages/x/api/charts/focused-heatmap-cell.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './focused-heatmap-cell.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFocusedHeatmapCell } from './types.focused-heatmap-cell';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/focused-heatmap-cell',
-    false,
-    /\.\/focused-heatmap-cell.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FocusedHeatmapCell" allowedProps={allowedProps}>
+      <TypesFocusedHeatmapCell />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/focused-radar-mark.js b/docs/pages/x/api/charts/focused-radar-mark.js
index 022512ab391b0..d54770d29b6b7 100644
--- a/docs/pages/x/api/charts/focused-radar-mark.js
+++ b/docs/pages/x/api/charts/focused-radar-mark.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './focused-radar-mark.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFocusedRadarMark } from './types.focused-radar-mark';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/focused-radar-mark',
-    false,
-    /\.\/focused-radar-mark.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FocusedRadarMark" allowedProps={allowedProps}>
+      <TypesFocusedRadarMark />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/focused-range-bar.js b/docs/pages/x/api/charts/focused-range-bar.js
index 8b7519b57efd9..135aabfb5969f 100644
--- a/docs/pages/x/api/charts/focused-range-bar.js
+++ b/docs/pages/x/api/charts/focused-range-bar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './focused-range-bar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFocusedRangeBar } from './types.focused-range-bar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/focused-range-bar',
-    false,
-    /\.\/focused-range-bar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FocusedRangeBar" allowedProps={allowedProps}>
+      <TypesFocusedRangeBar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/focused-sankey-link.js b/docs/pages/x/api/charts/focused-sankey-link.js
index 2a5ed861901a0..3b78881aa023e 100644
--- a/docs/pages/x/api/charts/focused-sankey-link.js
+++ b/docs/pages/x/api/charts/focused-sankey-link.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './focused-sankey-link.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFocusedSankeyLink } from './types.focused-sankey-link';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/focused-sankey-link',
-    false,
-    /\.\/focused-sankey-link.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FocusedSankeyLink" allowedProps={allowedProps}>
+      <TypesFocusedSankeyLink />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/focused-sankey-node.js b/docs/pages/x/api/charts/focused-sankey-node.js
index 86b0a74546d1f..851c41bd31fb1 100644
--- a/docs/pages/x/api/charts/focused-sankey-node.js
+++ b/docs/pages/x/api/charts/focused-sankey-node.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './focused-sankey-node.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFocusedSankeyNode } from './types.focused-sankey-node';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/focused-sankey-node',
-    false,
-    /\.\/focused-sankey-node.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FocusedSankeyNode" allowedProps={allowedProps}>
+      <TypesFocusedSankeyNode />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/funnel-chart.js b/docs/pages/x/api/charts/funnel-chart.js
index 32aef0faefddd..584ee5cbbd511 100644
--- a/docs/pages/x/api/charts/funnel-chart.js
+++ b/docs/pages/x/api/charts/funnel-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './funnel-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFunnelChart } from './types.funnel-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axisHighlight', 'categoryAxis', 'colors', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'gap', 'height', 'hiddenItems', 'hideLegend', 'highlightedItem', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onItemClick', 'onTooltipItemChange', 'series', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipItem', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/funnel-chart',
-    false,
-    /\.\/funnel-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FunnelChart" allowedProps={allowedProps}>
+      <TypesFunnelChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/funnel-plot.js b/docs/pages/x/api/charts/funnel-plot.js
index 34bb54b209442..70d98d03d8276 100644
--- a/docs/pages/x/api/charts/funnel-plot.js
+++ b/docs/pages/x/api/charts/funnel-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './funnel-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFunnelPlot } from './types.funnel-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/funnel-plot',
-    false,
-    /\.\/funnel-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FunnelPlot" allowedProps={allowedProps}>
+      <TypesFunnelPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/funnel-series.js b/docs/pages/x/api/charts/funnel-series.js
index 6d06e1f509049..d5abf03bacc55 100644
--- a/docs/pages/x/api/charts/funnel-series.js
+++ b/docs/pages/x/api/charts/funnel-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './funnel-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFunnelSeries } from './types.funnel-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/funnel-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FunnelSeries" allowedProps={allowedProps}>
+      <TypesFunnelSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/gauge-container.js b/docs/pages/x/api/charts/gauge-container.js
index c669dbb031e8b..de15fc31f6fcf 100644
--- a/docs/pages/x/api/charts/gauge-container.js
+++ b/docs/pages/x/api/charts/gauge-container.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './gauge-container.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGaugeContainer } from './types.gauge-container';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['cornerRadius', 'cx', 'cy', 'desc', 'endAngle', 'height', 'id', 'innerRadius', 'margin', 'outerRadius', 'skipAnimation', 'startAngle', 'title', 'value', 'valueMax', 'valueMin', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/gauge-container',
-    false,
-    /\.\/gauge-container.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GaugeContainer" allowedProps={allowedProps}>
+      <TypesGaugeContainer />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/gauge.js b/docs/pages/x/api/charts/gauge.js
index 5d6787746d9c8..69e0bc72b8b6c 100644
--- a/docs/pages/x/api/charts/gauge.js
+++ b/docs/pages/x/api/charts/gauge.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './gauge.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGauge } from './types.gauge';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['cornerRadius', 'cx', 'cy', 'desc', 'endAngle', 'height', 'id', 'innerRadius', 'margin', 'outerRadius', 'skipAnimation', 'startAngle', 'title', 'value', 'valueMax', 'valueMin', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/gauge',
-    false,
-    /\.\/gauge.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="Gauge" allowedProps={allowedProps}>
+      <TypesGauge />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap-cell.js b/docs/pages/x/api/charts/heatmap-cell.js
index b010ebe16187e..98443e91aadff 100644
--- a/docs/pages/x/api/charts/heatmap-cell.js
+++ b/docs/pages/x/api/charts/heatmap-cell.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap-cell.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmapCell } from './types.heatmap-cell';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/heatmap-cell',
-    false,
-    /\.\/heatmap-cell.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="HeatmapCell" allowedProps={allowedProps}>
+      <TypesHeatmapCell />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap-plot.js b/docs/pages/x/api/charts/heatmap-plot.js
index 2155a3681f870..e8881db08d36d 100644
--- a/docs/pages/x/api/charts/heatmap-plot.js
+++ b/docs/pages/x/api/charts/heatmap-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmapPlot } from './types.heatmap-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['borderRadius', 'className', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/heatmap-plot',
-    false,
-    /\.\/heatmap-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="HeatmapPlot" allowedProps={allowedProps}>
+      <TypesHeatmapPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap-premium.js b/docs/pages/x/api/charts/heatmap-premium.js
index ba465fc43bf94..e25f77eeec4c3 100644
--- a/docs/pages/x/api/charts/heatmap-premium.js
+++ b/docs/pages/x/api/charts/heatmap-premium.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmapPremium } from './types.heatmap-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'hideLegend', 'highlightedItem', 'id', 'initialZoom', 'loading', 'localeText', 'margin', 'onHighlightChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'renderer', 'series', 'showToolbar', 'slotProps', 'slots', 'title', 'tooltip', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/heatmap-premium',
-    false,
-    /\.\/heatmap-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="HeatmapPremium" allowedProps={allowedProps}>
+      <TypesHeatmapPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap-series.js b/docs/pages/x/api/charts/heatmap-series.js
index 3f2228ffa3f2f..3f5f6d2313e3d 100644
--- a/docs/pages/x/api/charts/heatmap-series.js
+++ b/docs/pages/x/api/charts/heatmap-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmapSeries } from './types.heatmap-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/heatmap-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="HeatmapSeries" allowedProps={allowedProps}>
+      <TypesHeatmapSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap-tooltip-content.js b/docs/pages/x/api/charts/heatmap-tooltip-content.js
index 96176fa8d67e9..ba76e39b7602c 100644
--- a/docs/pages/x/api/charts/heatmap-tooltip-content.js
+++ b/docs/pages/x/api/charts/heatmap-tooltip-content.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap-tooltip-content.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmapTooltipContent } from './types.heatmap-tooltip-content';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/heatmap-tooltip-content',
-    false,
-    /\.\/heatmap-tooltip-content.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="HeatmapTooltipContent" allowedProps={allowedProps}>
+      <TypesHeatmapTooltipContent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap-tooltip.js b/docs/pages/x/api/charts/heatmap-tooltip.js
index bf4dd9ab427e5..d4386a143120b 100644
--- a/docs/pages/x/api/charts/heatmap-tooltip.js
+++ b/docs/pages/x/api/charts/heatmap-tooltip.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap-tooltip.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmapTooltip } from './types.heatmap-tooltip';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['anchor', 'anchorEl', 'classes', 'component', 'components', 'componentsProps', 'container', 'disablePortal', 'keepMounted', 'modifiers', 'open', 'placement', 'popperOptions', 'popperRef', 'position', 'slotProps', 'slots', 'sx', 'transition', 'trigger'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/heatmap-tooltip',
-    false,
-    /\.\/heatmap-tooltip.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="HeatmapTooltip" allowedProps={allowedProps}>
+      <TypesHeatmapTooltip />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/heatmap.js b/docs/pages/x/api/charts/heatmap.js
index 7a6362626eb3e..c1d85c316a2a8 100644
--- a/docs/pages/x/api/charts/heatmap.js
+++ b/docs/pages/x/api/charts/heatmap.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './heatmap.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesHeatmap } from './types.heatmap';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['borderRadius', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'hideLegend', 'highlightedItem', 'id', 'initialZoom', 'loading', 'localeText', 'margin', 'onHighlightChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'series', 'showToolbar', 'slotProps', 'slots', 'title', 'tooltip', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/heatmap',
-    false,
-    /\.\/heatmap.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="Heatmap" allowedProps={allowedProps}>
+      <TypesHeatmap />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/legend-item-params.js b/docs/pages/x/api/charts/legend-item-params.js
index bcb6ce835da7f..b42e3a6b20a86 100644
--- a/docs/pages/x/api/charts/legend-item-params.js
+++ b/docs/pages/x/api/charts/legend-item-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './legend-item-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLegendItemParams } from './types.legend-item-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/legend-item-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LegendItemParams" allowedProps={allowedProps}>
+      <TypesLegendItemParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-chart-pro.js b/docs/pages/x/api/charts/line-chart-pro.js
index 980facd3b7bdb..d0682949f2375 100644
--- a/docs/pages/x/api/charts/line-chart-pro.js
+++ b/docs/pages/x/api/charts/line-chart-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-chart-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLineChartPro } from './types.line-chart-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'disableLineItemHighlight', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'initialZoom', 'loading', 'localeText', 'margin', 'onAreaClick', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onLineClick', 'onMarkClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/line-chart-pro',
-    false,
-    /\.\/line-chart-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LineChartPro" allowedProps={allowedProps}>
+      <TypesLineChartPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-chart.js b/docs/pages/x/api/charts/line-chart.js
index beb551dcf7aba..07749d738f6c4 100644
--- a/docs/pages/x/api/charts/line-chart.js
+++ b/docs/pages/x/api/charts/line-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLineChart } from './types.line-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'disableLineItemHighlight', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedAxis', 'highlightedItem', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onAreaClick', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onLineClick', 'onMarkClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/line-chart',
-    false,
-    /\.\/line-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LineChart" allowedProps={allowedProps}>
+      <TypesLineChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-element.js b/docs/pages/x/api/charts/line-element.js
index d7184c18b0a04..0a1150b897175 100644
--- a/docs/pages/x/api/charts/line-element.js
+++ b/docs/pages/x/api/charts/line-element.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLineElement } from './types.line-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['hidden', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/line-element',
-    false,
-    /\.\/line-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LineElement" allowedProps={allowedProps}>
+      <TypesLineElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-highlight-element.js b/docs/pages/x/api/charts/line-highlight-element.js
index 2a0b2f554d617..36960eb6b2179 100644
--- a/docs/pages/x/api/charts/line-highlight-element.js
+++ b/docs/pages/x/api/charts/line-highlight-element.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-highlight-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLineHighlightElement } from './types.line-highlight-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/line-highlight-element',
-    false,
-    /\.\/line-highlight-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LineHighlightElement" allowedProps={allowedProps}>
+      <TypesLineHighlightElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-highlight-plot.js b/docs/pages/x/api/charts/line-highlight-plot.js
index 72853a4088d5a..b88954f9d7382 100644
--- a/docs/pages/x/api/charts/line-highlight-plot.js
+++ b/docs/pages/x/api/charts/line-highlight-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-highlight-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLineHighlightPlot } from './types.line-highlight-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/line-highlight-plot',
-    false,
-    /\.\/line-highlight-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LineHighlightPlot" allowedProps={allowedProps}>
+      <TypesLineHighlightPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-plot.js b/docs/pages/x/api/charts/line-plot.js
index 7bbb61a96c45d..f89959950b724 100644
--- a/docs/pages/x/api/charts/line-plot.js
+++ b/docs/pages/x/api/charts/line-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLinePlot } from './types.line-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/line-plot',
-    false,
-    /\.\/line-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LinePlot" allowedProps={allowedProps}>
+      <TypesLinePlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/line-series.js b/docs/pages/x/api/charts/line-series.js
index 0930ba5152aea..be5b73d670a5c 100644
--- a/docs/pages/x/api/charts/line-series.js
+++ b/docs/pages/x/api/charts/line-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './line-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLineSeries } from './types.line-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/line-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LineSeries" allowedProps={allowedProps}>
+      <TypesLineSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/mark-element.js b/docs/pages/x/api/charts/mark-element.js
index ef1578e89fe21..9348deb99a083 100644
--- a/docs/pages/x/api/charts/mark-element.js
+++ b/docs/pages/x/api/charts/mark-element.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mark-element.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMarkElement } from './types.mark-element';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['dataIndex', 'hidden', 'isFaded', 'isHighlighted', 'shape', 'skipAnimation'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/mark-element',
-    false,
-    /\.\/mark-element.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MarkElement" allowedProps={allowedProps}>
+      <TypesMarkElement />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/mark-plot.js b/docs/pages/x/api/charts/mark-plot.js
index dc046255e92b2..15aa2b09fa2ce 100644
--- a/docs/pages/x/api/charts/mark-plot.js
+++ b/docs/pages/x/api/charts/mark-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mark-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMarkPlot } from './types.mark-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/mark-plot',
-    false,
-    /\.\/mark-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MarkPlot" allowedProps={allowedProps}>
+      <TypesMarkPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-arc-label-plot.js b/docs/pages/x/api/charts/pie-arc-label-plot.js
index f90cb91f321ab..696dbf356415d 100644
--- a/docs/pages/x/api/charts/pie-arc-label-plot.js
+++ b/docs/pages/x/api/charts/pie-arc-label-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-arc-label-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieArcLabelPlot } from './types.pie-arc-label-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['arcLabel', 'arcLabelMinAngle', 'arcLabelRadius', 'cornerRadius', 'faded', 'highlighted', 'innerRadius', 'outerRadius', 'paddingAngle', 'seriesId', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-arc-label-plot',
-    false,
-    /\.\/pie-arc-label-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieArcLabelPlot" allowedProps={allowedProps}>
+      <TypesPieArcLabelPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-arc-label.js b/docs/pages/x/api/charts/pie-arc-label.js
index 167aacf48bb4f..0b3da0489ce86 100644
--- a/docs/pages/x/api/charts/pie-arc-label.js
+++ b/docs/pages/x/api/charts/pie-arc-label.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-arc-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieArcLabel } from './types.pie-arc-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-arc-label',
-    false,
-    /\.\/pie-arc-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieArcLabel" allowedProps={allowedProps}>
+      <TypesPieArcLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-arc-plot.js b/docs/pages/x/api/charts/pie-arc-plot.js
index 93f14c2f02bfd..a3a2b360e833b 100644
--- a/docs/pages/x/api/charts/pie-arc-plot.js
+++ b/docs/pages/x/api/charts/pie-arc-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-arc-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieArcPlot } from './types.pie-arc-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['arcLabelRadius', 'cornerRadius', 'faded', 'highlighted', 'innerRadius', 'onItemClick', 'outerRadius', 'paddingAngle', 'seriesId', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-arc-plot',
-    false,
-    /\.\/pie-arc-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieArcPlot" allowedProps={allowedProps}>
+      <TypesPieArcPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-arc.js b/docs/pages/x/api/charts/pie-arc.js
index 69bf4d4267107..5bc256ebb1566 100644
--- a/docs/pages/x/api/charts/pie-arc.js
+++ b/docs/pages/x/api/charts/pie-arc.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-arc.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieArc } from './types.pie-arc';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['skipAnimation', 'skipInteraction'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-arc',
-    false,
-    /\.\/pie-arc.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieArc" allowedProps={allowedProps}>
+      <TypesPieArc />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-chart-pro.js b/docs/pages/x/api/charts/pie-chart-pro.js
index 49c2012ec110d..6b5a3b4920125 100644
--- a/docs/pages/x/api/charts/pie-chart-pro.js
+++ b/docs/pages/x/api/charts/pie-chart-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-chart-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieChartPro } from './types.pie-chart-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colors', 'dataset', 'desc', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'hiddenItems', 'hideLegend', 'highlightedItem', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onHiddenItemsChange', 'onHighlightChange', 'onItemClick', 'onTooltipItemChange', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipItem', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-chart-pro',
-    false,
-    /\.\/pie-chart-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieChartPro" allowedProps={allowedProps}>
+      <TypesPieChartPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-chart.js b/docs/pages/x/api/charts/pie-chart.js
index a8d7670843f31..6d025217d2dad 100644
--- a/docs/pages/x/api/charts/pie-chart.js
+++ b/docs/pages/x/api/charts/pie-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieChart } from './types.pie-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colors', 'dataset', 'desc', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'hiddenItems', 'hideLegend', 'highlightedItem', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onHiddenItemsChange', 'onHighlightChange', 'onItemClick', 'onTooltipItemChange', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipItem', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-chart',
-    false,
-    /\.\/pie-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieChart" allowedProps={allowedProps}>
+      <TypesPieChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-plot.js b/docs/pages/x/api/charts/pie-plot.js
index ed826c648f964..b378a83d57ea8 100644
--- a/docs/pages/x/api/charts/pie-plot.js
+++ b/docs/pages/x/api/charts/pie-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPiePlot } from './types.pie-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/pie-plot',
-    false,
-    /\.\/pie-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PiePlot" allowedProps={allowedProps}>
+      <TypesPiePlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/pie-series.js b/docs/pages/x/api/charts/pie-series.js
index 40f519e6a36b3..d5fb006d07856 100644
--- a/docs/pages/x/api/charts/pie-series.js
+++ b/docs/pages/x/api/charts/pie-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pie-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPieSeries } from './types.pie-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/pie-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PieSeries" allowedProps={allowedProps}>
+      <TypesPieSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/piecewise-color-legend.js b/docs/pages/x/api/charts/piecewise-color-legend.js
index f40a52fcc3260..c5a8fefbef394 100644
--- a/docs/pages/x/api/charts/piecewise-color-legend.js
+++ b/docs/pages/x/api/charts/piecewise-color-legend.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './piecewise-color-legend.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPiecewiseColorLegend } from './types.piecewise-color-legend';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axisDirection', 'axisId', 'classes', 'direction', 'labelFormatter', 'labelPosition', 'markType', 'onItemClick'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/piecewise-color-legend',
-    false,
-    /\.\/piecewise-color-legend.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PiecewiseColorLegend" allowedProps={allowedProps}>
+      <TypesPiecewiseColorLegend />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-axis-highlight.js b/docs/pages/x/api/charts/radar-axis-highlight.js
index 8dbb80f1a1e53..4c7cfb840b457 100644
--- a/docs/pages/x/api/charts/radar-axis-highlight.js
+++ b/docs/pages/x/api/charts/radar-axis-highlight.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-axis-highlight.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarAxisHighlight } from './types.radar-axis-highlight';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-axis-highlight',
-    false,
-    /\.\/radar-axis-highlight.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarAxisHighlight" allowedProps={allowedProps}>
+      <TypesRadarAxisHighlight />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-axis.js b/docs/pages/x/api/charts/radar-axis.js
index 0fa853dffc46a..148258c365e2e 100644
--- a/docs/pages/x/api/charts/radar-axis.js
+++ b/docs/pages/x/api/charts/radar-axis.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-axis.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarAxis } from './types.radar-axis';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['angle', 'classes', 'divisions', 'dominantBaseline', 'labelOrientation', 'metric', 'textAnchor'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-axis',
-    false,
-    /\.\/radar-axis.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarAxis" allowedProps={allowedProps}>
+      <TypesRadarAxis />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-chart-pro.js b/docs/pages/x/api/charts/radar-chart-pro.js
index c48732ce6cf3d..32bb57cef5d92 100644
--- a/docs/pages/x/api/charts/radar-chart-pro.js
+++ b/docs/pages/x/api/charts/radar-chart-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-chart-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarChartPro } from './types.radar-chart-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'colors', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'divisions', 'experimentalFeatures', 'height', 'hiddenItems', 'hideLegend', 'highlight', 'highlightedItem', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onAreaClick', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onMarkClick', 'onTooltipItemChange', 'radar', 'series', 'shape', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'stripeColor', 'title', 'tooltipItem', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-chart-pro',
-    false,
-    /\.\/radar-chart-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarChartPro" allowedProps={allowedProps}>
+      <TypesRadarChartPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-chart.js b/docs/pages/x/api/charts/radar-chart.js
index 91d0066cd7ded..ac7eb4b7e7e90 100644
--- a/docs/pages/x/api/charts/radar-chart.js
+++ b/docs/pages/x/api/charts/radar-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarChart } from './types.radar-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'colors', 'desc', 'disableAxisListener', 'disableKeyboardNavigation', 'divisions', 'experimentalFeatures', 'height', 'hiddenItems', 'hideLegend', 'highlight', 'highlightedItem', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onAreaClick', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onMarkClick', 'onTooltipItemChange', 'radar', 'series', 'shape', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'stripeColor', 'title', 'tooltipItem', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-chart',
-    false,
-    /\.\/radar-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarChart" allowedProps={allowedProps}>
+      <TypesRadarChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-grid.js b/docs/pages/x/api/charts/radar-grid.js
index 4cae160e86aed..140787f151eba 100644
--- a/docs/pages/x/api/charts/radar-grid.js
+++ b/docs/pages/x/api/charts/radar-grid.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-grid.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarGrid } from './types.radar-grid';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'divisions', 'shape', 'stripeColor'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-grid',
-    false,
-    /\.\/radar-grid.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarGrid" allowedProps={allowedProps}>
+      <TypesRadarGrid />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-metric-labels.js b/docs/pages/x/api/charts/radar-metric-labels.js
index a95d2dace59b8..76f822f2dc690 100644
--- a/docs/pages/x/api/charts/radar-metric-labels.js
+++ b/docs/pages/x/api/charts/radar-metric-labels.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-metric-labels.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarMetricLabels } from './types.radar-metric-labels';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-metric-labels',
-    false,
-    /\.\/radar-metric-labels.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarMetricLabels" allowedProps={allowedProps}>
+      <TypesRadarMetricLabels />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-series-area.js b/docs/pages/x/api/charts/radar-series-area.js
index 7f1aebb435ab5..c801e8119876a 100644
--- a/docs/pages/x/api/charts/radar-series-area.js
+++ b/docs/pages/x/api/charts/radar-series-area.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-series-area.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarSeriesArea } from './types.radar-series-area';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'onItemClick', 'seriesId'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-series-area',
-    false,
-    /\.\/radar-series-area.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarSeriesArea" allowedProps={allowedProps}>
+      <TypesRadarSeriesArea />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-series-marks.js b/docs/pages/x/api/charts/radar-series-marks.js
index 1a03096ca28a1..8e5631ca2c402 100644
--- a/docs/pages/x/api/charts/radar-series-marks.js
+++ b/docs/pages/x/api/charts/radar-series-marks.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-series-marks.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarSeriesMarks } from './types.radar-series-marks';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'onItemClick', 'seriesId'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-series-marks',
-    false,
-    /\.\/radar-series-marks.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarSeriesMarks" allowedProps={allowedProps}>
+      <TypesRadarSeriesMarks />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-series-plot.js b/docs/pages/x/api/charts/radar-series-plot.js
index b7ff1df34d997..de5975824407d 100644
--- a/docs/pages/x/api/charts/radar-series-plot.js
+++ b/docs/pages/x/api/charts/radar-series-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-series-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarSeriesPlot } from './types.radar-series-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'onAreaClick', 'onMarkClick', 'seriesId'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/radar-series-plot',
-    false,
-    /\.\/radar-series-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarSeriesPlot" allowedProps={allowedProps}>
+      <TypesRadarSeriesPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/radar-series.js b/docs/pages/x/api/charts/radar-series.js
index 165a72fe2fa35..be18867bf2d2f 100644
--- a/docs/pages/x/api/charts/radar-series.js
+++ b/docs/pages/x/api/charts/radar-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './radar-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRadarSeries } from './types.radar-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/radar-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RadarSeries" allowedProps={allowedProps}>
+      <TypesRadarSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/range-bar-plot.js b/docs/pages/x/api/charts/range-bar-plot.js
index e074412d1e62c..77b71f8fdc37e 100644
--- a/docs/pages/x/api/charts/range-bar-plot.js
+++ b/docs/pages/x/api/charts/range-bar-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './range-bar-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRangeBarPlot } from './types.range-bar-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['borderRadius', 'onItemClick', 'skipAnimation', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/range-bar-plot',
-    false,
-    /\.\/range-bar-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RangeBarPlot" allowedProps={allowedProps}>
+      <TypesRangeBarPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/sankey-chart.js b/docs/pages/x/api/charts/sankey-chart.js
index 2483bc76351e4..67464fe9c7b9e 100644
--- a/docs/pages/x/api/charts/sankey-chart.js
+++ b/docs/pages/x/api/charts/sankey-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './sankey-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSankeyChart } from './types.sankey-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'colors', 'desc', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'highlightedItem', 'id', 'loading', 'localeText', 'margin', 'onHighlightChange', 'onLinkClick', 'onNodeClick', 'onTooltipItemChange', 'series', 'slotProps', 'slots', 'title', 'tooltipItem', 'width'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/sankey-chart',
-    false,
-    /\.\/sankey-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SankeyChart" allowedProps={allowedProps}>
+      <TypesSankeyChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/sankey-data-provider.js b/docs/pages/x/api/charts/sankey-data-provider.js
index ceae489af2255..7ad30697ba763 100644
--- a/docs/pages/x/api/charts/sankey-data-provider.js
+++ b/docs/pages/x/api/charts/sankey-data-provider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './sankey-data-provider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSankeyDataProvider } from './types.sankey-data-provider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/sankey-data-provider',
-    false,
-    /\.\/sankey-data-provider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SankeyDataProvider" allowedProps={allowedProps}>
+      <TypesSankeyDataProvider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/sankey-plot.js b/docs/pages/x/api/charts/sankey-plot.js
index f03482dee53bf..aa6dd714addad 100644
--- a/docs/pages/x/api/charts/sankey-plot.js
+++ b/docs/pages/x/api/charts/sankey-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './sankey-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSankeyPlot } from './types.sankey-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'onLinkClick', 'onNodeClick'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/sankey-plot',
-    false,
-    /\.\/sankey-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SankeyPlot" allowedProps={allowedProps}>
+      <TypesSankeyPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/sankey-tooltip-content.js b/docs/pages/x/api/charts/sankey-tooltip-content.js
index 53ba3913272af..ec853433e74e4 100644
--- a/docs/pages/x/api/charts/sankey-tooltip-content.js
+++ b/docs/pages/x/api/charts/sankey-tooltip-content.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './sankey-tooltip-content.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSankeyTooltipContent } from './types.sankey-tooltip-content';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/sankey-tooltip-content',
-    false,
-    /\.\/sankey-tooltip-content.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SankeyTooltipContent" allowedProps={allowedProps}>
+      <TypesSankeyTooltipContent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/sankey-tooltip.js b/docs/pages/x/api/charts/sankey-tooltip.js
index a0b09c0531c0d..2e392e32a1510 100644
--- a/docs/pages/x/api/charts/sankey-tooltip.js
+++ b/docs/pages/x/api/charts/sankey-tooltip.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './sankey-tooltip.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSankeyTooltip } from './types.sankey-tooltip';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['anchor', 'anchorEl', 'classes', 'component', 'components', 'componentsProps', 'container', 'disablePortal', 'keepMounted', 'modifiers', 'open', 'placement', 'popperOptions', 'popperRef', 'position', 'slotProps', 'slots', 'sx', 'transition', 'trigger'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/sankey-tooltip',
-    false,
-    /\.\/sankey-tooltip.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SankeyTooltip" allowedProps={allowedProps}>
+      <TypesSankeyTooltip />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/scatter-chart-pro.js b/docs/pages/x/api/charts/scatter-chart-pro.js
index 81f7671153806..dbba788a478c2 100644
--- a/docs/pages/x/api/charts/scatter-chart-pro.js
+++ b/docs/pages/x/api/charts/scatter-chart-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './scatter-chart-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesScatterChartPro } from './types.scatter-chart-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableClosestPoint', 'disableHitArea', 'disableKeyboardNavigation', 'disableVoronoi', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedItem', 'hitAreaRadius', 'id', 'initialHiddenItems', 'initialZoom', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'onZoomChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis', 'zoomData', 'zoomInteractionConfig'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/scatter-chart-pro',
-    false,
-    /\.\/scatter-chart-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ScatterChartPro" allowedProps={allowedProps}>
+      <TypesScatterChartPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/scatter-chart.js b/docs/pages/x/api/charts/scatter-chart.js
index 5ddd144abf5da..57cd59e9665c6 100644
--- a/docs/pages/x/api/charts/scatter-chart.js
+++ b/docs/pages/x/api/charts/scatter-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './scatter-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesScatterChart } from './types.scatter-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['axesGap', 'axisHighlight', 'brushConfig', 'colors', 'dataset', 'desc', 'disableAxisListener', 'disableClosestPoint', 'disableHitArea', 'disableKeyboardNavigation', 'disableVoronoi', 'experimentalFeatures', 'grid', 'height', 'hiddenItems', 'hideLegend', 'highlightedItem', 'hitAreaRadius', 'id', 'initialHiddenItems', 'loading', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'renderer', 'series', 'showToolbar', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'width', 'xAxis', 'yAxis', 'zAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/scatter-chart',
-    false,
-    /\.\/scatter-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ScatterChart" allowedProps={allowedProps}>
+      <TypesScatterChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/scatter-plot.js b/docs/pages/x/api/charts/scatter-plot.js
index 378b80ad633ea..7b34bde18f1ed 100644
--- a/docs/pages/x/api/charts/scatter-plot.js
+++ b/docs/pages/x/api/charts/scatter-plot.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './scatter-plot.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesScatterPlot } from './types.scatter-plot';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['onItemClick', 'renderer', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/scatter-plot',
-    false,
-    /\.\/scatter-plot.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ScatterPlot" allowedProps={allowedProps}>
+      <TypesScatterPlot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/scatter-series.js b/docs/pages/x/api/charts/scatter-series.js
index 7937761c60bfe..39747ba8b2adc 100644
--- a/docs/pages/x/api/charts/scatter-series.js
+++ b/docs/pages/x/api/charts/scatter-series.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './scatter-series.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesScatterSeries } from './types.scatter-series';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/',
-    false,
-    /\.\/scatter-series.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ScatterSeries" allowedProps={allowedProps}>
+      <TypesScatterSeries />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/scatter.js b/docs/pages/x/api/charts/scatter.js
index 0874ed1bad23d..70991b5f5911f 100644
--- a/docs/pages/x/api/charts/scatter.js
+++ b/docs/pages/x/api/charts/scatter.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './scatter.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesScatter } from './types.scatter';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['colorGetter', 'onItemClick'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/scatter',
-    false,
-    /\.\/scatter.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="Scatter" allowedProps={allowedProps}>
+      <TypesScatter />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/spark-line-chart.js b/docs/pages/x/api/charts/spark-line-chart.js
index c8123524d34f5..b1a570b2ef7a0 100644
--- a/docs/pages/x/api/charts/spark-line-chart.js
+++ b/docs/pages/x/api/charts/spark-line-chart.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './spark-line-chart.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSparkLineChart } from './types.spark-line-chart';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['area', 'baseline', 'brushConfig', 'clipAreaOffset', 'color', 'data', 'dataset', 'desc', 'disableAxisListener', 'disableClipping', 'disableHitArea', 'disableKeyboardNavigation', 'experimentalFeatures', 'height', 'hiddenItems', 'highlightedAxis', 'highlightedItem', 'hitAreaRadius', 'id', 'initialHiddenItems', 'localeText', 'margin', 'onAxisClick', 'onHiddenItemsChange', 'onHighlightChange', 'onHighlightedAxisChange', 'onItemClick', 'onTooltipAxisChange', 'onTooltipItemChange', 'plotType', 'showHighlight', 'showTooltip', 'skipAnimation', 'slotProps', 'slots', 'title', 'tooltipAxis', 'tooltipItem', 'valueFormatter', 'width', 'xAxis', 'yAxis'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/spark-line-chart',
-    false,
-    /\.\/spark-line-chart.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SparkLineChart" allowedProps={allowedProps}>
+      <TypesSparkLineChart />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/toolbar-button.js b/docs/pages/x/api/charts/toolbar-button.js
index bc2bdd497e6dc..23087419292af 100644
--- a/docs/pages/x/api/charts/toolbar-button.js
+++ b/docs/pages/x/api/charts/toolbar-button.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './toolbar-button.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesToolbarButton } from './types.toolbar-button';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/toolbar-button',
-    false,
-    /\.\/toolbar-button.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ToolbarButton" allowedProps={allowedProps}>
+      <TypesToolbarButton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/toolbar.js b/docs/pages/x/api/charts/toolbar.js
index 9ccb74f768e68..c71a1e12559a2 100644
--- a/docs/pages/x/api/charts/toolbar.js
+++ b/docs/pages/x/api/charts/toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesToolbar } from './types.toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/charts/toolbar',
-    false,
-    /\.\/toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="Toolbar" allowedProps={allowedProps}>
+      <TypesToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/charts/types.animated-area.md b/docs/pages/x/api/charts/types.animated-area.md
new file mode 100644
index 0000000000000..294d490591bac
--- /dev/null
+++ b/docs/pages/x/api/charts/types.animated-area.md
@@ -0,0 +1,1963 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.animated-area.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### FocusedLineMark
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `AnimatedAreaProps<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| Omit<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+## Additional Types
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'area'
+  | 'line'
+  | 'mark'
+  | 'markAnimate'
+  | 'highlight'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.animated-area.ts b/docs/pages/x/api/charts/types.animated-area.ts
new file mode 100644
index 0000000000000..3221e7331920f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.animated-area.ts
@@ -0,0 +1,4 @@
+import { AnimatedArea } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesAnimatedArea = createTypes(import.meta.url, AnimatedArea);
diff --git a/docs/pages/x/api/charts/types.animated-line.md b/docs/pages/x/api/charts/types.animated-line.md
new file mode 100644
index 0000000000000..29f51135ed81f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.animated-line.md
@@ -0,0 +1,1963 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.animated-line.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### FocusedLineMark
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `AnimatedAreaProps<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| Omit<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+## Additional Types
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'area'
+  | 'line'
+  | 'mark'
+  | 'markAnimate'
+  | 'highlight'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.animated-line.ts b/docs/pages/x/api/charts/types.animated-line.ts
new file mode 100644
index 0000000000000..212b325427700
--- /dev/null
+++ b/docs/pages/x/api/charts/types.animated-line.ts
@@ -0,0 +1,4 @@
+import { AnimatedLine } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesAnimatedLine = createTypes(import.meta.url, AnimatedLine);
diff --git a/docs/pages/x/api/charts/types.area-element.md b/docs/pages/x/api/charts/types.area-element.md
new file mode 100644
index 0000000000000..af97ed8d2f6dc
--- /dev/null
+++ b/docs/pages/x/api/charts/types.area-element.md
@@ -0,0 +1,1963 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.area-element.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### FocusedLineMark
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `AnimatedAreaProps<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| Omit<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+## Additional Types
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'area'
+  | 'line'
+  | 'mark'
+  | 'markAnimate'
+  | 'highlight'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.area-element.ts b/docs/pages/x/api/charts/types.area-element.ts
new file mode 100644
index 0000000000000..e75412ed93e4e
--- /dev/null
+++ b/docs/pages/x/api/charts/types.area-element.ts
@@ -0,0 +1,4 @@
+import { AreaElement } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesAreaElement = createTypes(import.meta.url, AreaElement);
diff --git a/docs/pages/x/api/charts/types.area-plot.md b/docs/pages/x/api/charts/types.area-plot.md
new file mode 100644
index 0000000000000..5e0d8e8c53d4f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.area-plot.md
@@ -0,0 +1,1963 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.area-plot.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### FocusedLineMark
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `AnimatedAreaProps<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| Omit<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+## Additional Types
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'area'
+  | 'line'
+  | 'mark'
+  | 'markAnimate'
+  | 'highlight'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.area-plot.ts b/docs/pages/x/api/charts/types.area-plot.ts
new file mode 100644
index 0000000000000..951f19550b984
--- /dev/null
+++ b/docs/pages/x/api/charts/types.area-plot.ts
@@ -0,0 +1,4 @@
+import { AreaPlot } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesAreaPlot = createTypes(import.meta.url, AreaPlot);
diff --git a/docs/pages/x/api/charts/types.axis-config.md b/docs/pages/x/api/charts/types.axis-config.md
new file mode 100644
index 0000000000000..de897bd5d9ccd
--- /dev/null
+++ b/docs/pages/x/api/charts/types.axis-config.md
@@ -0,0 +1,38240 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.axis-config.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarChartPremium
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar or range bar item is clicked.                                                                                                                                                                                                                                                                               |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `(RangeBarSeriesType \| BarSeries)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] or \[\[RangeBarSeries]] objects.                                                                                                                                                                                                                              |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartPremiumSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartPremiumSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarChartPro
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### blueberryTwilightPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### bluePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsAxis Props:**
+
+| Prop      | Type                  | Default | Description                             |
+| :-------- | :-------------------- | :------ | :-------------------------------------- |
+| slotProps | `ChartsAxisSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `ChartsAxisSlots`     | `{}`    | Overridable component slots.            |
+
+### ChartsAxisHighlight
+
+Demos:
+
+- [Custom components](https://mui.com/x/react-charts/components/)
+
+API:
+
+- [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+
+**ChartsAxisHighlight Props:**
+
+| Prop | Type                      | Default | Description |
+| :--- | :------------------------ | :------ | :---------- |
+| x    | `ChartsAxisHighlightType` | -       | -           |
+| y    | `ChartsAxisHighlightType` | -       | -           |
+
+### ChartsAxisTooltipContent
+
+**ChartsAxisTooltipContent Props:**
+
+| Prop    | Type                            | Default  | Description                                                                                                                                                                                   |
+| :------ | :------------------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes | `Partial<ChartsTooltipClasses>` | -        | Override or extend the styles applied to the component.                                                                                                                                       |
+| sort    | `'none' \| 'asc' \| 'desc'`     | `'none'` | The sort in which series items are displayed in the tooltip.&#xA;When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value. |
+| sx      | `SxProps<Theme>`                | -        | -                                                                                                                                                                                             |
+
+### ChartsClipPath
+
+API:
+
+- [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+
+**ChartsClipPath Props:**
+
+| Prop   | Type                                                               | Default | Description                                                                                                                             |
+| :----- | :----------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| offset | `{ top?: number; right?: number; bottom?: number; left?: number }` | -       | Offset, in pixels, of the clip path rectangle from the drawing area. A positive value will move the rectangle outside the drawing area. |
+| id\*   | `string`                                                           | -       | The id of the clip path.                                                                                                                |
+
+### ChartsColorCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### ChartsColorPaletteCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsContainerPremium
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPremium` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPremium API](https://mui.com/x/api/charts/charts-container-premium/)
+
+**ChartsContainerPremium Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsContainerPro
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPro` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+
+**ChartsContainerPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProvider
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/react-charts/composition/)
+
+API:
+
+- [ChartsDataProvider API](https://mui.com/x/api/charts/charts-data-provider/)
+
+**ChartsDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                  | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                  | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                       | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                      | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                              | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                           | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                      | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                             | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]` | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                           | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                             | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                                                                                                | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                                                                                                    | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                              | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                              | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProviderPremium
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPremium API](https://mui.com/x/api/charts/charts-data-provider-premium/)
+
+**ChartsDataProviderPremium Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProviderPro
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPro API](https://mui.com/x/api/charts/charts-data-provider-pro/)
+
+**ChartsDataProviderPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsGrid
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsGrid Props:**
+
+| Prop       | Type                         | Default | Description                                             |
+| :--------- | :--------------------------- | :------ | :------------------------------------------------------ |
+| classes    | `Partial<ChartsGridClasses>` | -       | Override or extend the styles applied to the component. |
+| horizontal | `boolean`                    | -       | Displays horizontal grid.                               |
+| vertical   | `boolean`                    | -       | Displays vertical grid.                                 |
+| className  | `string`                     | -       | A CSS class name applied to the root element.           |
+
+### ChartsItemTooltipContent
+
+**ChartsItemTooltipContent Props:**
+
+| Prop    | Type                            | Default | Description                                             |
+| :------ | :------------------------------ | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipClasses>` | -       | Override or extend the styles applied to the component. |
+| sx      | `SxProps<Theme>`                | -       | -                                                       |
+
+### ChartsLegend
+
+**ChartsLegend Props:**
+
+| Prop                    | Type                                                                                                                     | Default | Description                                                                                  |
+| :---------------------- | :----------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------- |
+| classes                 | `Partial<ChartsLegendClasses>`                                                                                           | -       | Override or extend the styles applied to the component.                                      |
+| direction               | `Direction`                                                                                                              | -       | The direction of the legend layout.&#xA;The default depends on the chart.                    |
+| onItemClick             | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void)` | -       | Callback fired when a legend item is clicked.                                                |
+| slotProps               | `ChartsLegendSlotProps`                                                                                                  | `{}`    | The props used for each component slot.                                                      |
+| slots                   | `ChartsLegendSlots`                                                                                                      | `{}`    | Overridable component slots.                                                                 |
+| sx                      | `SxProps<Theme>`                                                                                                         | -       | -                                                                                            |
+| tabIndex                | `number`                                                                                                                 | -       | -                                                                                            |
+| toggleVisibilityOnClick | `boolean`                                                                                                                | `false` | If `true`, clicking on a legend item will toggle the visibility of the corresponding series. |
+| className               | `string`                                                                                                                 | -       | -                                                                                            |
+
+### ChartsLocalizationProvider
+
+Demos:
+
+- [localization](https://mui.com/x/react-charts/localization/)
+
+API:
+
+- [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
+
+**ChartsLocalizationProvider Props:**
+
+| Prop       | Type                        | Default | Description                          |
+| :--------- | :-------------------------- | :------ | :----------------------------------- |
+| localeText | `Partial<ChartsLocaleText>` | -       | Localized text for chart components. |
+| children   | `React.ReactNode`           | -       | -                                    |
+
+### ChartsReferenceLine
+
+**ChartsReferenceLine Props:**
+
+| Prop       | Type                                   | Default                                                                      | Description                                                                                                                                            |
+| :--------- | :------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label      | `string`                               | -                                                                            | The label to display along the reference line.                                                                                                         |
+| axisId     | `AxisId`                               | ``The `id` of the first defined axis.``                                      | The id of the axis used for the reference value.                                                                                                       |
+| classes    | `Partial<ChartsReferenceLineClasses>`  | -                                                                            | Override or extend the styles applied to the component.                                                                                                |
+| labelAlign | `'start' \| 'middle' \| 'end'`         | `'middle'`                                                                   | The alignment if the label is in the chart drawing area.                                                                                               |
+| labelStyle | `ChartsTextStyle`                      | -                                                                            | The style applied to the label.                                                                                                                        |
+| lineStyle  | `React.CSSProperties`                  | -                                                                            | The style applied to the line.                                                                                                                         |
+| spacing    | `number \| { x?: number; y?: number }` | `{ x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.` | Additional space around the label in px.&#xA;Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes. |
+| x          | `string \| number \| Date`             | -                                                                            | The x value associated with the reference line.&#xA;If defined the reference line will be vertical.                                                    |
+| y          | `string \| number \| Date`             | -                                                                            | The y value associated with the reference line.&#xA;If defined the reference line will be horizontal.                                                  |
+
+### ChartsRenderer
+
+A component that renders different types of charts based on the provided data and configuration.
+It supports column, bar, line, area and pie charts with customizable styling and formatting options.
+The component handles both single and multiple dimension datasets, with special data processing for each case.
+For multiple dimension datasets, it creates grouped axes.
+
+**ChartsRenderer Props:**
+
+| Prop            | Type                                                                                                   | Default | Description |
+| :-------------- | :----------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| chartType\*     | `string`                                                                                               | -       | -           |
+| configuration\* | `Record<string, any>`                                                                                  | -       | -           |
+| dimensions\*    | `({ id: string; label: string; data: (string \| number \| Date \| null)[] })[]`                        | -       | -           |
+| onRender        | `((type: string, props: Record<string, any>, Component: React.ComponentType<any>) => React.ReactNode)` | -       | -           |
+| values\*        | `({ id: string; label: string; data: (number \| null)[] })[]`                                          | -       | -           |
+
+### ChartsSurface
+
+A helper component that combines `<ChartsLayerContainer>` and `<ChartsSvgLayer>` to provide a surface for drawing charts.
+If you need more control over the layers, you can use `<ChartsLayerContainer>` and `<ChartsSvgLayer>` separately.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+
+**ChartsSurface Props:**
+
+| Prop      | Type              | Default | Description                                                                                |
+| :-------- | :---------------- | :------ | :----------------------------------------------------------------------------------------- |
+| desc      | `string`          | -       | The description of the chart.&#xA;Used to provide an accessible description for the chart. |
+| sx        | `SxProps<Theme>`  | -       | -                                                                                          |
+| title     | `string`          | -       | The title of the chart.&#xA;Used to provide an accessible label for the chart.             |
+| children  | `React.ReactNode` | -       | -                                                                                          |
+| className | `string`          | -       | -                                                                                          |
+
+### ChartsText
+
+Helper component to manage multiline text in SVG
+
+**ChartsText Props:**
+
+| Prop             | Type              | Default | Description                            |
+| :--------------- | :---------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`          | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`         | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`             | -       | -                                      |
+| text\*           | `string`          | -       | Text displayed.                        |
+| style            | `ChartsTextStyle` | -       | Style applied to text elements.        |
+
+### ChartsToolbarImageExportTrigger
+
+A button that triggers an image export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarImageExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartsToolbarImageExportOptions`                                                                                                                                                                 | -       | The options to apply on the image export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPrintExportTrigger
+
+A button that triggers a print export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarPrintExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartsToolbarPrintExportOptions`                                                                                                                                                                 | -       | The options to apply on the Print export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPro
+
+The chart toolbar component for the pro package.
+
+**ChartsToolbarPro Props:**
+
+| Prop               | Type                                | Default | Description |
+| :----------------- | :---------------------------------- | :------ | :---------- |
+| imageExportOptions | `ChartsToolbarImageExportOptions[]` | -       | -           |
+| printOptions       | `ChartsToolbarPrintExportOptions`   | -       | -           |
+
+### ChartsToolbarZoomInTrigger
+
+A button that zooms the chart in.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomInTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarZoomOutTrigger
+
+A button that zooms the chart out.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomOutTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsTooltip
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                                                                                                                |
+| :-------- | :--------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                                                                                                                    |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                                                                                                                  |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                                                                                                                    |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                                                                                                               |
+| sort      | `'none' \| 'asc' \| 'desc'`              | `'none'`    | Defines the sort order in which series items are displayed in the axis tooltip.&#xA;When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.&#xA;Only applies when `trigger='axis'`. |
+| trigger   | `'axis' \| 'none' \| 'item'`             | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip.                                                                                         |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                                                                                                          |
+
+### ChartsTooltipContainer
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltipContainer Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                        |
+| :-------- | :--------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                            |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                          |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                            |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                       |
+| trigger   | `TriggerOptions`                         | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip. |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                  |
+| children  | `React.ReactNode`                        | -           | -                                                                                                                                                                                  |
+
+### ChartsWebGLLayer
+
+### ChartsXAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
+
+**ChartsXAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'x'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelMinGap    | `number`                                                      | `4`             | The minimum gap in pixels between two tick labels.&#xA;If two tick labels are closer than this minimum gap, one of them will be hidden.                                                                                                                                                                                         |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsYAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+
+**ChartsYAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'y'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsZoomSlider
+
+Renders the zoom slider for all x and y axes that have it enabled.
+
+### ChartZoomSlider
+
+### cheerfulFiestaPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ContinuousColorLegend
+
+**ContinuousColorLegend Props:**
+
+| Prop          | Type                                    | Default                | Description                                                                                                                                                                          |
+| :------------ | :-------------------------------------- | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisDirection | `'x' \| 'y' \| 'z'`                     | `'z'`                  | The axis direction containing the color configuration to represent.                                                                                                                  |
+| axisId        | `AxisId`                                | `The first axis item.` | The id of the axis item with the color configuration to represent.                                                                                                                   |
+| classes       | `Partial<ContinuousColorLegendClasses>` | -                      | Override or extend the styles applied to the component.                                                                                                                              |
+| direction     | `Direction`                             | `'horizontal'`         | The direction of the legend layout.                                                                                                                                                  |
+| gradientId    | `string`                                | `auto-generated id`    | The id for the gradient to use.&#xA;If not provided, it will use the generated gradient from the axis configuration.&#xA;The `gradientId` will be used as `fill="url(#gradientId)"`. |
+| labelPosition | `'start' \| 'end' \| 'extremes'`        | `'end'`                | Where to position the labels relative to the gradient.                                                                                                                               |
+| maxLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the maximum side of the gradient.&#xA;Can either be a string, or a function.&#xA;If not defined, the formatted maximal value is display.                     |
+| minLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the minimum side of the gradient.&#xA;Can either be a string, or a function.                                                                                 |
+| reverse       | `boolean`                               | `false`                | If `true`, the gradient and labels will be reversed.                                                                                                                                 |
+| slotProps     | `ChartsLegendSlotProps`                 | `{}`                   | The props used for each component slot.                                                                                                                                              |
+| slots         | `ChartsLegendSlots`                     | `{}`                   | Overridable component slots.                                                                                                                                                         |
+| sx            | `SxProps<Theme>`                        | -                      | -                                                                                                                                                                                    |
+| tabIndex      | `number`                                | -                      | -                                                                                                                                                                                    |
+| thickness     | `number`                                | `12`                   | The thickness of the gradient                                                                                                                                                        |
+| className     | `string`                                | -                      | -                                                                                                                                                                                    |
+
+### cyanPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### defaultOnBeforeExport
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| iframe    | `HTMLIFrameElement` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void;
+```
+
+### FocusedBar
+
+### FocusedFunnelSection
+
+### FocusedHeatmapCell
+
+### FocusedLineMark
+
+### FocusedPieArc
+
+**FocusedPieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color           | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius    | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| outerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle    | `number`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+
+### FocusedRadarMark
+
+### FocusedRangeBar
+
+### FocusedScatterMark
+
+### FunnelChart
+
+**FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### FunnelPlot
+
+**FunnelPlot Props:**
+
+| Prop        | Type                                                                                                      | Default | Description                                   |
+| :---------- | :-------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------- |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)` | -       | Callback fired when a funnel item is clicked. |
+| slotProps   | `FunnelPlotSlotProps`                                                                                     | `{}`    | The props used for each component slot.       |
+| slots       | `FunnelPlotSlots`                                                                                         | `{}`    | Overridable component slots.                  |
+| className   | `string`                                                                                                  | -       | A CSS class name applied to the root element. |
+
+### Gauge
+
+**Gauge Props:**
+
+| Prop          | Type                                                           | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                                               | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| classes       | `Partial<GaugeClasses>`                                        | -        | -                                                                                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`                                             | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`                                             | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`                                             | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                                                       | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                                                       | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                                                       | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`                                             | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number`                               | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`                                             | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                                                      | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                                                       | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                                               | -        | -                                                                                                                                                                                                                                                                            |
+| text          | `string \| ((params: GaugeFormatterParams) => string \| null)` | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                                                       | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                                                       | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                                                       | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                                                       | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                                                       | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                                              | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                                                       | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeContainer
+
+**GaugeContainer Props:**
+
+| Prop          | Type                             | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                 | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`               | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`               | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`               | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                         | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                         | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                         | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`               | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number` | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`               | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                        | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                         | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                 | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                         | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                         | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                         | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                         | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                         | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                         | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeReferenceArc
+
+### GaugeValueArc
+
+**GaugeValueArc Props:**
+
+| Prop          | Type      | Default | Description |
+| :------------ | :-------- | :------ | :---------- |
+| skipAnimation | `boolean` | -       | -           |
+
+### GaugeValueText
+
+**GaugeValueText Props:**
+
+| Prop             | Type                                                           | Default | Description                            |
+| :--------------- | :------------------------------------------------------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`                                                       | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`                                                      | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`                                                          | -       | -                                      |
+| text             | `string \| ((params: GaugeFormatterParams) => string \| null)` | -       | -                                      |
+| style            | `ChartsTextStyle`                                              | -       | Style applied to text elements.        |
+
+### getLocalizedConfigurationOptions
+
+**Parameters:**
+
+| Parameter | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| locale?   | `Partial<ChartsLocaleText>` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GridChartsConfigurationOptions;
+```
+
+### getPieCoordinates
+
+**Parameters:**
+
+| Parameter | Type                                                       | Default | Description |
+| :-------- | :--------------------------------------------------------- | :------ | :---------- |
+| series    | `LegendItemParams<DefaultizedPieSeriesType, 'cx' \| 'cy'>` | -       | -           |
+| drawing   | `LegendItemParams<ChartDrawingArea, 'width' \| 'height'>`  | -       | -           |
+
+**Return Value:**
+
+| Property          | Type     | Description |
+| :---------------- | :------- | :---------- |
+| `cx`              | `number` | -           |
+| `cy`              | `number` | -           |
+| `availableRadius` | `number` | -           |
+
+### getValueToPositionMapper
+
+For a given scale return a function that map value to their position.
+Useful when dealing with specific scale such as band.
+
+**Parameters:**
+
+| Parameter | Type                                                                  | Default | Description      |
+| :-------- | :-------------------------------------------------------------------- | :------ | :--------------- |
+| scale     | `D3Scale<{ toString: function toString() { [native code] } }, Range>` | -       | The scale to use |
+
+**Return Value:**
+
+A function that map value to their position
+
+```tsx
+type ReturnValue = (value: any) => number;
+```
+
+### greenPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Heatmap
+
+**Heatmap Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                 | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                                             | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                        | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                 | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                      | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                             | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                            | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                          | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                             | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                                            | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`                                   | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                          | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                     | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                                         | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                                             | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                   | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                                                    | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                            | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapSlotProps`                                                                                                                                                                                                   | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapSlots`                                                                                                                                                                                                       | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                             | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                                                 | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                               | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| null`                                                                                                                                   | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                             | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                              | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                             | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                    | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+### HeatmapCell
+
+Demos:
+
+- [Heatmap](https://mui.com/x/react-charts/heatmap/)
+
+API:
+
+- [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+
+**HeatmapCell Props:**
+
+| Prop         | Type                    | Default | Description |
+| :----------- | :---------------------- | :------ | :---------- |
+| height\*     | `number`                | -       | -           |
+| ownerState\* | `HeatmapCellOwnerState` | -       | -           |
+| width\*      | `number`                | -       | -           |
+| x\*          | `number`                | -       | -           |
+| y\*          | `number`                | -       | -           |
+
+### HeatmapData
+
+**Constructor Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| data      | `HeatmapValueType[]` | -       | -           |
+
+**Methods:**
+
+```typescript
+function getValue(xIndex: number, yIndex: number): number | null;
+```
+
+### HeatmapPlot
+
+**HeatmapPlot Props:**
+
+| Prop         | Type                   | Default | Description                                       |
+| :----------- | :--------------------- | :------ | :------------------------------------------------ |
+| borderRadius | `number`               | -       | The border radius of the heatmap cells in pixels. |
+| slotProps    | `HeatmapPlotSlotProps` | `{}`    | The props used for each component slot.           |
+| slots        | `HeatmapPlotSlots`     | `{}`    | Overridable component slots.                      |
+| className    | `string`               | -       | A CSS class name applied to the root element.     |
+
+### HeatmapPremium
+
+**HeatmapPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                 | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                                             | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                        | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                 | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                      | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                             | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                            | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                          | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                             | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                                            | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`                                   | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                          | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                     | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                                         | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                                             | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                   | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| renderer                  | `'svg-single' \| 'webgl'`                                                                                                                                                                                            | -                     | The type of renderer to use for the heatmap plot. `svg-single`: Renders every scatter item in a `<rect />` element.`webgl`: Renders heatmap cells using WebGL for better performance, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/heatmap/#performance                                            |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                                                    | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                            | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapSlotProps`                                                                                                                                                                                                   | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapSlots`                                                                                                                                                                                                       | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                             | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                                                 | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                               | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| null`                                                                                                                                   | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                             | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                              | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                             | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                    | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+### HeatmapTooltip
+
+**HeatmapTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer'`                    | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### HeatmapTooltipContent
+
+**HeatmapTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineChartPro
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'line'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'line'>>, ChartPlugin<UseChartHighlightSignature<'line'>>, ChartPlugin<UseChartVisibilityManagerSignature<'line'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                       | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### mangoFusionPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+### orangePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### PieArc
+
+**PieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color\*         | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius\*  | `number`                                                          | -       | -                                                                                                                                        |
+| dataIndex\*     | `number`                                                          | -       | -                                                                                                                                        |
+| endAngle\*      | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| isFaded\*       | `boolean`                                                         | -       | -                                                                                                                                        |
+| isFocused\*     | `boolean`                                                         | -       | -                                                                                                                                        |
+| isHighlighted\* | `boolean`                                                         | -       | -                                                                                                                                        |
+| outerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle\*  | `number`                                                          | -       | -                                                                                                                                        |
+| seriesId\*      | `string`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+| startAngle\*    | `number`                                                          | -       | -                                                                                                                                        |
+
+### PieArcLabel
+
+**PieArcLabel Props:**
+
+| Prop              | Type                  | Default | Description |
+| :---------------- | :-------------------- | :------ | :---------- |
+| hidden            | `boolean`             | -       | -           |
+| arcLabelRadius\*  | `number`              | -       | -           |
+| classes           | `Partial<PieClasses>` | -       | -           |
+| color\*           | `string`              | -       | -           |
+| cornerRadius\*    | `number`              | -       | -           |
+| endAngle\*        | `number`              | -       | -           |
+| formattedArcLabel | `string \| null`      | -       | -           |
+| isFaded\*         | `boolean`             | -       | -           |
+| isHighlighted\*   | `boolean`             | -       | -           |
+| paddingAngle\*    | `number`              | -       | -           |
+| seriesId\*        | `string`              | -       | -           |
+| skipAnimation\*   | `boolean`             | -       | -           |
+| startAngle\*      | `number`              | -       | -           |
+
+### PieArcLabelPlot
+
+**PieArcLabelPlot Props:**
+
+| Prop             | Type                                                                                                                                                                                                           | Default                           | Description                                                    |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabel         | `'formattedValue' \| 'label' \| 'value' \| ((item: { id?: PieItemId; color: string; labelMarkType?: ChartsLabelMarkType; value: number; formattedValue: string; hidden: boolean; label?: string }) => string)` | -                                 | The label displayed into the arc.                              |
+| arcLabelMinAngle | `number`                                                                                                                                                                                                       | `0`                               | The minimal angle required to display the arc label.           |
+| arcLabelRadius   | `number`                                                                                                                                                                                                       | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius     | `number`                                                                                                                                                                                                       | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*           | `DefaultizedPieValueType[]`                                                                                                                                                                                    | -                                 | -                                                              |
+| faded            | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted      | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius      | `number`                                                                                                                                                                                                       | `0`                               | The radius between circle center and the beginning of the arc. |
+| outerRadius\*    | `number`                                                                                                                                                                                                       | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle     | `number`                                                                                                                                                                                                       | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*       | `string`                                                                                                                                                                                                       | -                                 | The id of this series.                                         |
+| skipAnimation    | `boolean`                                                                                                                                                                                                      | `false`                           | If `true`, animations are skipped.                             |
+| slotProps        | `PieArcLabelPlotSlotProps`                                                                                                                                                                                     | `{}`                              | The props used for each component slot.                        |
+| slots            | `PieArcLabelPlotSlots`                                                                                                                                                                                         | `{}`                              | Overridable component slots.                                   |
+
+### PieArcPlot
+
+**PieArcPlot Props:**
+
+| Prop           | Type                                                                                                                                                               | Default                           | Description                                                    |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabelRadius | `number`                                                                                                                                                           | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius   | `number`                                                                                                                                                           | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*         | `DefaultizedPieValueType[]`                                                                                                                                        | -                                 | -                                                              |
+| faded          | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted    | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius    | `number`                                                                                                                                                           | `0`                               | The radius between circle center and the beginning of the arc. |
+| onItemClick    | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                             | -                                 | Callback fired when a pie item is clicked.                     |
+| outerRadius\*  | `number`                                                                                                                                                           | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle   | `number`                                                                                                                                                           | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*     | `string`                                                                                                                                                           | -                                 | The id of this series.                                         |
+| skipAnimation  | `boolean`                                                                                                                                                          | `false`                           | If `true`, animations are skipped.                             |
+| slotProps      | `PieArcPlotSlotProps`                                                                                                                                              | `{}`                              | The props used for each component slot.                        |
+| slots          | `PieArcPlotSlots`                                                                                                                                                  | `{}`                              | Overridable component slots.                                   |
+
+### piecewiseColorDefaultLabelFormatter
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `PiecewiseLabelFormatterParams` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PiecewiseColorLegend
+
+**PiecewiseColorLegend Props:**
+
+| Prop           | Type                                                                                                                             | Default                | Description                                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :------------------------------------------------------------------ |
+| axisDirection  | `'x' \| 'y' \| 'z'`                                                                                                              | `'z'`                  | The axis direction containing the color configuration to represent. |
+| axisId         | `AxisId`                                                                                                                         | `The first axis item.` | The id of the axis item with the color configuration to represent.  |
+| classes        | `Partial<PiecewiseColorLegendClasses>`                                                                                           | -                      | Override or extend the styles applied to the component.             |
+| direction      | `Direction`                                                                                                                      | `'horizontal'`         | The direction of the legend layout.                                 |
+| labelFormatter | `((params: PiecewiseLabelFormatterParams) => string \| null)`                                                                    | -                      | Format the legend labels.                                           |
+| labelPosition  | `'start' \| 'end' \| 'extremes' \| 'inline-start' \| 'inline-end'`                                                               | `'extremes'`           | Where to position the labels relative to the color marks.           |
+| onItemClick    | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void)` | -                      | Callback fired when a legend item is clicked.                       |
+| slotProps      | `ChartsLegendSlotProps`                                                                                                          | `{}`                   | The props used for each component slot.                             |
+| slots          | `ChartsLegendSlots`                                                                                                              | `{}`                   | Overridable component slots.                                        |
+| sx             | `SxProps<Theme>`                                                                                                                 | -                      | -                                                                   |
+| tabIndex       | `number`                                                                                                                         | -                      | -                                                                   |
+| className      | `string`                                                                                                                         | -                      | -                                                                   |
+
+### PieChart
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+
+**PieChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PieChartPro
+
+**PieChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PiePlot
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+
+**PiePlot Props:**
+
+| Prop          | Type                                                                                                                                   | Default | Description                                |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)` | -       | Callback fired when a pie item is clicked. |
+| skipAnimation | `boolean`                                                                                                                              | `false` | If `true`, animations are skipped.         |
+| slotProps     | `PiePlotSlotProps`                                                                                                                     | `{}`    | The props used for each component slot.    |
+| slots         | `PiePlotSlots`                                                                                                                         | `{}`    | Overridable component slots.               |
+| className     | `string`                                                                                                                               | -       | -                                          |
+
+### pinkPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### purplePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### RadarAxis
+
+**RadarAxis Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default        | Description                                                                                                                                                                              |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| angle            | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The absolute rotation angle of the metrics (in degree)&#xA;If not defined the metric angle will be used.                                                                                 |
+| classes          | `Partial<LegendItemParams<RadarClasses, 'axisLine' \| 'axisLabel' \| 'axisRoot'>>`                                                                                                                                                                                                                                                                                                                                                                   | -              | Override or extend the styles applied to the component.                                                                                                                                  |
+| divisions        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `1`            | The number of divisions with label.                                                                                                                                                      |
+| dominantBaseline | `'auto' \| 'use-script' \| 'no-change' \| 'reset-size' \| 'ideographic' \| 'alphabetic' \| 'hanging' \| 'mathematical' \| 'central' \| 'middle' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| ((angle: number) => 'auto' \| 'middle' \| 'alphabetic' \| 'hanging' \| 'ideographic' \| 'mathematical' \| 'central' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| 'use-script' \| 'no-change' \| 'reset-size' \| undefined)` | -              | The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).                                                                           |
+| labelOrientation | `'horizontal' \| 'rotated'`                                                                                                                                                                                                                                                                                                                                                                                                                          | `'horizontal'` | Defines how label align with the axis. 'horizontal': labels stay horizontal and their placement change with the axis angle.'rotated': labels are rotated 90deg relatively to their axis. |
+| metric           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The metric to get.&#xA;If `undefined`, the hook returns `null`                                                                                                                           |
+| textAnchor       | `'start' \| 'middle' \| 'end' \| 'inherit' \| ((angle: number) => 'start' \| 'end' \| 'middle' \| 'inherit' \| undefined)`                                                                                                                                                                                                                                                                                                                           | -              | The labels text anchor or a function returning the text anchor for a given axis angle (in degree).                                                                                       |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | A CSS class name applied to the root element.                                                                                                                                            |
+
+### RadarAxisHighlight
+
+**RadarAxisHighlight Props:**
+
+| Prop      | Type                                                                                                        | Default | Description                                             |
+| :-------- | :---------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| classes   | `Partial<LegendItemParams<RadarClasses, 'axisHighlightRoot' \| 'axisHighlightLine' \| 'axisHighlightDot'>>` | -       | Override or extend the styles applied to the component. |
+| className | `string`                                                                                                    | -       | A CSS class name applied to the root element.           |
+
+### RadarChart
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarChartPro
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                          | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                 | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                                                                                                                                                                                                                      | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                                                                                                                                                                                                                | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                        | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                              | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                 | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                                                                                                                                                                                                                     | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                        | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'radar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartPolarAxisSignature>, ChartPlugin<UseChartHighlightSignature<'radar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>, ChartPlugin<UseChartProExportSignature>]` | -                                                                                      | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*                   | `RadarConfig`                                                                                                                                                                                                                                                                                                                                 | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                                                                                                                                                                                                                     | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                                                                                                                                                                                                                   | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                                                                                                                                                                                                       | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartProSlotProps`                                                                                                                                                                                                                                                                                                                      | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartProSlots`                                                                                                                                                                                                                                                                                                                          | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                                                                                                                                                                                                         | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                              | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                           | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                             | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarDataProvider
+
+**RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### RadarGrid
+
+**RadarGrid Props:**
+
+| Prop        | Type                                  | Default                                                                                | Description                                               |
+| :---------- | :------------------------------------ | :------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
+| divisions   | `number`                              | `5`                                                                                    | The number of divisions in the radar grid.                |
+| shape       | `'sharp' \| 'circular'`               | `'sharp'`                                                                              | The grid shape.                                           |
+| stripeColor | `((index: number) => string) \| null` | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes |
+
+### RadarMetricLabels
+
+### RadarSeriesArea
+
+**RadarSeriesArea Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesMarks
+
+**RadarSeriesMarks Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesPlot
+
+**RadarSeriesPlot Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onAreaClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| onMarkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### rainbowSurgePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### RangeBarPlot
+
+Demos:
+
+- [Range Bar](https://mui.com/x/react-charts/range-bar/)
+
+API:
+
+- [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
+
+**RangeBarPlot Props:**
+
+| Prop          | Type                                                                                                     | Default     | Description                                   |
+| :------------ | :------------------------------------------------------------------------------------------------------- | :---------- | :-------------------------------------------- |
+| borderRadius  | `number`                                                                                                 | -           | Defines the border radius of the bar element. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void)` | -           | Callback fired when a bar item is clicked.    |
+| skipAnimation | `boolean`                                                                                                | `undefined` | If `true`, animations are skipped.            |
+| slotProps     | `RangeBarPlotSlotProps`                                                                                  | `{}`        | The props used for each component slot.       |
+| slots         | `RangeBarPlotSlots`                                                                                      | `{}`        | Overridable component slots.                  |
+
+### redPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Scatter
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [Scatter API](https://mui.com/x/api/charts/scatter/)
+
+**Scatter Props:**
+
+| Prop          | Type                                                                                                        | Default | Description                                                                                                                                                                                                                                    |
+| :------------ | :---------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes       | `Partial<ScatterClasses>`                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| color\*       | `string`                                                                                                    | -       | -                                                                                                                                                                                                                                              |
+| colorGetter\* | `((dataIndex?: number) => string)`                                                                          | -       | Function to get the color of a scatter item given its data index.&#xA;The data index argument is optional. If not provided, the color for the entire series is returned.&#xA;If provided, the color for the specific scatter item is returned. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -       | Callback fired when clicking on a scatter item.                                                                                                                                                                                                |
+| series\*      | `DefaultizedScatterSeriesType`                                                                              | -       | -                                                                                                                                                                                                                                              |
+| slotProps     | `ScatterSlotProps`                                                                                          | -       | -                                                                                                                                                                                                                                              |
+| slots         | `ScatterSlots`                                                                                              | -       | -                                                                                                                                                                                                                                              |
+| xScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| yScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+
+### ScatterChart
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterChartPro
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'scatter'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>, ChartPlugin<UseChartHighlightSignature<'scatter'>>, ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>, ChartPlugin<UseChartClosestPointSignature>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                               | -                          | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterMarker
+
+**ScatterMarker Props:**
+
+| Prop            | Type                                                          | Default | Description                                     |
+| :-------------- | :------------------------------------------------------------ | :------ | :---------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGElement, MouseEvent>) => void)` | -       | Callback fired when clicking on a scatter item. |
+| color\*         | `string`                                                      | -       | The fill color of the marker.                   |
+| dataIndex\*     | `number`                                                      | -       | The index of the data point.                    |
+| isFaded\*       | `boolean`                                                     | -       | If `true`, the marker is faded.                 |
+| isHighlighted\* | `boolean`                                                     | -       | If `true`, the marker is highlighted.           |
+| seriesId\*      | `string`                                                      | -       | The series ID.                                  |
+| size\*          | `number`                                                      | -       | The size of the marker.                         |
+| x\*             | `number`                                                      | -       | The x coordinate of the data point.             |
+| y\*             | `number`                                                      | -       | The y coordinate of the data point.             |
+
+### ScatterPlot
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+
+**ScatterPlot Props:**
+
+| Prop        | Type                                                                                                        | Default        | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------- | :---------------------------------------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classes     | `Partial<ScatterClasses>`                                                                                   | -              | -                                                                                                                                                                                                                                                                                                                                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -              | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| renderer    | `RendererType`                                                                                              | `'svg-single'` | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| slotProps   | `ScatterPlotSlotProps`                                                                                      | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots       | `ScatterPlotSlots`                                                                                          | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| className   | `string`                                                                                                    | -              | -                                                                                                                                                                                                                                                                                                                                     |
+
+### SparkLineChart
+
+Demos:
+
+- [SparkLine](https://mui.com/x/react-charts/sparkline/)
+
+API:
+
+- [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+
+**SparkLineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default                                                               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| area                      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | Set to `true` to fill spark line area.&#xA;Has no effect if plotType='bar'.                                                                                                                                                                                                                                                           |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| baseline                  | `number \| 'min' \| 'max'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `0`                                                                   | The value of the line at the base of the series area. `'min'` the area will fill the space **under** the line.`'max'` the area will fill the space **above** the line.`number` the area will fill the space between this value and the line                                                                                           |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| clipAreaOffset            | `{ top?: number; right?: number; bottom?: number; left?: number }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `{ top: 1, right: 1, bottom: 1, left: 1 }`                            | The clipped area offset in pixels. This prevents partial clipping of lines when they are drawn on the edge of the drawing area.                                                                                                                                                                                                       |
+| color                     | `ChartsColor`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette[0]`                                              | Color used to colorize the sparkline.                                                                                                                                                                                                                                                                                                 |
+| curve                     | `CurveType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'linear'`                                                            | -                                                                                                                                                                                                                                                                                                                                     |
+| data\*                    | `number[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | Data to plot.                                                                                                                                                                                                                                                                                                                         |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClipping           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.                                                                                                                                                                                                                        |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'rangeBar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'rangeBar' } \| { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| { type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'rangeBar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'rangeBar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'ohlc'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                         | -                                                                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                                     | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'rangeBar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'rangeBar' } \| { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `5`                                                                   | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'rangeBar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'rangeBar' } \| { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| { type: 'bar'; seriesId: string; dataIndex?: number } \| { type: 'line'; seriesId: string; dataIndex?: number } \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| { type: 'pie'; seriesId: string; dataIndex?: number } \| { type: 'radar'; seriesId: string; dataIndex?: number } \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| { type: 'rangeBar'; seriesId: string; dataIndex?: number } \| { type: 'ohlc'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Callback fired when clicking close to an item.&#xA;This is only available for scatter plot for now.                                                                                                                                                                                                                                   |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| LineItemIdentifier \| ScatterItemIdentifier \| PieItemIdentifier \| RadarItemIdentifier \| HeatmapItemIdentifier \| FunnelItemIdentifier \| SankeyItemIdentifier \| RangeBarItemIdentifier \| OHLCItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| plotType                  | `'bar' \| 'line'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'line'`                                                              | Type of plot used.                                                                                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'>; line: ChartSeriesTypeConfig<'line'>; scatter: ChartSeriesTypeConfig<'scatter'>; pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> }; radar: ChartSeriesTypeConfig<'radar'>; heatmap: ChartSeriesTypeConfig<'heatmap'>; funnel: ChartSeriesTypeConfig<'funnel'>; sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> }; rangeBar: ChartSeriesTypeConfig<'rangeBar'>; ohlc: ChartSeriesTypeConfig<'ohlc'> }` | -                                                                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showHighlight             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | Set to `true` to highlight the value.&#xA;With line, it shows a point.&#xA;With bar, it shows a highlight band.                                                                                                                                                                                                                       |
+| showTooltip               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | Set to `true` to enable the tooltip in the sparkline.                                                                                                                                                                                                                                                                                 |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `SparkLineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                                                                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `SparkLineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `{}`                                                                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| RangeBarItemIdentifier \| LegendItemParams<RangeBarItemIdentifier, 'type'> \| OHLCItemIdentifier \| LegendItemParams<OHLCItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                                                                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| valueFormatter            | `((value: number \| null) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `(value: number \| null) => (value === null ? '' : value.toString())` | Formatter used by the tooltip.                                                                                                                                                                                                                                                                                                        |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `XAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | The xAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| yAxis                     | `YAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | The yAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### strawberrySkyPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Unstable_CandlestickChart
+
+Demos:
+
+- [Candlestick](https://mui.com/x/react-charts/candlestick/)
+
+API:
+
+- [Unstable_CandlestickChart API](https://mui.com/x/api/charts/candlestick/)
+
+**Unstable_CandlestickChart Props:**
+
+| Prop                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                  | `React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                 | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight           | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line', y: 'line' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| colors                  | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                 | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| grid                    | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                  | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems             | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis         | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem         | `{ type: 'ohlc'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems      | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom             | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText              | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                  | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick             | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange     | `((hiddenItems: ({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange       | `((highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipAxisChange     | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange     | `((tooltipItem: OHLCItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange            | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                | `OHLCSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | The series to display in the candlestick chart.&#xA;An array of \[\[OHLCSeries]] objects. Currently, only one OHLC series is supported. If would like to display more than one OHLC&#xA;series, open an issue at https\://github.com/mui/mui-x explaining your use case.                                                              |
+| seriesConfig            | `{ ohlc: ChartSeriesTypeConfig<'ohlc'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps               | `CandlestickChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                   | `CandlestickChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                      | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                   | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis             | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem             | `OHLCItemIdentifier \| LegendItemParams<OHLCItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zoomData                | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig   | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_CandlestickPlot
+
+### Unstable_FunnelChart
+
+**Unstable_FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarChart
+
+**Unstable_RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarDataProvider
+
+**Unstable_RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useAnimate
+
+Hook to customize the animation of an element.
+Animates a ref from `initialProps` to `props`.
+
+**useAnimate Parameters:**
+
+| Parameter | Type                                | Default | Description              |
+| :-------- | :---------------------------------- | :------ | :----------------------- |
+| props     | `{}`                                | -       | The props to animate to. |
+| \_\_1     | `UseAnimateParams<{}, Element, {}>` | -       | -                        |
+
+**useAnimate Return Value:**
+
+an object containing a ref that should be passed to the element to animate and the transformed props.
+If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+`initialProps`.
+
+The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+
+When an animation starts, an interpolator is created using `createInterpolator`.
+On every animation frame:
+
+1. The interpolator is called to get the interpolated props;
+2. `transformProps` is called to transform the interpolated props;
+3. `applyProps` is called to apply the transformed props to the element.
+
+If `props` change while an animation is progress, the animation will continue towards the new `props`.
+
+The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+started and `applyProps` will not be called.
+
+```tsx
+type ReturnValue = UseAnimateReturn<Element, {}>;
+```
+
+### useAnimateArea
+
+Animates an area of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateArea Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateAreaParams` | -       | -           |
+
+**useAnimateArea Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedAreaReturn;
+```
+
+### useAnimateBar
+
+Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+final position.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBar Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| props     | `UseAnimateBarParams` | -       | -           |
+
+**useAnimateBar Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarReturnValue;
+```
+
+### useAnimateBarLabel
+
+Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+center of the bar it belongs to.
+The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+horizontally.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBarLabel Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| props     | `UseAnimateBarLabelParams` | -       | -           |
+
+**useAnimateBarLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarLabelReturn;
+```
+
+### useAnimateLine
+
+Animates a line of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateLine Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateLineParams` | -       | -           |
+
+**useAnimateLine Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedReturnValue;
+```
+
+### useAnimatePieArc
+
+Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArc Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcParams` | -       | -           |
+
+**useAnimatePieArc Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcReturnValue;
+```
+
+### useAnimatePieArcLabel
+
+Animates the label of pie slice from its middle point to the centroid of the slice.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArcLabel Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcLabelParams` | -       | -           |
+
+**useAnimatePieArcLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcLabelReturn;
+```
+
+### useAnimateRangeBar
+
+Animates a range bar from its center outwards.
+The animation only happens in the direction of the numerical axis (x-axis for vertical layout, y-axis for horizontal layout).
+The other direction remains constant during the animation.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateRangeBar Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| props     | `UseAnimateRangeBarParams` | -       | -           |
+
+**useAnimateRangeBar Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateRangeBarReturnValue;
+```
+
+### useAxesTooltip
+
+Returns the axes to display in the tooltip and the series item related to them.
+
+**useAxesTooltip Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| params    | `UseAxesTooltipParams` | -       | -           |
+
+**useAxesTooltip Return Value:**
+
+```tsx
+type ReturnValue =
+  | UseAxesTooltipReturnValue<
+      'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar' | 'ohlc',
+      string | number | Date
+    >[]
+  | null;
+```
+
+### useBarSeries
+
+Get access to the internal state of bar series.
+
+**useBarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useBarSeries Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'bar';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        | 'bar'
+        | 'line'
+        | 'scatter'
+        | 'pie'
+        | 'radar'
+        | 'heatmap'
+        | 'funnel'
+        | 'sankey'
+        | 'rangeBar'
+        | 'ohlc'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      stackOffset?: StackOffsetType;
+      barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+      barLabelPlacement?: 'center' | 'outside';
+      stack?: string;
+      stackOrder?: StackOrderType;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      layout: 'horizontal' | 'vertical';
+      minBarSize: number;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useBarSeriesContext
+
+Get access to the internal state of bar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useBarSeriesContext Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'bar'> | undefined;
+```
+
+### useBrush
+
+Get the current brush state.
+
+- `start` is the starting point of the brush selection.
+- `current` is the current point of the brush selection.
+
+**useBrush Return Value:**
+
+`{ start, current }` - The brush state.
+
+```tsx
+type ReturnValue = { start: { x: number; y: number }; current: { x: number; y: number } } | null;
+```
+
+### useChartApiContext
+
+The `useChartApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProvider` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<Partial<{}>>;
+```
+
+### useChartCartesianAxis
+
+**useChartCartesianAxis Parameters:**
+
+| Parameter | Type                                                      | Default | Description |
+| :-------- | :-------------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartCartesianAxisSignature<any>>` | -       | -           |
+
+**useChartCartesianAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartCartesianAxisSignature<any>>;
+```
+
+### useChartClosestPoint
+
+**useChartClosestPoint Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartClosestPointSignature>` | -       | -           |
+
+**useChartClosestPoint Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartClosestPointSignature>;
+```
+
+### useChartGradientId
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+
+**useChartGradientId Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientId Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartGradientIdObjectBound
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+
+**useChartGradientIdObjectBound Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientIdObjectBound Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartHighlight
+
+**useChartHighlight Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartHighlightSignature<any>>` | -       | -           |
+
+**useChartHighlight Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartHighlightSignature<any>>;
+```
+
+### useChartId
+
+Get the unique identifier of the chart.
+
+**useChartId Return Value:**
+
+chartId if it exists.
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### useChartInteraction
+
+**useChartInteraction Parameters:**
+
+| Parameter | Type                                               | Default | Description |
+| :-------- | :------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartInteractionSignature>` | -       | -           |
+
+**useChartInteraction Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartInteractionSignature>;
+```
+
+### useChartPolarAxis
+
+**useChartPolarAxis Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartPolarAxisSignature<any>>` | -       | -           |
+
+**useChartPolarAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartPolarAxisSignature<any>>;
+```
+
+### useChartPremiumApiRef
+
+Hook that instantiates a \[\[ChartPremiumApiRef]].
+The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+
+**useChartPremiumApiRef Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<
+  | ChartPremiumApi<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'composition',
+      ChartAnyPluginSignature[]
+    >
+  | undefined
+>;
+```
+
+### useChartProApiContext
+
+The `useChartProApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProviderPro` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartProApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<ChartProApi>;
+```
+
+### useChartProApiRef
+
+Hook that instantiates a \[\[ChartProApiRef]].
+The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+
+**useChartProApiRef Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<
+  | ChartProApi<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'composition',
+      ChartAnyPluginSignature[]
+    >
+  | undefined
+>;
+```
+
+### useChartProExport
+
+**useChartProExport Parameters:**
+
+| Parameter | Type                                             | Default | Description |
+| :-------- | :----------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProExportSignature>` | -       | -           |
+
+**useChartProExport Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProExportSignature>;
+```
+
+### useChartProZoom
+
+**useChartProZoom Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProZoomSignature>` | -       | -           |
+
+**useChartProZoom Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProZoomSignature>;
+```
+
+### useChartRootRef
+
+Get the ref for the root chart element.
+
+**useChartRootRef Return Value:**
+
+The root chart element ref.
+
+```tsx
+type ReturnValue = React.RefObject<Element | null>;
+```
+
+### useChartsLayerContainerRef
+
+Get the ref for the chart surface element.
+
+**useChartsLayerContainerRef Return Value:**
+
+The chart surface ref.
+
+```tsx
+type ReturnValue = React.RefObject<HTMLDivElement | null>;
+```
+
+### useChartsLocalization
+
+**useChartsLocalization Return Value:**
+
+```tsx
+type ReturnValue = ChartsLocalizationContextValue;
+```
+
+### useChartTooltip
+
+**useChartTooltip Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartTooltipSignature<any>>` | -       | -           |
+
+**useChartTooltip Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartTooltipSignature<any>>;
+```
+
+### useChartVisibilityManager
+
+**useChartVisibilityManager Parameters:**
+
+| Parameter | Type                                                          | Default | Description |
+| :-------- | :------------------------------------------------------------ | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartVisibilityManagerSignature<any>>` | -       | -           |
+
+**useChartVisibilityManager Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartVisibilityManagerSignature<any>>;
+```
+
+### useChartZAxis
+
+**useChartZAxis Parameters:**
+
+| Parameter | Type                                         | Default | Description |
+| :-------- | :------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartZAxisSignature>` | -       | -           |
+
+**useChartZAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartZAxisSignature>;
+```
+
+### useDataset
+
+Get access to the dataset used to populate series and axes data.
+
+**useDataset Return Value:**
+
+The dataset array if provided, otherwise undefined.
+
+```tsx
+type ReturnValue = Readonly<DatasetElementType<unknown>[]> | undefined;
+```
+
+### useDrawingArea
+
+Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
+
+It includes the left, top, width, height, bottom, and right dimensions.
+
+**useDrawingArea Return Value:**
+
+The drawing area dimensions.
+
+```tsx
+type ReturnValue = ChartDrawingArea;
+```
+
+### useFocusedItem
+
+Get the focused item from keyboard navigation.
+
+**useFocusedItem Return Value:**
+
+```tsx
+type ReturnValue = FocusedItemIdentifier | null;
+```
+
+### useFunnelSeries
+
+Get access to the internal state of funnel series.
+
+**useFunnelSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useFunnelSeries Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue = DefaultizedFunnelSeriesType | undefined;
+```
+
+### useFunnelSeriesContext
+
+Get access to the internal state of funnel series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useFunnelSeriesContext Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useGaugeState
+
+**useGaugeState Return Value:**
+
+```tsx
+type ReturnValue = {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  cx: number;
+  cy: number;
+  maxRadius: number;
+  valueAngle: number | null;
+};
+```
+
+### useHeatmapSeries
+
+Get access to the internal state of heatmap series.
+
+**useHeatmapSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useHeatmapSeries Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue = DefaultizedHeatmapSeriesType | undefined;
+```
+
+### useHeatmapSeriesContext
+
+Get access to the internal state of heatmap series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useHeatmapSeriesContext Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useIsZoomInteracting
+
+Get access to the zoom state.
+
+**useIsZoomInteracting Return Value:**
+
+Inform the zoom is interacting.
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### useItemHighlightState
+
+A hook to check the highlighted state of the item.
+This function already calculates that an item is not faded if it is highlighted.
+
+If you need fine control over the state, use the `useItemHighlightStateGetter` hook instead.
+
+**useItemHighlightState Parameters:**
+
+| Parameter | Type                                                                                                                                      | Default | Description          |
+| :-------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------- |
+| item      | `UseItemHighlightedParams<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>` | -       | is the item to check |
+
+**useItemHighlightState Return Value:**
+
+the state of the item
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useItemHighlightStateGetter
+
+A hook to get a callback that returns the highlight state of an item.
+
+If you're interested by a single item, consider using `useItemHighlightState`.
+
+**useItemHighlightStateGetter Return Value:**
+
+callback to get the highlight state of an item.
+
+```tsx
+type ReturnValue = (
+  item:
+    | SankeyItemIdentifier
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | { type: 'rangeBar'; seriesId: string; dataIndex?: number }
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | null,
+) => HighlightState;
+```
+
+### useItemTooltip
+
+Returns a config object when the tooltip contains a single item to display.
+Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+
+**useItemTooltip Return Value:**
+
+The tooltip item config
+
+```tsx
+type ReturnValue = UseItemTooltipReturnValue<
+  'bar' | 'line' | 'scatter' | 'pie' | 'heatmap' | 'funnel' | 'sankey' | 'rangeBar' | 'ohlc'
+> | null;
+```
+
+### useLegend
+
+Get the legend items to display.
+
+This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+
+An alternative is to use the `useSeries` hook and format the legend items yourself.
+
+**useLegend Return Value:**
+
+legend data
+
+| Property | Type                       | Description |
+| :------- | :------------------------- | :---------- |
+| items    | `SeriesLegendItemParams[]` | -           |
+
+### useLineSeries
+
+Get access to the internal state of line series.
+
+**useLineSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useLineSeries Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'line';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        | 'bar'
+        | 'line'
+        | 'scatter'
+        | 'pie'
+        | 'radar'
+        | 'heatmap'
+        | 'funnel'
+        | 'sankey'
+        | 'rangeBar'
+        | 'ohlc'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      baseline?: number | 'min' | 'max';
+      stackOffset?: StackOffsetType;
+      stack?: string;
+      stackOrder?: StackOrderType;
+      area?: boolean;
+      curve?: CurveType;
+      strictStepCurve?: boolean;
+      showMark?: boolean | ((params: ShowMarkParams) => boolean);
+      shape?: MarkShape;
+      disableHighlight?: boolean;
+      connectNulls?: boolean;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useLineSeriesContext
+
+Get access to the internal state of line series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useLineSeriesContext Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'line'> | undefined;
+```
+
+### useOHLCSeries
+
+Get access to the internal state of OHLC series.
+
+**useOHLCSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useOHLCSeries Return Value:**
+
+the OHLC series
+
+```tsx
+type ReturnValue = DefaultizedOHLCSeriesType | undefined;
+```
+
+### useOHLCSeriesContext
+
+Get access to the internal state of OHLC series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useOHLCSeriesContext Return Value:**
+
+the OHLC series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### usePieSeries
+
+Get access to the internal state of pie series.
+
+**usePieSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**usePieSeries Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue = DefaultizedPieSeriesType | undefined;
+```
+
+### usePieSeriesContext
+
+Get access to the internal state of pie series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**usePieSeriesContext Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadarAxis
+
+Returns an array with one item per metric with the different points to label.
+
+**useRadarAxis Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| params    | `UseRadarAxisParams` | -       | -           |
+
+**useRadarAxis Return Value:**
+
+```tsx
+type ReturnValue = {
+  metric: string;
+  angle: number;
+  center: { x: number; y: number };
+  labels: { x: number; y: number; value: number | Date; formattedValue: string }[];
+} | null;
+```
+
+### useRadarItemTooltip
+
+Contains an object per value with their content and the label of the associated metric.
+
+**useRadarItemTooltip Return Value:**
+
+The tooltip item configs
+
+```tsx
+type ReturnValue = UseRadarItemTooltipReturnValue | null;
+```
+
+### useRadarSeries
+
+Get access to the internal state of radar series.
+
+**useRadarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useRadarSeries Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue = DefaultizedRadarSeriesType | undefined;
+```
+
+### useRadarSeriesContext
+
+Get access to the internal state of radar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useRadarSeriesContext Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadiusAxes
+
+Get all the radius axes for polar charts.
+
+Returns all radial axes configured in polar charts along with their IDs.
+Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+
+**useRadiusAxes Return Value:**
+
+An object containing:
+
+- `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `radiusAxisIds`: An array of all radius axis IDs in the chart
+
+| Property      | Type                                           | Description |
+| :------------ | :--------------------------------------------- | :---------- |
+| radiusAxis    | `DefaultizedAxisConfig<ChartsRadiusAxisProps>` | -           |
+| radiusAxisIds | `string[]`                                     | -           |
+
+### useRadiusAxis
+
+Get a specific radius axis or the default radius axis for polar charts.
+
+Returns the configuration and scale for a radial axis in polar charts.
+The radius axis controls the radial distance of data points from the center of the circle.
+
+**useRadiusAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                           |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's radius axis configurationUndefined to get the default (first) radius axis |
+
+**useRadiusAxis Return Value:**
+
+The radius axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRadiusAxisProps
+    >
+  | undefined;
+```
+
+### useRadiusScale
+
+Get the radius scale.
+
+**useRadiusScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                           |
+| :-------- | :----------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `radiusAxis` propUndefined to get the default radius axis |
+
+**useRadiusScale Return Value:**
+
+The radius axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useRangeBarSeries
+
+Get access to the internal state of range bar series.
+
+**useRangeBarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useRangeBarSeries Return Value:**
+
+the range bar series
+
+```tsx
+type ReturnValue = DefaultizedRangeBarSeriesType | undefined;
+```
+
+### useRangeBarSeriesContext
+
+Get access to the internal state of range bar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useRangeBarSeriesContext Return Value:**
+
+the range bar series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRotationAxes
+
+Get all the rotation axes for polar charts.
+
+Returns all rotation axes configured in polar charts along with their IDs.
+Rotation axes are used in charts like `RadarChart` to define angular positioning.
+
+**useRotationAxes Return Value:**
+
+An object containing:
+
+- `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `rotationAxisIds`: An array of all rotation axis IDs in the chart
+
+| Property        | Type                                             | Description |
+| :-------------- | :----------------------------------------------- | :---------- |
+| rotationAxis    | `DefaultizedAxisConfig<ChartsRotationAxisProps>` | -           |
+| rotationAxisIds | `string[]`                                       | -           |
+
+### useRotationAxis
+
+Get a specific rotation axis or the default rotation axis for polar charts.
+
+Returns the configuration and scale for a rotation axis in polar charts.
+The rotation axis controls the angular positioning of data points around the circle.
+
+**useRotationAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                               |
+| :-------- | :------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's rotation axis configurationUndefined to get the default (first) rotation axis |
+
+**useRotationAxis Return Value:**
+
+The rotation axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRotationAxisProps
+    >
+  | undefined;
+```
+
+### useRotationScale
+
+Get the rotation scale.
+
+**useRotationScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                               |
+| :-------- | :----------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `rotationAxis` propUndefined to get the default rotation axis |
+
+**useRotationScale Return Value:**
+
+The rotation axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useScatterSeries
+
+Get access to the internal state of scatter series.
+
+**useScatterSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useScatterSeries Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue = DefaultizedScatterSeriesType | undefined;
+```
+
+### useScatterSeriesContext
+
+Get access to the internal state of scatter series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useScatterSeriesContext Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useSeries
+
+Get access to the internal state of series.
+Structured by type of series:
+{ seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: \[id1, ...] } }
+
+**useSeries Return Value:**
+
+FormattedSeries series
+
+```tsx
+type ReturnValue = ProcessedSeries;
+```
+
+### useXAxes
+
+Get all the x-axes.
+
+Returns all X axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useXAxes Return Value:**
+
+An object containing:
+
+- `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `xAxisIds`: An array of all X axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| xAxis    | `ComputedAxisConfig<ChartsXAxisProps>` | -           |
+| xAxisIds | `AxisId[]`                             | -           |
+
+### useXAxis
+
+Get a specific X axis or the default X axis.
+
+**useXAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXAxis Return Value:**
+
+The configuration for a single X axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsXAxisProps
+>;
+```
+
+### useXAxisCoordinates
+
+Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+
+**useXAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisCoordinates Return Value:**
+
+The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useXAxisTicks
+
+Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useXAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useXColorScale
+
+Get the X axis color scale.
+
+**useXColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useXColorScale Return Value:**
+
+The color scale for the specified X axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useXScale
+
+Get the X scale.
+
+**useXScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXScale Return Value:**
+
+The X axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useYAxes
+
+Get all the y-axes.
+
+Returns all Y axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useYAxes Return Value:**
+
+An object containing:
+
+- `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `yAxisIds`: An array of all Y axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| yAxis    | `ComputedAxisConfig<ChartsYAxisProps>` | -           |
+| yAxisIds | `AxisId[]`                             | -           |
+
+### useYAxis
+
+Get a specific Y axis or the default Y axis.
+
+**useYAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYAxis Return Value:**
+
+The configuration for a single Y axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsYAxisProps
+>;
+```
+
+### useYAxisCoordinates
+
+Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+
+**useYAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisCoordinates Return Value:**
+
+The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useYAxisTicks
+
+Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useYAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useYColorScale
+
+Get the Y axis color scale.
+
+**useYColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useYColorScale Return Value:**
+
+The color scale for the specified Y axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useYScale
+
+Get the Y scale.
+
+**useYScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYScale Return Value:**
+
+The Y axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useZAxes
+
+**useZAxes Return Value:**
+
+| Property | Type                     | Description |
+| :------- | :----------------------- | :---------- |
+| zAxis    | `DefaultizedZAxisConfig` | -           |
+| zAxisIds | `AxisId[]`               | -           |
+
+### useZAxis
+
+**useZAxis Parameters:**
+
+| Parameter  | Type               | Default | Description |
+| :--------- | :----------------- | :------ | :---------- |
+| identifier | `number \| string` | -       | -           |
+
+**useZAxis Return Value:**
+
+```tsx
+type ReturnValue = ZAxisDefaultized;
+```
+
+### useZColorScale
+
+Get the Z axis color scale.
+
+**useZColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useZColorScale Return Value:**
+
+The color scale for the specified Z axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### yellowPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+## Additional Types
+
+### AllSeriesType
+
+```typescript
+type AllSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | MakeOptional<PieValueType, 'id'>[]
+    | number[]
+    | FunnelValueType[]
+    | SankeyData
+    | (RangeBarValueType | null)[]
+    | (OHLCValueType | null)[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<MakeOptional<PieValueType, 'id'>>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null)
+    | SeriesValueFormatter<RangeBarValueType | null>
+    | ((value: number | null, context: { dataIndex: number; field: OHLCField }) => string | null);
+  /** The id of this series. */
+  id?: SeriesId;
+};
+```
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AXIS_LABEL_DEFAULT_HEIGHT
+
+```typescript
+type AXIS_LABEL_DEFAULT_HEIGHT = 20;
+```
+
+### axisClasses
+
+```typescript
+type axisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### AxisConfig
+
+Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
+
+```typescript
+type AxisConfig<S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear', V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = { offset?: number } & CommonAxisConfig<S, V> & { min?: NumberValue; max?: NumberValue } | {} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<{ scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear'; scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>; colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig }, 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension
+```
+
+### AxisCoordinates
+
+```typescript
+type AxisCoordinates = { left: number; top: number; right: number; bottom: number };
+```
+
+### AxisItemIdentifier
+
+Identifies a data point within an axis.
+
+```typescript
+type AxisItemIdentifier = {
+  /** The axis id. */
+  axisId: AxisId;
+  /** The data index. */
+  dataIndex: number;
+};
+```
+
+### AxisValueFormatterContext
+
+```typescript
+type AxisValueFormatterContext<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+> =
+  | { location: 'legend' }
+  | {
+      location: 'tooltip' | 'zoom-slider-tooltip';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+    }
+  | {
+      location: 'tick';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+      defaultTickLabel: string;
+      tickNumber?: number;
+    };
+```
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BAR_CHART_PREMIUM_PLUGINS
+
+```typescript
+type BAR_CHART_PREMIUM_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BAR_CHART_PRO_PLUGINS
+
+```typescript
+type BAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartPremiumPluginSignatures
+
+```typescript
+type BarChartPremiumPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartPremiumProps
+
+````typescript
+type BarChartPremiumProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartPremiumSlotProps;
+  /** Callback fired when a bar or range bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
+   */
+  series: (RangeBarSeriesType | BarSeries)[];
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartPremiumSlotProps
+
+```typescript
+type BarChartPremiumSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartPremiumSlots
+
+```typescript
+type BarChartPremiumSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### BarChartProPluginSignatures
+
+```typescript
+type BarChartProPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartProProps
+
+````typescript
+type BarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartProSlotProps
+
+```typescript
+type BarChartProSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartProSlots
+
+```typescript
+type BarChartProSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'label' | 'root' | 'series' | 'element' | 'seriesLabels' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  classes?: Partial<BarClasses>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarItemIdentifier
+
+An object that allows to identify a single bar.
+Used for item interaction
+
+```typescript
+type BarItemIdentifier = { type: 'bar'; seriesId: string; dataIndex: number };
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+### BarSeriesType
+
+```typescript
+type BarSeriesType = {
+  type: 'bar';
+  /** Data associated to each bar. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize?: number;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### BarValueType
+
+```typescript
+type BarValueType = number;
+```
+
+### blueberryTwilightPaletteDark
+
+```typescript
+type blueberryTwilightPaletteDark = string[];
+```
+
+### blueberryTwilightPaletteLight
+
+```typescript
+type blueberryTwilightPaletteLight = string[];
+```
+
+### bluePaletteDark
+
+```typescript
+type bluePaletteDark = string[];
+```
+
+### bluePaletteLight
+
+```typescript
+type bluePaletteLight = string[];
+```
+
+### CandlestickChartProps
+
+````typescript
+type CandlestickChartProps = {
+  /**
+   * The series to display in the candlestick chart.
+   * An array of [[OHLCSeries]] objects.
+   *
+   * Currently, only one OHLC series is supported. If would like to display more than one OHLC
+   * series, open an issue at https://github.com/mui/mui-x explaining your use case.
+   */
+  series: OHLCSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line', y: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: CandlestickChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: CandlestickChartSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: OHLCItemIdentifier | Omit<OHLCItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: OHLCItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { ohlc: ChartSeriesTypeConfig<'ohlc'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'ohlc';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'ohlc';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### CandlestickChartSlotProps
+
+```typescript
+type CandlestickChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### CandlestickChartSlots
+
+```typescript
+type CandlestickChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### CandlestickPlotProps
+
+```typescript
+type CandlestickPlotProps = {};
+```
+
+### CartesianChartSeriesType
+
+```typescript
+type CartesianChartSeriesType =
+  | 'bar'
+  | 'line'
+  | 'scatter'
+  | 'heatmap'
+  | 'funnel'
+  | 'rangeBar'
+  | 'ohlc';
+```
+
+### CategoryAxis
+
+```typescript
+type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = {
+  /**
+   * The categories to be displayed on the axis.
+   * The order of the categories is the order in which they are displayed.
+   */
+  categories?: string[];
+  /**
+   * The position of the axis.
+   * - 'left' - The axis is positioned on the left side of the chart.
+   * - 'right' - The axis is positioned on the right side of the chart.
+   * - 'top' - The axis is positioned on the top side of the chart.
+   * - 'bottom' - The axis is positioned on the bottom side of the chart.
+   * - 'none' - The axis is not displayed.
+   */
+  position?: 'left' | 'right' | 'top' | 'bottom' | 'none';
+  /**
+   * The size of the axis.
+   * - If the axis is horizontal, the size is the height of the axis.
+   * - If the axis is vertical, the size is the width of the axis.
+   * - If set to `'auto'`, the size is automatically calculated based on tick label measurements.
+   */
+  size?: number | 'auto';
+  scaleType?: 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### ChartApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartApi<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'composition' | undefined = undefined,
+  TSignatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### chartAxisZoomSliderThumbClasses
+
+```typescript
+type chartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClasses
+
+```typescript
+type ChartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartAxisZoomSliderTrackClasses
+
+```typescript
+type chartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClasses
+
+```typescript
+type ChartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartBaseButtonProps
+
+```typescript
+type ChartBaseButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+```
+
+### ChartBaseCommonProps
+
+```typescript
+type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+```
+
+### ChartBaseIconButtonProps
+
+```typescript
+type ChartBaseIconButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
+};
+```
+
+### ChartBaseIconProps
+
+```typescript
+type ChartBaseIconProps = React.DOMAttributes<SVGSVGElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+```
+
+### ChartDrawingArea
+
+```typescript
+type ChartDrawingArea = {
+  /** The gap between the left border of the SVG and the drawing area. */
+  left: number;
+  /** The gap between the top border of the SVG and the drawing area. */
+  top: number;
+  /** The gap between the bottom border of the SVG and the drawing area. */
+  bottom: number;
+  /** The gap between the right border of the SVG and the drawing area. */
+  right: number;
+  /** The width of the drawing area. */
+  width: number;
+  /** The height of the drawing area. */
+  height: number;
+};
+```
+
+### ChartPremiumApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartPremiumApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### ChartProApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartProApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### ChartsAxisClasses
+
+```typescript
+type ChartsAxisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### ChartsAxisClassKey
+
+```typescript
+type ChartsAxisClassKey =
+  | 'line'
+  | 'label'
+  | 'tick'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'root'
+  | 'tickContainer'
+  | 'tickLabel'
+  | 'directionX'
+  | 'directionY';
+```
+
+### ChartsAxisData
+
+The data format returned by onAxisClick.
+
+```typescript
+type ChartsAxisData = {
+  /** The index in the axis' data property. */
+  dataIndex: number;
+  /** Tha value associated to the axis item. */
+  axisValue: number | Date | string;
+  /** The mapping of series ids to their value for this particular axis index. */
+  seriesValues: Record<string, number | null | undefined>;
+};
+```
+
+### chartsAxisHighlightClasses
+
+```typescript
+type chartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClasses
+
+```typescript
+type ChartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClassKey
+
+```typescript
+type ChartsAxisHighlightClassKey = 'root';
+```
+
+### ChartsAxisHighlightPath
+
+```typescript
+type ChartsAxisHighlightPath = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: { axisHighlight: ChartsAxisHighlightType } },
+  Pick<
+    React.SVGProps<SVGPathElement>,
+    | 'string'
+    | 'id'
+    | 'min'
+    | 'max'
+    | 'type'
+    | 'color'
+    | 'scale'
+    | 'className'
+    | 'offset'
+    | 'end'
+    | 'height'
+    | 'x'
+    | 'style'
+    | 'width'
+    | 'ref'
+    | 'dominantBaseline'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'media'
+    | 'method'
+    | 'name'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'target'
+    | 'role'
+    | 'tabIndex'
+    | 'crossOrigin'
+    | 'accentHeight'
+    | 'accumulate'
+    | 'additive'
+    | 'alignmentBaseline'
+    | 'allowReorder'
+    | 'alphabetic'
+    | 'amplitude'
+    | 'arabicForm'
+    | 'ascent'
+    | 'attributeName'
+    | 'attributeType'
+    | 'autoReverse'
+    | 'azimuth'
+    | 'baseFrequency'
+    | 'baselineShift'
+    | 'baseProfile'
+    | 'bbox'
+    | 'begin'
+    | 'bias'
+    | 'by'
+    | 'calcMode'
+    | 'capHeight'
+    | 'clip'
+    | 'clipPath'
+    | 'clipPathUnits'
+    | 'clipRule'
+    | 'colorInterpolation'
+    | 'colorInterpolationFilters'
+    | 'colorProfile'
+    | 'colorRendering'
+    | 'contentScriptType'
+    | 'contentStyleType'
+    | 'cursor'
+    | 'cx'
+    | 'cy'
+    | 'd'
+    | 'decelerate'
+    | 'descent'
+    | 'diffuseConstant'
+    | 'direction'
+    | 'display'
+    | 'divisor'
+    | 'dur'
+    | 'dx'
+    | 'dy'
+    | 'edgeMode'
+    | 'elevation'
+    | 'enableBackground'
+    | 'exponent'
+    | 'externalResourcesRequired'
+    | 'fill'
+    | 'fillOpacity'
+    | 'fillRule'
+    | 'filter'
+    | 'filterRes'
+    | 'filterUnits'
+    | 'floodColor'
+    | 'floodOpacity'
+    | 'focusable'
+    | 'fontFamily'
+    | 'fontSize'
+    | 'fontSizeAdjust'
+    | 'fontStretch'
+    | 'fontStyle'
+    | 'fontVariant'
+    | 'fontWeight'
+    | 'format'
+    | 'fr'
+    | 'from'
+    | 'fx'
+    | 'fy'
+    | 'g1'
+    | 'g2'
+    | 'glyphName'
+    | 'glyphOrientationHorizontal'
+    | 'glyphOrientationVertical'
+    | 'glyphRef'
+    | 'gradientTransform'
+    | 'gradientUnits'
+    | 'hanging'
+    | 'horizAdvX'
+    | 'horizOriginX'
+    | 'href'
+    | 'ideographic'
+    | 'imageRendering'
+    | 'in2'
+    | 'in'
+    | 'intercept'
+    | 'k1'
+    | 'k2'
+    | 'k3'
+    | 'k4'
+    | 'k'
+    | 'kernelMatrix'
+    | 'kernelUnitLength'
+    | 'kerning'
+    | 'keyPoints'
+    | 'keySplines'
+    | 'keyTimes'
+    | 'lengthAdjust'
+    | 'letterSpacing'
+    | 'lightingColor'
+    | 'limitingConeAngle'
+    | 'local'
+    | 'markerEnd'
+    | 'markerHeight'
+    | 'markerMid'
+    | 'markerStart'
+    | 'markerUnits'
+    | 'markerWidth'
+    | 'mask'
+    | 'maskContentUnits'
+    | 'maskUnits'
+    | 'mathematical'
+    | 'mode'
+    | 'numOctaves'
+    | 'opacity'
+    | 'operator'
+    | 'order'
+    | 'orient'
+    | 'orientation'
+    | 'origin'
+    | 'overflow'
+    | 'overlinePosition'
+    | 'overlineThickness'
+    | 'paintOrder'
+    | 'panose1'
+    | 'path'
+    | 'pathLength'
+    | 'patternContentUnits'
+    | 'patternTransform'
+    | 'patternUnits'
+    | 'pointerEvents'
+    | 'points'
+    | 'pointsAtX'
+    | 'pointsAtY'
+    | 'pointsAtZ'
+    | 'preserveAlpha'
+    | 'preserveAspectRatio'
+    | 'primitiveUnits'
+    | 'r'
+    | 'radius'
+    | 'refX'
+    | 'refY'
+    | 'renderingIntent'
+    | 'repeatCount'
+    | 'repeatDur'
+    | 'requiredExtensions'
+    | 'requiredFeatures'
+    | 'restart'
+    | 'result'
+    | 'rotate'
+    | 'rx'
+    | 'ry'
+    | 'seed'
+    | 'shapeRendering'
+    | 'slope'
+    | 'spacing'
+    | 'specularConstant'
+    | 'specularExponent'
+    | 'speed'
+    | 'spreadMethod'
+    | 'startOffset'
+    | 'stdDeviation'
+    | 'stemh'
+    | 'stemv'
+    | 'stitchTiles'
+    | 'stopColor'
+    | 'stopOpacity'
+    | 'strikethroughPosition'
+    | 'strikethroughThickness'
+    | 'stroke'
+    | 'strokeDasharray'
+    | 'strokeDashoffset'
+    | 'strokeLinecap'
+    | 'strokeLinejoin'
+    | 'strokeMiterlimit'
+    | 'strokeOpacity'
+    | 'strokeWidth'
+    | 'surfaceScale'
+    | 'systemLanguage'
+    | 'tableValues'
+    | 'targetX'
+    | 'targetY'
+    | 'textAnchor'
+    | 'textDecoration'
+    | 'textLength'
+    | 'textRendering'
+    | 'to'
+    | 'transform'
+    | 'u1'
+    | 'u2'
+    | 'underlinePosition'
+    | 'underlineThickness'
+    | 'unicode'
+    | 'unicodeBidi'
+    | 'unicodeRange'
+    | 'unitsPerEm'
+    | 'vAlphabetic'
+    | 'values'
+    | 'vectorEffect'
+    | 'version'
+    | 'vertAdvY'
+    | 'vertOriginX'
+    | 'vertOriginY'
+    | 'vHanging'
+    | 'vIdeographic'
+    | 'viewBox'
+    | 'viewTarget'
+    | 'visibility'
+    | 'vMathematical'
+    | 'widths'
+    | 'wordSpacing'
+    | 'writingMode'
+    | 'x1'
+    | 'x2'
+    | 'xChannelSelector'
+    | 'xHeight'
+    | 'xlinkActuate'
+    | 'xlinkArcrole'
+    | 'xlinkHref'
+    | 'xlinkRole'
+    | 'xlinkShow'
+    | 'xlinkTitle'
+    | 'xlinkType'
+    | 'xmlBase'
+    | 'xmlLang'
+    | 'xmlns'
+    | 'xmlnsXlink'
+    | 'xmlSpace'
+    | 'y1'
+    | 'y2'
+    | 'y'
+    | 'yChannelSelector'
+    | 'z'
+    | 'zoomAndPan'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### ChartsAxisHighlightProps
+
+```typescript
+type ChartsAxisHighlightProps = { x?: ChartsAxisHighlightType; y?: ChartsAxisHighlightType };
+```
+
+### ChartsAxisHighlightType
+
+```typescript
+type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+```
+
+### ChartsAxisProps
+
+```typescript
+type ChartsAxisProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsAxisSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsAxisSlotProps;
+};
+```
+
+### ChartsAxisSlotProps
+
+```typescript
+type ChartsAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisSlots
+
+```typescript
+type ChartsAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisTooltipContentClasses
+
+```typescript
+type ChartsAxisTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsAxisTooltipContentProps
+
+```typescript
+type ChartsAxisTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### chartsAxisZoomSliderThumbClasses
+
+```typescript
+type chartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClasses
+
+```typescript
+type ChartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartsAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartsAxisZoomSliderTrackClasses
+
+```typescript
+type chartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClasses
+
+```typescript
+type ChartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartsAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartsBaseSlots
+
+```typescript
+type ChartsBaseSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### ChartsClipPathProps
+
+```typescript
+type ChartsClipPathProps = {
+  /** The id of the clip path. */
+  id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
+  offset?: { top?: number; right?: number; bottom?: number; left?: number };
+};
+```
+
+### ChartsColor
+
+```typescript
+type ChartsColor = string | ChartsColorCallback;
+```
+
+### ChartsColorPalette
+
+```typescript
+type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+```
+
+### ChartsContainerPremiumProps
+
+```typescript
+type ChartsContainerPremiumProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderPremiumSlots>;
+    slotProps?: Partial<ChartsDataProviderPremiumSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsContainerPremiumSlotProps
+
+```typescript
+type ChartsContainerPremiumSlotProps = {};
+```
+
+### ChartsContainerPremiumSlots
+
+```typescript
+type ChartsContainerPremiumSlots = {};
+```
+
+### ChartsContainerProProps
+
+```typescript
+type ChartsContainerProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsDataProviderPremiumProps
+
+```typescript
+type ChartsDataProviderPremiumProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderPremiumSlots>;
+    slotProps?: Partial<ChartsDataProviderPremiumSlotProps>;
+  };
+```
+
+### ChartsDataProviderPremiumSlotProps
+
+```typescript
+type ChartsDataProviderPremiumSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderPremiumSlots
+
+```typescript
+type ChartsDataProviderPremiumSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ChartsDataProviderProProps
+
+```typescript
+type ChartsDataProviderProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  };
+```
+
+### ChartsDataProviderProps
+
+```typescript
+type ChartsDataProviderProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartClosestPointSignature,
+    UseChartKeyboardNavigationSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  };
+```
+
+### ChartsDataProviderProSlotProps
+
+```typescript
+type ChartsDataProviderProSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderProSlots
+
+```typescript
+type ChartsDataProviderProSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ChartsDataProviderSlotProps
+
+```typescript
+type ChartsDataProviderSlotProps = {
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ChartsDataProviderSlots
+
+```typescript
+type ChartsDataProviderSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### chartsGridClasses
+
+```typescript
+type chartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClasses
+
+```typescript
+type ChartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClassKey
+
+```typescript
+type ChartsGridClassKey = 'line' | 'root' | 'horizontalLine' | 'verticalLine';
+```
+
+### ChartsGridProps
+
+```typescript
+type ChartsGridProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Displays vertical grid. */
+  vertical?: boolean;
+  /** Displays horizontal grid. */
+  horizontal?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsGridClasses>;
+};
+```
+
+### ChartsIconSlots
+
+```typescript
+type ChartsIconSlots = {};
+```
+
+### ChartsItemTooltipContentClasses
+
+```typescript
+type ChartsItemTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsItemTooltipContentProps
+
+```typescript
+type ChartsItemTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabel
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabel = unknown;
+```
+
+### ChartsLabelClasses
+
+```typescript
+type ChartsLabelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsLabelCustomMarkProps
+
+```typescript
+type ChartsLabelCustomMarkProps = {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+};
+```
+
+### ChartsLabelGradientClasses
+
+```typescript
+type ChartsLabelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### ChartsLabelMark
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabelMark = unknown;
+```
+
+### ChartsLabelMarkClasses
+
+```typescript
+type ChartsLabelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### ChartsLabelMarkProps
+
+```typescript
+type ChartsLabelMarkProps = {
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type?: ChartsLabelMarkType;
+  /**
+   * The mark will be rendered as a combination of a line and the specified mark type.
+   * The line will be rendered first, followed by the mark.
+   * Only used if `type='line+mark'`.
+   */
+  markShape?: MarkShape;
+  /** The color of the mark. */
+  color?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelMarkClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabelProps
+
+```typescript
+type ChartsLabelProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLegendClasses
+
+```typescript
+type ChartsLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### ChartsLegendPosition
+
+```typescript
+type ChartsLegendPosition = {
+  /**
+   * The position of the legend in relation to the chart.
+   * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+   * If customization is needed, simply use the composition pattern.
+   */
+  position?: Position;
+};
+```
+
+### ChartsLegendProps
+
+```typescript
+type ChartsLegendProps = {
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: SeriesLegendItemContext,
+    index: number,
+  ) => void;
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction?: Direction;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLegendClasses>;
+  /**
+   * If `true`, clicking on a legend item will toggle the visibility of the corresponding series.
+   * @default false
+   */
+  toggleVisibilityOnClick?: boolean;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+};
+```
+
+### ChartsLegendSlotExtension
+
+```typescript
+type ChartsLegendSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsLegendSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsLegendSlotProps;
+};
+```
+
+### ChartsLegendSlotProps
+
+```typescript
+type ChartsLegendSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+};
+```
+
+### ChartsLegendSlots
+
+```typescript
+type ChartsLegendSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+};
+```
+
+### ChartsLocalizationProviderProps
+
+```typescript
+type ChartsLocalizationProviderProps = {
+  children?: React.ReactNode;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+};
+```
+
+### ChartsPieSorting
+
+```typescript
+type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
+```
+
+### ChartsReferenceLineClasses
+
+```typescript
+type ChartsReferenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### ChartsReferenceLineClassKey
+
+```typescript
+type ChartsReferenceLineClassKey = 'line' | 'label' | 'root' | 'horizontal' | 'vertical';
+```
+
+### ChartsReferenceLineProps
+
+```typescript
+type ChartsReferenceLineProps = (
+  | { x?: undefined; y: string | number | Date }
+  | { y?: undefined; x: string | number | Date }
+) & {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+};
+```
+
+### ChartsRendererProps
+
+```typescript
+type ChartsRendererProps = {
+  dimensions: { id: string; label: string; data: (string | number | Date | null)[] }[];
+  values: { id: string; label: string; data: (number | null)[] }[];
+  chartType: string;
+  configuration: Record<string, any>;
+  onRender?: (
+    type: string,
+    props: Record<string, any>,
+    Component: React.ComponentType<any>,
+  ) => React.ReactNode;
+};
+```
+
+### chartsSurfaceClasses
+
+```typescript
+type chartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceClasses
+
+```typescript
+type ChartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceProps
+
+```typescript
+type ChartsSurfaceProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+};
+```
+
+### ChartsTextProps
+
+```typescript
+type ChartsTextProps = {
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /** Text displayed. */
+  text: string;
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### ChartsTextStyle
+
+```typescript
+type ChartsTextStyle = {
+  angle?: number;
+  /**
+   * The text baseline
+   * @default 'central'
+   */
+  dominantBaseline?: ChartsTextBaseline;
+  /**
+   * The text anchor
+   * @default 'middle'
+   */
+  textAnchor?: ChartsTextAnchor;
+};
+```
+
+### ChartsToolbarImageExportOptions
+
+```typescript
+type ChartsToolbarImageExportOptions = {
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
+   * @default 'image/png'
+   */
+  type: string;
+};
+```
+
+### ChartsToolbarImageExportTriggerProps
+
+```typescript
+type ChartsToolbarImageExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartsToolbarImageExportOptions;
+};
+```
+
+### ChartsToolbarPrintExportOptions
+
+```typescript
+type ChartsToolbarPrintExportOptions = {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartsToolbarPrintExportTriggerProps
+
+```typescript
+type ChartsToolbarPrintExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartPrintExportOptions;
+};
+```
+
+### ChartsToolbarProProps
+
+```typescript
+type ChartsToolbarProProps = {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+};
+```
+
+### ChartsToolbarProSlotProps
+
+```typescript
+type ChartsToolbarProSlotProps = {
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+};
+```
+
+### ChartsToolbarProSlots
+
+```typescript
+type ChartsToolbarProSlots = {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipCell
+
+```typescript
+type ChartsTooltipCell = StyledComponent<
+  Pick<
+    TypographyOwnProps &
+      CommonProps &
+      Omit<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+        | 'color'
+        | 'className'
+        | 'classes'
+        | 'sx'
+        | 'style'
+        | 'children'
+        | 'variant'
+        | 'align'
+        | 'gutterBottom'
+        | 'noWrap'
+        | 'variantMapping'
+      >,
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'classes'
+    | 'sx'
+    | 'style'
+    | 'ref'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'variant'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'gutterBottom'
+    | 'noWrap'
+    | 'variantMapping'
+  > &
+    MUIStyledCommonProps<Theme> & { component?: React.ElementType },
+  {},
+  {}
+>;
+```
+
+### chartsTooltipClasses
+
+```typescript
+type chartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClasses
+
+```typescript
+type ChartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClassKey
+
+```typescript
+type ChartsTooltipClassKey = 'root' | 'paper' | 'table' | 'row' | 'cell' | 'mark' | 'axisValueCell';
+```
+
+### ChartsTooltipContainerClasses
+
+```typescript
+type ChartsTooltipContainerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipContainerProps
+
+```typescript
+type ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  children?: React.ReactNode;
+};
+```
+
+### ChartsTooltipContainerSlotProps
+
+```typescript
+type ChartsTooltipContainerSlotProps = {};
+```
+
+### ChartsTooltipContainerSlots
+
+```typescript
+type ChartsTooltipContainerSlots = {};
+```
+
+### ChartsTooltipPaper
+
+```typescript
+type ChartsTooltipPaper = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipProps
+
+```typescript
+type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'axis' | 'none' | 'item';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### ChartsTooltipRow
+
+```typescript
+type ChartsTooltipRow = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipSlotProps
+
+```typescript
+type ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<ChartsTooltipProps<T>>;
+};
+```
+
+### ChartsTooltipSlots
+
+```typescript
+type ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    ChartsTooltipProps<T>,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipTable
+
+```typescript
+type ChartsTooltipTable = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'width'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'border'
+    | 'bgcolor'
+    | 'hidden'
+    | 'title'
+    | 'summary'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'frame'
+    | 'rules'
+  >,
+  {}
+>;
+```
+
+### ChartsTypeFeatureFlags
+
+```typescript
+type ChartsTypeFeatureFlags = {};
+```
+
+### ChartsXAxisProps
+
+```typescript
+type ChartsXAxisProps = {
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsXAxisSlotProps
+
+```typescript
+type ChartsXAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsXAxisSlots
+
+```typescript
+type ChartsXAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsXReferenceLineProps
+
+```typescript
+type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: TValue;
+};
+```
+
+### ChartsYAxisProps
+
+```typescript
+type ChartsYAxisProps = {
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsYAxisSlotProps
+
+```typescript
+type ChartsYAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsYAxisSlots
+
+```typescript
+type ChartsYAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsYReferenceLineProps
+
+```typescript
+type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: TValue;
+};
+```
+
+### cheerfulFiestaPaletteDark
+
+```typescript
+type cheerfulFiestaPaletteDark = string[];
+```
+
+### cheerfulFiestaPaletteLight
+
+```typescript
+type cheerfulFiestaPaletteLight = string[];
+```
+
+### ColorLegendSelector
+
+```typescript
+type ColorLegendSelector = {
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### ComputedPieRadius
+
+Props received when the parent components has done the percentage conversion.
+
+```typescript
+type ComputedPieRadius = {
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### configurationOptions
+
+```typescript
+type configurationOptions = {
+  [key: string]: {
+    label: string;
+    icon: (props: any) => React.ReactNode;
+    customization: GridChartsConfigurationSection[];
+    dimensionsLabel?: string;
+    valuesLabel?: string;
+    maxDimensions?: number;
+    maxValues?: number;
+  };
+};
+```
+
+### continuousColorLegendClasses
+
+```typescript
+type continuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendClasses
+
+```typescript
+type ContinuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendProps
+
+```typescript
+type ContinuousColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness?: number;
+};
+```
+
+### ContinuousScaleName
+
+```typescript
+type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
+```
+
+### CurveType
+
+The type of curve to use for the line.
+Read more about curves at
+[line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+
+```typescript
+type CurveType =
+  | 'catmullRom'
+  | 'linear'
+  | 'monotoneX'
+  | 'monotoneY'
+  | 'natural'
+  | 'step'
+  | 'stepBefore'
+  | 'stepAfter'
+  | 'bumpY'
+  | 'bumpX';
+```
+
+### cyanPaletteDark
+
+```typescript
+type cyanPaletteDark = string[];
+```
+
+### cyanPaletteLight
+
+```typescript
+type cyanPaletteLight = string[];
+```
+
+### DEFAULT_AXIS_SIZE_HEIGHT
+
+```typescript
+type DEFAULT_AXIS_SIZE_HEIGHT = 25;
+```
+
+### DEFAULT_AXIS_SIZE_WIDTH
+
+```typescript
+type DEFAULT_AXIS_SIZE_WIDTH = 45;
+```
+
+### DEFAULT_MARGINS
+
+```typescript
+type DEFAULT_MARGINS = { top: number; bottom: number; left: number; right: number };
+```
+
+### DEFAULT_RADIUS_AXIS_KEY
+
+```typescript
+type DEFAULT_RADIUS_AXIS_KEY = 'DEFAULT_RADIUS_AXIS_KEY';
+```
+
+### DEFAULT_ROTATION_AXIS_KEY
+
+```typescript
+type DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
+```
+
+### DEFAULT_X_AXIS_KEY
+
+```typescript
+type DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
+```
+
+### DEFAULT_Y_AXIS_KEY
+
+```typescript
+type DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+```
+
+### DefaultizedBarSeriesType
+
+```typescript
+type DefaultizedBarSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+};
+```
+
+### DefaultizedFunnelSeriesType
+
+```typescript
+type DefaultizedFunnelSeriesType = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### DefaultizedHeatmapSeriesType
+
+```typescript
+type DefaultizedHeatmapSeriesType = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### DefaultizedLineSeriesType
+
+```typescript
+type DefaultizedLineSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedOHLCSeriesType
+
+```typescript
+type DefaultizedOHLCSeriesType = {
+  hidden: boolean;
+  /** The color of the candle body when the close price is greater than or equal to the open price. */
+  upColor: string;
+  /** The color of the candle body when the close price is less than the open price. */
+  downColor: string;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  type: 'ohlc';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /** The id of this series. */
+  id: string;
+  /** The OHLC data points. */
+  data: (OHLCValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedPieSeriesType
+
+```typescript
+type DefaultizedPieSeriesType = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### DefaultizedPieValueType
+
+```typescript
+type DefaultizedPieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  color: string;
+  formattedValue: string;
+  hidden: boolean;
+};
+```
+
+### DefaultizedRadarSeriesType
+
+```typescript
+type DefaultizedRadarSeriesType = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedRangeBarSeriesType
+
+```typescript
+type DefaultizedRangeBarSeriesType = {
+  hidden: boolean;
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  type: 'rangeBar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each range bar. */
+  data: (RangeBarValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<RangeBarValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+};
+```
+
+### DefaultizedScatterSeriesType
+
+```typescript
+type DefaultizedScatterSeriesType = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### DefaultizedSeriesType
+
+```typescript
+type DefaultizedSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: CommonHighlightScope | SankeyHighlightScope;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | number[]
+    | (RangeBarValueType | null)[]
+    | (OHLCValueType | null)[]
+    | DefaultizedPieValueType[]
+    | MakeRequired<FunnelValueType, 'id' | 'color'>[]
+    | SankeyLayout<false>;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null)
+    | SeriesValueFormatter<RangeBarValueType | null>
+    | ((value: number | null, context: { dataIndex: number; field: OHLCField }) => string | null)
+    | SeriesValueFormatter<PieValueType>;
+};
+```
+
+### defaultSeriesConfigPremium
+
+```typescript
+type defaultSeriesConfigPremium = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+  rangeBar: ChartSeriesTypeConfig<'rangeBar'>;
+  ohlc: ChartSeriesTypeConfig<'ohlc'>;
+};
+```
+
+### defaultSeriesConfigPro
+
+```typescript
+type defaultSeriesConfigPro = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+};
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### FadeOptions
+
+```typescript
+type FadeOptions = 'none' | 'series' | 'global';
+```
+
+### FocusedItemIdentifier
+
+```typescript
+type FocusedItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### FUNNEL_CHART_PLUGINS
+
+```typescript
+type FUNNEL_CHART_PLUGINS = [
+  ChartPlugin<UseChartFunnelAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'funnel'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'funnel'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'funnel'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### FunnelChartPluginSignatures
+
+```typescript
+type FunnelChartPluginSignatures = FunnelChartPluginSignatures;
+```
+
+### FunnelChartProps
+
+````typescript
+type FunnelChartProps = {
+  /**
+   * The series to display in the funnel chart.
+   * An array of [[FunnelSeries]] objects.
+   */
+  series: FunnelSeries[];
+  /**
+   * The configuration of the category axis.
+   * @default { position: 'none' }
+   */
+  categoryAxis?: CategoryAxis;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: FunnelItemIdentifier | Omit<FunnelItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: FunnelItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { funnel: ChartSeriesTypeConfig<'funnel'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all funnel elements at the current position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'funnel';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'funnel';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+````
+
+### FunnelChartSlotExtension
+
+```typescript
+type FunnelChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+```
+
+### FunnelChartSlotProps
+
+```typescript
+type FunnelChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### FunnelChartSlots
+
+```typescript
+type FunnelChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### funnelClasses
+
+```typescript
+type funnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClasses
+
+```typescript
+type FunnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClassKey
+
+```typescript
+type FunnelClassKey = 'root' | 'section' | 'sectionLabel' | 'sectionFilled' | 'sectionOutlined';
+```
+
+### FunnelCurveType
+
+```typescript
+type FunnelCurveType = 'linear' | 'linear-sharp' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+```
+
+### FunnelDataPoints
+
+```typescript
+type FunnelDataPoints = Record<'x' | 'y', number> & { useBandWidth: boolean; stackOffset: number };
+```
+
+### FunnelItem
+
+```typescript
+type FunnelItem = {
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number;
+};
+```
+
+### FunnelItemId
+
+```typescript
+type FunnelItemId = string | number;
+```
+
+### FunnelItemIdentifier
+
+An object that allows to identify a funnel item.
+Used for item interaction
+
+```typescript
+type FunnelItemIdentifier = {
+  type: 'funnel';
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+};
+```
+
+### FunnelLabelOptions
+
+```typescript
+type FunnelLabelOptions = {
+  /**
+   * The position of the label.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  position?: Position;
+  /**
+   * The text anchor of the label. Affects the horizontal alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  textAnchor?: 'start' | 'middle' | 'end';
+  /**
+   * The dominant baseline of the label. Affects the vertical alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  dominantBaseline?:
+    | 'auto'
+    | 'baseline'
+    | 'hanging'
+    | 'middle'
+    | 'central'
+    | 'text-after-edge'
+    | 'text-before-edge';
+  /**
+   * The offset of the label from the anchor point.
+   * If a single number is provided, the offset will be applied in both directions.
+   * @default 0
+   */
+  offset?: number | { x?: number; y?: number };
+};
+```
+
+### FunnelPlotProps
+
+```typescript
+type FunnelPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotExtension
+
+```typescript
+type FunnelPlotSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotProps
+
+```typescript
+type FunnelPlotSlotProps = {
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+};
+```
+
+### FunnelPlotSlots
+
+```typescript
+type FunnelPlotSlots = {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### FunnelScaleName
+
+```typescript
+type FunnelScaleName = Exclude<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  'point'
+>;
+```
+
+### FunnelSection
+
+```typescript
+type FunnelSection = unknown;
+```
+
+### FunnelSectionLabel
+
+```typescript
+type FunnelSectionLabel = unknown;
+```
+
+### FunnelSeries
+
+```typescript
+type FunnelSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  type?: 'funnel';
+};
+```
+
+### FunnelSeriesType
+
+```typescript
+type FunnelSeriesType = {
+  type: 'funnel';
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### FunnelValueType
+
+```typescript
+type FunnelValueType = {
+  /** A unique identifier of the funnel section. */
+  id?: FunnelItemId;
+  /** The value of the funnel section. */
+  value: number;
+  /** The label to display on the tooltip, funnel section, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
+  /** The color of the funnel section */
+  color?: string;
+  /**
+   * Defines the mark type for the funnel item.
+   * @default 'square'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### gaugeClasses
+
+```typescript
+type gaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClasses
+
+```typescript
+type GaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClassKey
+
+```typescript
+type GaugeClassKey = 'root' | 'valueArc' | 'referenceArc' | 'valueText';
+```
+
+### GaugeContainerProps
+
+```typescript
+type GaugeContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+};
+```
+
+### GaugeFormatterParams
+
+```typescript
+type GaugeFormatterParams = { value: number | null; valueMin: number; valueMax: number };
+```
+
+### GaugeProps
+
+```typescript
+type GaugeProps = {
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+};
+```
+
+### GaugeValueTextProps
+
+```typescript
+type GaugeValueTextProps = {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### greenPaletteDark
+
+```typescript
+type greenPaletteDark = string[];
+```
+
+### greenPaletteLight
+
+```typescript
+type greenPaletteLight = string[];
+```
+
+### GridChartsConfigurationOptions
+
+```typescript
+type GridChartsConfigurationOptions = {
+  [key: string]: {
+    label: string;
+    icon: (props: any) => React.ReactNode;
+    customization: GridChartsConfigurationSection[];
+    dimensionsLabel?: string;
+    valuesLabel?: string;
+    maxDimensions?: number;
+    maxValues?: number;
+  };
+};
+```
+
+### GridChartsConfigurationSection
+
+```typescript
+type GridChartsConfigurationSection = {
+  id: string;
+  label: string;
+  controls: { [key: string]: GridChartsConfigurationControl };
+};
+```
+
+### HEATMAP_PLUGINS
+
+```typescript
+type HEATMAP_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'heatmap'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'heatmap'>>,
+  ChartPlugin<UseChartHighlightSignature<'heatmap'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartItemClickSignature<'heatmap'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### HeatmapCellOwnerState
+
+```typescript
+type HeatmapCellOwnerState = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+  value: number;
+};
+```
+
+### HeatmapCellProps
+
+```typescript
+type HeatmapCellProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapCellOwnerState;
+};
+```
+
+### heatmapClasses
+
+```typescript
+type heatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClasses
+
+```typescript
+type HeatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClassKey
+
+```typescript
+type HeatmapClassKey = 'root' | 'series' | 'highlighted' | 'faded' | 'cell';
+```
+
+### HeatmapItemIdentifier
+
+An object that allows to identify a single cell.
+Used for item interaction
+
+```typescript
+type HeatmapItemIdentifier = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+};
+```
+
+### HeatmapItemIdentifierWithData
+
+The cell identifier with the associated data value.
+
+```typescript
+type HeatmapItemIdentifierWithData = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+  /** The value of the cell. Null if there is no data associated. */
+  value: number | null;
+};
+```
+
+### HeatmapPlotProps
+
+```typescript
+type HeatmapPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapPlotSlotProps;
+};
+```
+
+### HeatmapPlotSlotProps
+
+```typescript
+type HeatmapPlotSlotProps = { cell?: Partial<HeatmapCellProps> };
+```
+
+### HeatmapPlotSlots
+
+```typescript
+type HeatmapPlotSlots = {
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+};
+```
+
+### HeatmapPluginSignatures
+
+```typescript
+type HeatmapPluginSignatures = HeatmapPluginSignatures;
+```
+
+### HeatmapPremiumProps
+
+```typescript
+type HeatmapPremiumProps = {
+  /**
+   * The type of renderer to use for the heatmap plot.
+   * - `svg-single`: Renders every scatter item in a `<rect />` element.
+   * - `webgl`: Renders heatmap cells using WebGL for better performance, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/heatmap/#performance
+   */
+  renderer?: 'svg-single' | 'webgl';
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapPremiumSlotProps
+
+```typescript
+type HeatmapPremiumSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapPremiumSlots
+
+```typescript
+type HeatmapPremiumSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### HeatmapProps
+
+```typescript
+type HeatmapProps = {
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapSeries
+
+```typescript
+type HeatmapSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  type?: 'heatmap';
+};
+```
+
+### HeatmapSeriesType
+
+```typescript
+type HeatmapSeriesType = {
+  type: 'heatmap';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The id of this series. */
+  id?: SeriesId;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### HeatmapSlotProps
+
+```typescript
+type HeatmapSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapSlots
+
+```typescript
+type HeatmapSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### HeatmapTooltipClasses
+
+```typescript
+type HeatmapTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentClasses
+
+```typescript
+type HeatmapTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentProps
+
+```typescript
+type HeatmapTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+};
+```
+
+### HeatmapTooltipProps
+
+```typescript
+type HeatmapTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer';
+};
+```
+
+### HeatmapTooltipSlotProps
+
+```typescript
+type HeatmapTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<HeatmapTooltipProps>;
+};
+```
+
+### HeatmapTooltipSlots
+
+```typescript
+type HeatmapTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### HeatmapValueType
+
+```typescript
+type HeatmapValueType = HeatmapValueType;
+```
+
+### HighlightItemIdentifier
+
+Identifies an highlighted item or series.
+
+```typescript
+type HighlightItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightItemIdentifierWithType
+
+```typescript
+type HighlightItemIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightOptions
+
+```typescript
+type HighlightOptions = 'none' | 'item' | 'series';
+```
+
+### HighlightScope
+
+```typescript
+type HighlightScope = CommonHighlightScope | SankeyHighlightScope;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
+
+### ItemTooltip
+
+```typescript
+type ItemTooltip<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | RangeBarValueType
+    | OHLCValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### labelClasses
+
+```typescript
+type labelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### labelGradientClasses
+
+```typescript
+type labelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### labelMarkClasses
+
+```typescript
+type labelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### legendClasses
+
+```typescript
+type legendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### LegendItemContext
+
+```typescript
+type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+```
+
+### LegendItemParams
+
+```typescript
+type LegendItemParams = {
+  /** The type of the series */
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  markType: ChartsLabelMarkType | undefined;
+  /** The identifier of the series */
+  seriesId?: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The minimum value of the category */
+  minValue?: number | Date | null;
+  /** The maximum value of the category */
+  maxValue?: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LINE_CHART_PRO_PLUGINS
+
+```typescript
+type LINE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProPluginSignatures
+
+```typescript
+type LineChartProPluginSignatures = LineChartProPluginSignatures;
+```
+
+### LineChartProProps
+
+````typescript
+type LineChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'line'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+    ChartPlugin<UseChartHighlightSignature<'line'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartProSlotProps
+
+```typescript
+type LineChartProSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### LineChartProSlots
+
+```typescript
+type LineChartProSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'line'
+  | 'area'
+  | 'mark'
+  | 'highlight'
+  | 'markAnimate'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LineItemIdentifier
+
+An object that allows to identify a single line.
+Used for item interaction
+
+```typescript
+type LineItemIdentifier = {
+  type: 'line';
+  seriesId: string;
+  /** `dataIndex` can be `undefined` if the mouse is over the area and not a specific item. */
+  dataIndex?: number;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### LineSeriesType
+
+```typescript
+type LineSeriesType = {
+  type: 'line';
+  /** Data associated to the line. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### mangoFusionPaletteDark
+
+```typescript
+type mangoFusionPaletteDark = string[];
+```
+
+### mangoFusionPaletteLight
+
+```typescript
+type mangoFusionPaletteLight = string[];
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  seriesId: string;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
+
+### NumberValue
+
+```typescript
+type NumberValue = NumberValue;
+```
+
+### OHLCField
+
+The OHLC fields that can be formatted individually.
+
+```typescript
+type OHLCField = 'open' | 'high' | 'low' | 'close';
+```
+
+### OHLCFormattedValue
+
+The structured formatted tooltip value for OHLC series.
+
+```typescript
+type OHLCFormattedValue = {
+  open: string | null;
+  high: string | null;
+  low: string | null;
+  close: string | null;
+};
+```
+
+### OHLCItemIdentifier
+
+An object that allows to identify a single bar.
+Used for item interaction
+
+```typescript
+type OHLCItemIdentifier = { type: 'ohlc'; seriesId: string; dataIndex: number };
+```
+
+### OHLCSeries
+
+```typescript
+type OHLCSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /** The OHLC data points. */
+  data?: (OHLCValueType | null)[];
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default (mode) =>  mode === 'dark' ? '#66bb6a' : '#2e7d32'
+   */
+  upColor?: ChartsColor;
+  /**
+   * The color of the candle body when the close price is less than the open price.
+   * @default (mode) =>  mode === 'dark' ? '#f44336' : '#d32f2f'
+   */
+  downColor?: ChartsColor;
+  type?: 'ohlc';
+};
+```
+
+### OHLCSeriesType
+
+```typescript
+type OHLCSeriesType = {
+  type: 'ohlc';
+  /** The OHLC data points. */
+  data?: (OHLCValueType | null)[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default (mode) =>  mode === 'dark' ? '#66bb6a' : '#2e7d32'
+   */
+  upColor?: ChartsColor;
+  /**
+   * The color of the candle body when the close price is less than the open price.
+   * @default (mode) =>  mode === 'dark' ? '#f44336' : '#d32f2f'
+   */
+  downColor?: ChartsColor;
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### OHLCTooltipValue
+
+The structured tooltip value for OHLC series.
+
+```typescript
+type OHLCTooltipValue = { open: string; high: string; low: string; close: string };
+```
+
+### OHLCValueType
+
+Type representing the values of a single OHLC element.
+The array contains four numbers in the following order:
+\[open, high, low, close].
+
+```typescript
+type OHLCValueType = OHLCValueType;
+```
+
+### orangePaletteDark
+
+```typescript
+type orangePaletteDark = string[];
+```
+
+### orangePaletteLight
+
+```typescript
+type orangePaletteLight = string[];
+```
+
+### OrdinalTimeTicks
+
+```typescript
+type OrdinalTimeTicks = (TickFrequencyDefinition | TickFrequency)[];
+```
+
+### PIE_CHART_PLUGINS
+
+```typescript
+type PIE_CHART_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### PIE_CHART_PRO_PLUGINS
+
+```typescript
+type PIE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### PieArcLabelPlotProps
+
+```typescript
+type PieArcLabelPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcLabelPlotSlotProps
+
+```typescript
+type PieArcLabelPlotSlotProps = { pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PieArcLabelPlotSlots
+
+```typescript
+type PieArcLabelPlotSlots = { pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps> };
+```
+
+### PieArcLabelProps
+
+```typescript
+type PieArcLabelProps = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  classes?: Partial<PieClasses>;
+  startAngle: number;
+  endAngle: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+  hidden?: boolean;
+};
+```
+
+### PieArcOwnerState
+
+```typescript
+type PieArcOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+};
+```
+
+### PieArcPlotProps
+
+```typescript
+type PieArcPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcPlotSlotProps
+
+```typescript
+type PieArcPlotSlotProps = { pieArc?: Partial<PieArcProps> };
+```
+
+### PieArcPlotSlots
+
+```typescript
+type PieArcPlotSlots = { pieArc?: React.JSXElementConstructor<PieArcProps> };
+```
+
+### PieArcProps
+
+```typescript
+type PieArcProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** If `true`, the animation is disabled. */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
+};
+```
+
+### piecewiseColorLegendClasses
+
+```typescript
+type piecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendClasses
+
+```typescript
+type PiecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendItemContext
+
+```typescript
+type PiecewiseColorLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'piecewiseColor';
+  /** The minimum value of the category */
+  minValue: number | Date | null;
+  /** The maximum value of the category */
+  maxValue: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendProps
+
+```typescript
+type PiecewiseColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @returns The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the color marks.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: PiecewiseColorLegendItemContext,
+    index: number,
+  ) => void;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### PiecewiseLabelFormatterParams
+
+```typescript
+type PiecewiseLabelFormatterParams = {
+  /** The index of the entry. */
+  index: number;
+  /** The length of the entries array. */
+  length: number;
+  /** The min value of the piece. `null` is infinite. */
+  min: number | Date | null;
+  /** The max value of the piece. `null` is infinite. */
+  max: number | Date | null;
+  /** The formatted min value of the piece. `null` is infinite. */
+  formattedMin: string | null;
+  /** The formatted max value of the piece. `null` is infinite. */
+  formattedMax: string | null;
+};
+```
+
+### PieChartPluginSignatures
+
+```typescript
+type PieChartPluginSignatures = PieChartPluginSignatures;
+```
+
+### PieChartProPluginSignatures
+
+```typescript
+type PieChartProPluginSignatures = PieChartProPluginSignatures;
+```
+
+### PieChartProProps
+
+````typescript
+type PieChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+};
+````
+
+### PieChartProps
+
+````typescript
+type PieChartProps = {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### PieChartProSlotProps
+
+```typescript
+type PieChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### PieChartProSlots
+
+```typescript
+type PieChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### PieChartSlotProps
+
+```typescript
+type PieChartSlotProps = {
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### PieChartSlots
+
+```typescript
+type PieChartSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### pieClasses
+
+```typescript
+type pieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClasses
+
+```typescript
+type PieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClassKey
+
+```typescript
+type PieClassKey =
+  | 'root'
+  | 'arc'
+  | 'series'
+  | 'arcLabel'
+  | 'animate'
+  | 'seriesLabels'
+  | 'focusIndicator';
+```
+
+### PieItemId
+
+```typescript
+type PieItemId = string | number;
+```
+
+### PieItemIdentifier
+
+An object that allows to identify a single pie slice.
+Used for item interaction
+
+```typescript
+type PieItemIdentifier = { type: 'pie'; seriesId: string; dataIndex: number };
+```
+
+### PiePlotProps
+
+```typescript
+type PiePlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+};
+```
+
+### PiePlotSlotProps
+
+```typescript
+type PiePlotSlotProps = { pieArc?: Partial<PieArcProps>; pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PiePlotSlots
+
+```typescript
+type PiePlotSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+};
+```
+
+### PieSeries
+
+```typescript
+type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
+```
+
+### PieSeriesLayout
+
+Layout information computed from the pie series and the drawing area.
+
+```typescript
+type PieSeriesLayout = {
+  /** The pie center coordinate in px. */
+  center: { x: number; y: number };
+  /**
+   * The pie radius in px.
+   * Computed based on the drawing area and the center placement.
+   */
+  radius: {
+    /**
+     * The maximum available radius in px.
+     * Correspond to radius='100%'.
+     */
+    available: number;
+    /** The pie inner radius in px, except if overridden by item state (highlight/faded). */
+    inner: number;
+    /** The pie outer radius in px, except if overridden by item state (highlight/faded). */
+    outer: number;
+    /** The pie label radius in px, except if overridden by item state (highlight/faded). */
+    label: number;
+  };
+};
+```
+
+### PieSeriesType
+
+```typescript
+type PieSeriesType<TData = PieValueType> = {
+  type: 'pie';
+  data: TData[];
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<TData>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<SeriesType>;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<TData>) => string;
+};
+```
+
+### PieValueType
+
+```typescript
+type PieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### pinkPaletteDark
+
+```typescript
+type pinkPaletteDark = string[];
+```
+
+### pinkPaletteLight
+
+```typescript
+type pinkPaletteLight = string[];
+```
+
+### Position
+
+```typescript
+type Position = {
+  /** The vertical position. */
+  vertical?: 'top' | 'middle' | 'bottom';
+  /** The horizontal position. */
+  horizontal?: 'start' | 'center' | 'end';
+};
+```
+
+### PropsFromSlot
+
+```typescript
+type PropsFromSlot =
+  | P
+  | React.ComponentProps<
+      NonNullable<React.JSXElementConstructor<any> | React.ElementType | null | undefined>
+    >;
+```
+
+### purplePaletteDark
+
+```typescript
+type purplePaletteDark = string[];
+```
+
+### purplePaletteLight
+
+```typescript
+type purplePaletteLight = string[];
+```
+
+### RADAR_CHART_PRO_PLUGINS
+
+```typescript
+type RADAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'radar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature>,
+  ChartPlugin<UseChartHighlightSignature<'radar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### RADAR_PLUGINS
+
+```typescript
+type RADAR_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<any>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature<any>>,
+  ChartPlugin<UseChartHighlightSignature<any>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<any>>,
+];
+```
+
+### RadarAxisHighlightProps
+
+```typescript
+type RadarAxisHighlightProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<
+    Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>
+  >;
+};
+```
+
+### RadarAxisProps
+
+```typescript
+type RadarAxisProps = {
+  /**
+   * Defines how label align with the axis.
+   * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
+   * - 'rotated': labels are rotated 90deg relatively to their axis.
+   * @default 'horizontal'
+   */
+  labelOrientation?: 'horizontal' | 'rotated';
+  /** The labels text anchor or a function returning the text anchor for a given axis angle (in degree). */
+  textAnchor?:
+    | 'start'
+    | 'middle'
+    | 'end'
+    | 'inherit'
+    | ((angle: number) => 'start' | 'end' | 'middle' | 'inherit' | undefined);
+  /** The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree). */
+  dominantBaseline?:
+    | 'auto'
+    | 'use-script'
+    | 'no-change'
+    | 'reset-size'
+    | 'ideographic'
+    | 'alphabetic'
+    | 'hanging'
+    | 'mathematical'
+    | 'central'
+    | 'middle'
+    | 'text-after-edge'
+    | 'text-before-edge'
+    | 'inherit'
+    | ((
+        angle: number,
+      ) =>
+        | 'auto'
+        | 'middle'
+        | 'alphabetic'
+        | 'hanging'
+        | 'ideographic'
+        | 'mathematical'
+        | 'central'
+        | 'text-after-edge'
+        | 'text-before-edge'
+        | 'inherit'
+        | 'use-script'
+        | 'no-change'
+        | 'reset-size'
+        | undefined);
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<Pick<RadarClasses, 'axisLine' | 'axisLabel' | 'axisRoot'>>;
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### RadarChartPluginSignatures
+
+```typescript
+type RadarChartPluginSignatures = RadarChartPluginSignatures;
+```
+
+### RadarChartProPluginSignatures
+
+```typescript
+type RadarChartProPluginSignatures = RadarChartProPluginSignatures;
+```
+
+### RadarChartProProps
+
+````typescript
+type RadarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'radar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartPolarAxisSignature>,
+    ChartPlugin<UseChartHighlightSignature<'radar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+};
+````
+
+### RadarChartProps
+
+````typescript
+type RadarChartProps = {
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+};
+````
+
+### RadarChartProSlotProps
+
+```typescript
+type RadarChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### RadarChartProSlots
+
+```typescript
+type RadarChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### RadarChartSlotProps
+
+```typescript
+type RadarChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### RadarChartSlots
+
+```typescript
+type RadarChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### radarClasses
+
+```typescript
+type radarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClasses
+
+```typescript
+type RadarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClassKey
+
+```typescript
+type RadarClassKey =
+  | 'axisLine'
+  | 'axisLabel'
+  | 'axisRoot'
+  | 'gridRadial'
+  | 'gridDivider'
+  | 'gridStripe'
+  | 'seriesRoot'
+  | 'seriesArea'
+  | 'seriesMark'
+  | 'axisHighlightRoot'
+  | 'axisHighlightLine'
+  | 'axisHighlightDot';
+```
+
+### RadarDataProviderProps
+
+```typescript
+type RadarDataProviderProps<
+  TSignatures extends ChartAnyPluginSignature[] = RadarChartPluginSignatures,
+> = {
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [] | [ChartPlugin<ChartAnyPluginSignature>];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** Slots to customize charts' components. */
+  slots?: Partial<ChartsDataProviderSlots>;
+  /** The props for the slots. */
+  slotProps?: Partial<ChartsDataProviderSlotProps>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?:
+    | string
+    | number
+    | bigint
+    | boolean
+    | ReactElement
+    | Iterable<React.ReactNode, any, any>
+    | React.ReactPortal
+    | Promise<AwaitedReactNode>
+    | null;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: number | Partial<ChartMargin>;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: {};
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+};
+```
+
+### RadarGridProps
+
+```typescript
+type RadarGridProps = {
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+};
+```
+
+### RadarItemIdentifier
+
+An object that allows to identify either a radar series or a radar point (if dataIndex is defined).
+Used for item interaction
+
+```typescript
+type RadarItemIdentifier = { type: 'radar'; seriesId: string; dataIndex?: number };
+```
+
+### RadarSeries
+
+```typescript
+type RadarSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  type?: 'radar';
+};
+```
+
+### RadarSeriesAreaProps
+
+```typescript
+type RadarSeriesAreaProps = {
+  /** Callback fired when an area is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesMarksProps
+
+```typescript
+type RadarSeriesMarksProps = {
+  /** Callback fired when a mark is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesPlotProps
+
+```typescript
+type RadarSeriesPlotProps = {
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesType
+
+```typescript
+type RadarSeriesType = {
+  type: 'radar';
+  data: number[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+};
+```
+
+### RadiusAxis
+
+```typescript
+type RadiusAxis<S extends 'linear' = 'linear', V = any> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * The minimal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  min?: number;
+  /**
+   * The maximal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  max?: number;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The minimal radius. */
+  minRadius?: number;
+  /** The maximal radius. */
+  maxRadius?: number;
+  colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### rainbowSurgePaletteDark
+
+```typescript
+type rainbowSurgePaletteDark = string[];
+```
+
+### rainbowSurgePaletteLight
+
+```typescript
+type rainbowSurgePaletteLight = string[];
+```
+
+### rangeBarClasses
+
+```typescript
+type rangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClasses
+
+```typescript
+type RangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClassKey
+
+```typescript
+type RangeBarClassKey = 'root' | 'series' | 'seriesLabels';
+```
+
+### RangeBarItemIdentifier
+
+An object that allows to identify a range bar.
+Used for item interaction
+
+```typescript
+type RangeBarItemIdentifier = { type: 'rangeBar'; seriesId: string; dataIndex: number };
+```
+
+### RangeBarPlotProps
+
+```typescript
+type RangeBarPlotProps = {
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    barItemIdentifier: RangeBarItemIdentifier,
+  ) => void;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RangeBarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RangeBarPlotSlots;
+};
+```
+
+### RangeBarPlotSlotProps
+
+```typescript
+type RangeBarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### RangeBarPlotSlots
+
+```typescript
+type RangeBarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### RangeBarSeries
+
+```typescript
+type RangeBarSeries = {
+  type: 'rangeBar';
+  /** Data associated to each range bar. */
+  data?: (RangeBarValueType | null)[];
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<RangeBarValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### RangeBarSeriesType
+
+```typescript
+type RangeBarSeriesType = {
+  type: 'rangeBar';
+  /** Data associated to each range bar. */
+  data?: (RangeBarValueType | null)[];
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<RangeBarValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### RangeBarValueType
+
+\[start, end]
+
+```typescript
+type RangeBarValueType = RangeBarValueType;
+```
+
+### redPaletteDark
+
+```typescript
+type redPaletteDark = string[];
+```
+
+### redPaletteLight
+
+```typescript
+type redPaletteLight = string[];
+```
+
+### referenceLineClasses
+
+```typescript
+type referenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### RotationAxis
+
+```typescript
+type RotationAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The start angle (in deg). */
+  startAngle?: number;
+  /** The end angle (in deg). */
+  endAngle?: number;
+  /** The gap between the axis and the label. */
+  labelGap?: number;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### ScaleName
+
+```typescript
+type ScaleName = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### SCATTER_CHART_PLUGINS
+
+```typescript
+type SCATTER_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### SCATTER_CHART_PRO_PLUGINS
+
+```typescript
+type SCATTER_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### ScatterChartPluginSignatures
+
+```typescript
+type ScatterChartPluginSignatures = ScatterChartPluginSignatures;
+```
+
+### ScatterChartProPluginSignatures
+
+```typescript
+type ScatterChartProPluginSignatures = ScatterChartProPluginSignatures;
+```
+
+### ScatterChartProProps
+
+````typescript
+type ScatterChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+    ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+    ChartPlugin<UseChartClosestPointSignature>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### ScatterChartProps
+
+````typescript
+type ScatterChartProps = {
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartSlotProps;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+};
+````
+
+### ScatterChartProSlotProps
+
+```typescript
+type ScatterChartProSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ScatterChartProSlots
+
+```typescript
+type ScatterChartProSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ScatterChartSlotProps
+
+```typescript
+type ScatterChartSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ScatterChartSlots
+
+```typescript
+type ScatterChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### scatterClasses
+
+```typescript
+type scatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClasses
+
+```typescript
+type ScatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClassKey
+
+```typescript
+type ScatterClassKey = 'marker' | 'root' | 'series' | 'focusedMark';
+```
+
+### ScatterItemIdentifier
+
+An object that allows to identify a single scatter item.
+Used for item interaction
+
+```typescript
+type ScatterItemIdentifier = { type: 'scatter'; seriesId: string; dataIndex: number };
+```
+
+### ScatterMarkerProps
+
+```typescript
+type ScatterMarkerProps = {
+  /** The series ID. */
+  seriesId: string;
+  /** The index of the data point. */
+  dataIndex: number;
+  /** The x coordinate of the data point. */
+  x: number;
+  /** The y coordinate of the data point. */
+  y: number;
+  /** The fill color of the marker. */
+  color: string;
+  /** The size of the marker. */
+  size: number;
+  /** If `true`, the marker is highlighted. */
+  isHighlighted: boolean;
+  /** If `true`, the marker is faded. */
+  isFaded: boolean;
+  /** Callback fired when clicking on a scatter item. */
+  onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+};
+```
+
+### ScatterMarkerSlotExtension
+
+```typescript
+type ScatterMarkerSlotExtension = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterMarkerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterMarkerSlots;
+};
+```
+
+### ScatterMarkerSlotProps
+
+```typescript
+type ScatterMarkerSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterMarkerSlots
+
+```typescript
+type ScatterMarkerSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterPlotProps
+
+```typescript
+type ScatterPlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  classes?: Partial<ScatterClasses>;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+};
+```
+
+### ScatterPlotSlotProps
+
+```typescript
+type ScatterPlotSlotProps = { scatter?: Partial<ScatterProps>; marker?: ScatterMarkerProps };
+```
+
+### ScatterPlotSlots
+
+```typescript
+type ScatterPlotSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterProps
+
+```typescript
+type ScatterProps = {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: (dataIndex?: number) => string;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+  classes?: Partial<ScatterClasses>;
+  slots?: ScatterSlots;
+  slotProps?: ScatterSlotProps;
+};
+```
+
+### ScatterSeries
+
+```typescript
+type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
+```
+
+### ScatterSeriesType
+
+```typescript
+type ScatterSeriesType = {
+  type: 'scatter';
+  data?: ScatterValueType[];
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize?: number;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  preview?: { markerSize?: number };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<ScatterValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### ScatterSlotProps
+
+```typescript
+type ScatterSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterSlots
+
+```typescript
+type ScatterSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterValueType
+
+```typescript
+type ScatterValueType = {
+  x: number;
+  y: number;
+  z?: any;
+  /** A unique identifier for the scatter point */
+  id?: string | number;
+};
+```
+
+### SeriesId
+
+The unique identifier of a series.
+
+```typescript
+type SeriesId = string;
+```
+
+### SeriesItem
+
+```typescript
+type SeriesItem<
+  T extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar' | 'ohlc',
+> = {
+  seriesId: string;
+  color: string;
+  value:
+    | { open: number; high: number; low: number; close: number }
+    | number
+    | HeatmapValueType
+    | ScatterValueType
+    | RangeBarValueType
+    | OHLCValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkType | undefined;
+  markShape: MarkShape | undefined;
+};
+```
+
+### SeriesItemIdentifier
+
+```typescript
+type SeriesItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = { seriesId: string };
+```
+
+### SeriesItemIdentifierWithData
+
+```typescript
+type SeriesItemIdentifierWithData<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### SeriesItemIdentifierWithType
+
+```typescript
+type SeriesItemIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### SeriesLegendItemContext
+
+```typescript
+type SeriesLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'series';
+  /** The identifier of the series */
+  seriesId: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### SeriesLegendItemParams
+
+```typescript
+type SeriesLegendItemParams = {
+  /** The identifier of the series */
+  seriesId: string;
+  /** The type of the series */
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  markType: ChartsLabelMarkType | undefined;
+  markShape?: MarkShape;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### ShowMarkParams
+
+```typescript
+type ShowMarkParams<AxisValue = number | Date> = {
+  /** The item index. */
+  index: number;
+  /** The x coordinate in the SVG. */
+  x: number;
+  /** The y coordinate in the SVG. */
+  y: number;
+  /** The item position value. It likely comes from the axis `data` property. */
+  position: AxisValue;
+  /** The item value. It comes from the series `data` property. */
+  value: number;
+};
+```
+
+### SparkLineChartProps
+
+````typescript
+type SparkLineChartProps<PlotType extends 'bar' | 'line' = 'bar' | 'line'> = {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: XAxis;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: YAxis;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: 'bar' | 'line';
+  /** Data to plot. */
+  data: number[];
+  /**
+   * Formatter used by the tooltip.
+   * @default (value: number | null) => (value === null ? '' : value.toString())
+   * @returns the formatted value.
+   */
+  valueFormatter?: (value: number | null) => string;
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip?: boolean;
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area?: boolean;
+  /** @default 'linear' */
+  curve?: CurveType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SparkLineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SparkLineChartSlotProps;
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: { top?: number; right?: number; bottom?: number; left?: number };
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | BarItemIdentifier
+    | Omit<BarItemIdentifier, 'type'>
+    | LineItemIdentifier
+    | Omit<LineItemIdentifier, 'type'>
+    | ScatterItemIdentifier
+    | Omit<ScatterItemIdentifier, 'type'>
+    | PieItemIdentifier
+    | Omit<PieItemIdentifier, 'type'>
+    | RadarItemIdentifier
+    | Omit<RadarItemIdentifier, 'type'>
+    | HeatmapItemIdentifier
+    | Omit<HeatmapItemIdentifier, 'type'>
+    | FunnelItemIdentifier
+    | Omit<FunnelItemIdentifier, 'type'>
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | RangeBarItemIdentifier
+    | Omit<RangeBarItemIdentifier, 'type'>
+    | OHLCItemIdentifier
+    | Omit<OHLCItemIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (
+    tooltipItem:
+      | BarItemIdentifier
+      | LineItemIdentifier
+      | ScatterItemIdentifier
+      | PieItemIdentifier
+      | RadarItemIdentifier
+      | HeatmapItemIdentifier
+      | FunnelItemIdentifier
+      | SankeyItemIdentifier
+      | RangeBarItemIdentifier
+      | OHLCItemIdentifier
+      | null,
+  ) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'rangeBar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'rangeBar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem:
+      | SankeyItemIdentifier
+      | { type: 'bar'; seriesId: string; dataIndex?: number }
+      | { type: 'line'; seriesId: string; dataIndex?: number }
+      | { type: 'scatter'; seriesId: string; dataIndex?: number }
+      | { type: 'pie'; seriesId: string; dataIndex?: number }
+      | { type: 'radar'; seriesId: string; dataIndex?: number }
+      | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+      | { type: 'funnel'; seriesId: string; dataIndex?: number }
+      | { type: 'rangeBar'; seriesId: string; dataIndex?: number }
+      | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+      | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   */
+  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    bar: ChartSeriesTypeConfig<'bar'>;
+    line: ChartSeriesTypeConfig<'line'>;
+    scatter: ChartSeriesTypeConfig<'scatter'>;
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+    radar: ChartSeriesTypeConfig<'radar'>;
+    heatmap: ChartSeriesTypeConfig<'heatmap'>;
+    funnel: ChartSeriesTypeConfig<'funnel'>;
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+    rangeBar: ChartSeriesTypeConfig<'rangeBar'>;
+    ohlc: ChartSeriesTypeConfig<'ohlc'>;
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: (
+      | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+      | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+      | {
+          type?: 'scatter';
+          seriesId?: string;
+          dataIndex?: number;
+          seriesId: string;
+          type: 'scatter';
+        }
+      | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+      | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+      | {
+          type?: 'heatmap';
+          seriesId?: string;
+          xIndex?: number;
+          yIndex?: number;
+          seriesId: string;
+          type: 'heatmap';
+        }
+      | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'node';
+          nodeId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'link';
+          sourceId?: SankeyNodeId;
+          targetId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+      | {
+          type?: 'rangeBar';
+          seriesId?: string;
+          dataIndex?: number;
+          seriesId: string;
+          type: 'rangeBar';
+        }
+      | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    )[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'rangeBar';
+        seriesId?: string;
+        dataIndex?: number;
+        seriesId: string;
+        type: 'rangeBar';
+      }
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'rangeBar';
+        seriesId?: string;
+        dataIndex?: number;
+        seriesId: string;
+        type: 'rangeBar';
+      }
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /** If true, the hit area interaction is disabled and falls back to hover events. */
+  disableHitArea?: boolean;
+};
+````
+
+### SparkLineChartSlotProps
+
+```typescript
+type SparkLineChartSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SparkLineChartSlots
+
+```typescript
+type SparkLineChartSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### StackableChartSeriesType
+
+```typescript
+type StackableChartSeriesType = 'bar' | 'line';
+```
+
+### StackOffsetType
+
+```typescript
+type StackOffsetType = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';
+```
+
+### StackOrderType
+
+```typescript
+type StackOrderType = 'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';
+```
+
+### strawberrySkyPaletteDark
+
+```typescript
+type strawberrySkyPaletteDark = string[];
+```
+
+### strawberrySkyPaletteLight
+
+```typescript
+type strawberrySkyPaletteLight = string[];
+```
+
+### TickFrequency
+
+The predefined tick frequencies for time ordinal axes.
+
+- 'years': displays the year, placing ticks at the start of each year
+- 'quarterly': displays the month, placing ticks at the start of each quarter
+- 'months': displays the month, placing ticks at the start of each month
+- 'biweekly': displays the day, placing ticks every two weeks
+- 'weeks': displays the day, placing ticks at the start of each week
+- 'days': displays the day, placing ticks at the start of each day
+- 'hours': displays the hour and minutes, placing ticks at the start of each hour
+
+```typescript
+type TickFrequency = 'years' | 'quarterly' | 'months' | 'biweekly' | 'weeks' | 'days' | 'hours';
+```
+
+### TickFrequencyDefinition
+
+Definition of a tick frequency for time ordinal axes.
+
+```typescript
+type TickFrequencyDefinition = {
+  /**
+   * Returns the number of ticks in the given date range for this tick frequency.
+   * @returns The number of ticks in the [from, to] range.
+   */
+  getTickNumber: (from: Date, to: Date) => number;
+  /**
+   * Decides if the current date should be shown as a tick.
+   * @returns Whether the current date is a tick or not.
+   */
+  isTick: (prev: Date, value: Date) => boolean;
+  /**
+   * Format the tick value for display.
+   * @returns The formatted date string.
+   */
+  format: (date: Date) => string;
+};
+```
+
+### TickItem
+
+```typescript
+type TickItem = {
+  /**
+   * The value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  value?: any;
+  /**
+   * The formatted value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  formattedValue?: string;
+  /**
+   * The offset in pixels relative to the SVG origin.
+   * For an x-axis, it is relative to the left side of the SVG.
+   * For a y-axis, it is relative to the top side of the SVG.
+   */
+  offset: number;
+  /**
+   * The offset in pixels relative to the tick position.
+   * For an x-axis, a positive value means the label is shifted to the right of the tick.
+   * For a y-axis, a positive value means the label is shifted downwards from the tick.
+   */
+  labelOffset: number;
+};
+```
+
+### UseAnimateParams
+
+```typescript
+type UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = {}> = {
+  /**
+   * Function that returns the interpolation function for animating props.
+   * @returns
+   * Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   * @returns The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /** If `true`, the animation will be skipped and the final props will be applied immediately. */
+  skip?: boolean;
+  /** Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`. */
+  initialProps?: Props;
+  /** Optional ref to merge with the ref returned from this hook. */
+  ref?: React.Ref<Elem>;
+};
+```
+
+### UseAnimateReturn
+
+```typescript
+type UseAnimateReturn<Elem extends Element, T extends {}> = {
+  /** Ref to be passed to the element to animate. */
+  ref: React.Ref<Elem>;
+};
+```
+
+### UseAxesTooltipParams
+
+```typescript
+type UseAxesTooltipParams = {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+};
+```
+
+### UseAxesTooltipReturnValue
+
+```typescript
+type UseAxesTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar' | 'ohlc' = 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar', AxisValueT extends string | number | Date = string | number | Date> = { axisDirection: 'x' | 'y' | 'radius' | 'rotation';
+mainAxis: { /**
+ * ID used to identify the axis.
+ *
+ * The ID must be unique across all axes in this chart.
+ */
+id: AxisId;
+/** The data used by `'band'` and `'point'` scales. */
+data?: any[];
+/** The key used to retrieve `data` from the `dataset` prop. */
+dataKey?: string;
+/**
+ * A function to extract and transform the value from the `dataset` item.
+ * It receives the full dataset item and should return the axis value.
+ * Can be used as an alternative to `dataKey`.
+ * @returns The transformed value.
+ */
+valueGetter?: ((item: DatasetElementType<unknown>) => any);
+colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string); type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'piecewise'; thresholds: (number | Date)[]; colors: string[]; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) };
+/**
+ * Formats the axis value.
+ * @returns The string to display.
+ */
+valueFormatter?: (<TScaleName extends S>(value: any, context: AxisValueFormatterContext<TScaleName>) => string);
+/** The label of the axis. */
+label?: string;
+/** A CSS class name applied to the root element. */
+className?: string;
+/**
+ * If true, the axis line is disabled.
+ * @default false
+ */
+disableLine?: boolean;
+/**
+ * If true, the ticks are disabled.
+ * @default false
+ */
+disableTicks?: boolean;
+/** The style applied to ticks text. */
+tickLabelStyle?: ChartsTextStyle;
+/** The style applied to the axis label. */
+labelStyle?: ChartsTextStyle;
+/**
+ * Defines which ticks get its label displayed. Its value can be:
+ * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+ * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+ * @default 'auto'
+ */
+tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+/**
+ * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+ * @default 0
+ */
+tickSpacing?: number;
+/**
+ * The size of the ticks.
+ * @default 6
+ */
+tickSize?: number;
+/** Override or extend the styles applied to the component. */
+classes?: Partial<ChartsAxisClasses>;
+/**
+ * Overridable component slots.
+ * @default {}
+ */
+slots?: Partial<ChartsAxisSlots>;
+/**
+ * The props used for each component slot.
+ * @default {}
+ */
+slotProps?: Partial<ChartsAxisSlotProps>;
+sx?: SxProps;
+/**
+ * Maximal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMaxStep?: number;
+/**
+ * Minimal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMinStep?: number;
+/**
+ * The number of ticks. This number is not guaranteed.
+ * Not supported by categorical axis (band, points).
+ */
+tickNumber?: number;
+/**
+ * Defines which ticks are displayed.
+ * Its value can be:
+ * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+ * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+ * - an array containing the values where ticks should be displayed.
+ * @default 'auto'
+ * @see
+ */
+tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+/**
+ * The placement of ticks in regard to the band interval.
+ * Only used if scale is 'band'.
+ * @default 'extremities'
+ */
+tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+/**
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
+ * Only used if scale is 'band'.
+ * @default 'middle'
+ */
+tickLabelPlacement?: 'middle' | 'tick';
+/** If `true`, hide this value in the tooltip */
+hideTooltip?: boolean;
+/** If `true`, Reverse the axis scaleBand. */
+reverse?: boolean;
+/**
+ * Defines the axis scale domain based on the min/max values of series linked to it.
+ * - 'nice': Rounds the domain at human friendly values.
+ * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+ * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+ */
+domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+/** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+ignoreTooltip?: boolean;
+zoom?: boolean | ZoomOptions | false & DefaultizedZoomOptions | true & DefaultizedZoomOptions | { minStart?: number; maxEnd?: number; step?: number; minSpan?: number; maxSpan?: number; panning?: boolean; filterMode?: ZoomFilterMode; slider?: ZoomSliderOptions; axisId: AxisId; axisDirection: 'x' | 'y'; slider: DefaultedZoomSliderOptions; reverse: boolean; minStart: number; maxEnd: number; step: number; minSpan: number; maxSpan: number; panning: boolean; filterMode: ZoomFilterMode };
+/**
+ * The offset of the axis in pixels. It can be used to move the axis from its default position.
+ * X-axis: A top axis will move up, and a bottom axis will move down.
+ * Y-axis: A left axis will move left, and a right axis will move right.
+ * @default 0
+ */
+offset?: number;
+scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>;
+colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null, never> | ScaleThreshold<number, string | null, never>;
+/** Indicate if the axis should be consider by a tooltip with `trigger='axis'`. */
+triggerTooltip?: boolean };
+axisId: AxisId;
+axisValue: AxisValueT;
+axisFormattedValue: string;
+dataIndex: number;
+seriesItems: SeriesItem<SeriesType>[] }
+```
+
+### UseBarSeriesContextReturnValue
+
+```typescript
+type UseBarSeriesContextReturnValue = SeriesProcessorResult<'bar'>;
+```
+
+### UseBarSeriesReturnValue
+
+```typescript
+type UseBarSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UseChartCartesianAxisSignature
+
+```typescript
+type UseChartCartesianAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartCartesianAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartCartesianAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
+};
+```
+
+### UseChartClosestPointSignature
+
+```typescript
+type UseChartClosestPointSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVoronoiParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVoronoiDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartVoronoiInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVoronoiState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<SeriesType>,
+    UseChartTooltipSignature,
+  ];
+};
+```
+
+### UseChartHighlightSignature
+
+```typescript
+type UseChartHighlightSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartHighlightParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartHighlightDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartHighlightInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartHighlightState<SeriesType>;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartInteractionSignature
+
+```typescript
+type UseChartInteractionSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: {};
+  /** The params after being processed with the default values. */
+  defaultizedParams: {};
+  /** An imperative api available for internal use. */
+  instance: UseChartInteractionInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartInteractionState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartPolarAxisSignature
+
+```typescript
+type UseChartPolarAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartPolarAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartPolarAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartPolarAxisInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartPolarAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature];
+};
+```
+
+### UseChartProExportSignature
+
+```typescript
+type UseChartProExportSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProExportParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProExportParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProExportInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProExportState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProExportPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartProZoomSignature
+
+```typescript
+type UseChartProZoomSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProZoomParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProZoomDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProZoomInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProZoomState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProZoomPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartTooltipSignature
+
+```typescript
+type UseChartTooltipSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartTooltipParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartTooltipDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartTooltipInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartTooltipState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartVisibilityManagerInstance
+
+```typescript
+type UseChartVisibilityManagerInstance<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** Hide an item by its identifier. */
+  hideItem: hideItem;
+  /** Show an item by its identifier. */
+  showItem: showItem;
+  /** Toggle the visibility of an item by its identifier. */
+  toggleItemVisibility: toggleItemVisibility;
+};
+```
+
+### UseChartVisibilityManagerParameters
+
+````typescript
+type UseChartVisibilityManagerParameters<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifierWithType<SeriesType>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (VisibilityIdentifierWithType<SeriesType> | VisibilityIdentifier<SeriesType>)[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | VisibilityIdentifierWithType<SeriesType>
+    | VisibilityIdentifier<SeriesType>
+  )[];
+};
+````
+
+### UseChartVisibilityManagerSignature
+
+```typescript
+type UseChartVisibilityManagerSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVisibilityManagerParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartVisibilityManagerInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVisibilityManagerState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartZAxisSignature
+
+```typescript
+type UseChartZAxisSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartZAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartZAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartZAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseFunnelSeriesContextReturnValue
+
+```typescript
+type UseFunnelSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseFunnelSeriesReturnValue
+
+```typescript
+type UseFunnelSeriesReturnValue = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### UseHeatmapSeriesContextReturnValue
+
+```typescript
+type UseHeatmapSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseHeatmapSeriesReturnValue
+
+```typescript
+type UseHeatmapSeriesReturnValue = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### UseItemTooltipReturnValue
+
+```typescript
+type UseItemTooltipReturnValue<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | RangeBarValueType
+    | OHLCValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### UseLineSeriesContextReturnValue
+
+```typescript
+type UseLineSeriesContextReturnValue = SeriesProcessorResult<'line'>;
+```
+
+### UseLineSeriesReturnValue
+
+```typescript
+type UseLineSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UseOHLCSeriesContextReturnValue
+
+```typescript
+type UseOHLCSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseOHLCSeriesReturnValue
+
+```typescript
+type UseOHLCSeriesReturnValue = {
+  hidden: boolean;
+  /** The color of the candle body when the close price is greater than or equal to the open price. */
+  upColor: string;
+  /** The color of the candle body when the close price is less than the open price. */
+  downColor: string;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  type: 'ohlc';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /** The id of this series. */
+  id: string;
+  /** The OHLC data points. */
+  data: (OHLCValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### UsePieSeriesContextReturnValue
+
+```typescript
+type UsePieSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UsePieSeriesReturnValue
+
+```typescript
+type UsePieSeriesReturnValue = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### UseRadarAxisParams
+
+```typescript
+type UseRadarAxisParams = {
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### UseRadarItemTooltipReturnValue
+
+```typescript
+type UseRadarItemTooltipReturnValue = {
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+  values: ItemTooltipValue<'radar'>[];
+};
+```
+
+### UseRadarSeriesContextReturnValue
+
+```typescript
+type UseRadarSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseRadarSeriesReturnValue
+
+```typescript
+type UseRadarSeriesReturnValue = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### UseRangeBarSeriesContextReturnValue
+
+```typescript
+type UseRangeBarSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseRangeBarSeriesReturnValue
+
+```typescript
+type UseRangeBarSeriesReturnValue = {
+  hidden: boolean;
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  type: 'rangeBar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each range bar. */
+  data: (RangeBarValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<RangeBarValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+};
+```
+
+### UseScatterSeriesContextReturnValue
+
+```typescript
+type UseScatterSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseScatterSeriesReturnValue
+
+```typescript
+type UseScatterSeriesReturnValue = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### VisibilityIdentifier
+
+```typescript
+type VisibilityIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type?:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId?: string;
+  seriesId: string;
+};
+```
+
+### VisibilityIdentifierWithType
+
+```typescript
+type VisibilityIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### XAxis
+
+```typescript
+type XAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### YAxis
+
+```typescript
+type YAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'left' | 'right' | 'none';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * The width of the axis.
+   * Set to `'auto'` to automatically calculate the width based on tick label measurements.
+   * @default 65 if an axis label is provided, 45 otherwise.
+   */
+  width?: number | 'auto';
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### yellowPaletteDark
+
+```typescript
+type yellowPaletteDark = string[];
+```
+
+### yellowPaletteLight
+
+```typescript
+type yellowPaletteLight = string[];
+```
+
+### ZoomData
+
+```typescript
+type ZoomData = {
+  /** The id of the zoomed axis. */
+  axisId: AxisId;
+  /** The starting percentage of the zoom range. In the range of 0 to 100. */
+  start: number;
+  /** The ending percentage of the zoom range. In the range of 0 to 100. */
+  end: number;
+};
+```
+
+### ZoomFilterMode
+
+```typescript
+type ZoomFilterMode = 'keep' | 'discard';
+```
+
+### ZoomOptions
+
+```typescript
+type ZoomOptions = {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   * @default 0
+   */
+  minStart?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   * @default 100
+   */
+  maxEnd?: number;
+  /**
+   * The step size of the zooming function. Defines the granularity of the zoom.
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimum span size in the range of 0 to 100.
+   *
+   * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximum span size in the range of 0 to 100.
+   *
+   * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   * @default true
+   */
+  panning?: boolean;
+  /**
+   * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+   *
+   * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+   * - `discard`: The data outside the zoomed range is discarded for the other axes.
+   *    The other axes will be adjusted to fit the zoomed range.
+   * @default 'keep'
+   */
+  filterMode?: ZoomFilterMode;
+  /** Configures the zoom slider. The slider is an element that shows the zoomed range and allows its manipulation. */
+  slider?: ZoomSliderOptions;
+};
+```
+
+### ZoomSliderOptions
+
+```typescript
+type ZoomSliderOptions = {
+  /** If `true`, the slider will be shown. */
+  enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   * @default 48 if preview is enabled, 28 otherwise.
+   */
+  size?: number;
+  /**
+   * Defines when the tooltip with the zoom values should be shown.
+   * - 'always': The tooltip is always shown.
+   * - 'hover': The tooltip is shown when hovering over the track or thumb.
+   * - 'never': The tooltip is never shown.
+   * @default 'hover'
+   */
+  showTooltip?: ZoomSliderShowTooltip;
+  /**
+   * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
+   */
+  preview?: boolean | ZoomSliderPreviewOptions;
+};
+```
+
+### ZoomSliderShowTooltip
+
+```typescript
+type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
+```
+
+## External Types
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (value: number, context: { dataIndex: number }) => string | null;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### Exclude
+
+```typescript
+type Exclude = 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### hideItem
+
+```typescript
+type hideItem = (identifier: unknown) => void;
+```
+
+### showItem
+
+```typescript
+type showItem = (identifier: unknown) => void;
+```
+
+### toggleItemVisibility
+
+```typescript
+type toggleItemVisibility = (
+  identifier:
+    | unknown
+    | {
+        type:
+          | 'bar'
+          | 'line'
+          | 'scatter'
+          | 'pie'
+          | 'radar'
+          | 'heatmap'
+          | 'funnel'
+          | 'sankey'
+          | 'rangeBar'
+          | 'ohlc';
+        seriesId: string;
+      },
+) => void;
+```
+
+### TriggerOptions
+
+```typescript
+type TriggerOptions = 'item' | 'axis' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.axis-config.ts b/docs/pages/x/api/charts/types.axis-config.ts
new file mode 100644
index 0000000000000..6e0dc64ded023
--- /dev/null
+++ b/docs/pages/x/api/charts/types.axis-config.ts
@@ -0,0 +1,4 @@
+import { AxisConfig } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesAxisConfig = createTypes(import.meta.url, AxisConfig);
diff --git a/docs/pages/x/api/charts/types.bar-chart-premium.md b/docs/pages/x/api/charts/types.bar-chart-premium.md
new file mode 100644
index 0000000000000..5db68eadc7386
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-chart-premium.md
@@ -0,0 +1,1680 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-chart-premium.md'
+
+## API Reference
+
+### BarChartPremium
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar or range bar item is clicked.                                                                                                                                                                                                                                                                               |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `(RangeBarSeriesType \| BarSeries)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] or \[\[RangeBarSeries]] objects.                                                                                                                                                                                                                              |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartPremiumSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartPremiumSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### FocusedRangeBar
+
+### RangeBarPlot
+
+Demos:
+
+- [Range Bar](https://mui.com/x/react-charts/range-bar/)
+
+API:
+
+- [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
+
+**RangeBarPlot Props:**
+
+| Prop          | Type                                                                                                     | Default     | Description                                   |
+| :------------ | :------------------------------------------------------------------------------------------------------- | :---------- | :-------------------------------------------- |
+| borderRadius  | `number`                                                                                                 | -           | Defines the border radius of the bar element. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void)` | -           | Callback fired when a bar item is clicked.    |
+| skipAnimation | `boolean`                                                                                                | `undefined` | If `true`, animations are skipped.            |
+| slotProps     | `RangeBarPlotSlotProps`                                                                                  | `{}`        | The props used for each component slot.       |
+| slots         | `RangeBarPlotSlots`                                                                                      | `{}`        | Overridable component slots.                  |
+
+## Additional Types
+
+### BAR_CHART_PREMIUM_PLUGINS
+
+```typescript
+type BAR_CHART_PREMIUM_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartPremiumPluginSignatures
+
+```typescript
+type BarChartPremiumPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartPremiumProps
+
+````typescript
+type BarChartPremiumProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartPremiumSlotProps;
+  /** Callback fired when a bar or range bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
+   */
+  series: (RangeBarSeriesType | BarSeries)[];
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  sx?: SxProps<Theme>;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartPremiumSlotProps
+
+```typescript
+type BarChartPremiumSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'pointer' | 'node'; sort?: undefined }
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'desc' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartPremiumSlots
+
+```typescript
+type BarChartPremiumSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'pointer' | 'node'; sort?: undefined }
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'desc' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### rangeBarClasses
+
+```typescript
+type rangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClasses
+
+```typescript
+type RangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClassKey
+
+```typescript
+type RangeBarClassKey = 'root' | 'series' | 'seriesLabels';
+```
+
+### RangeBarPlotProps
+
+```typescript
+type RangeBarPlotProps = {
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    barItemIdentifier: RangeBarItemIdentifier,
+  ) => void;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RangeBarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RangeBarPlotSlots;
+};
+```
+
+### RangeBarPlotSlotProps
+
+```typescript
+type RangeBarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### RangeBarPlotSlots
+
+```typescript
+type RangeBarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### RangeBarSeries
+
+```typescript
+type RangeBarSeries = {
+  type: 'rangeBar';
+  /** Data associated to each range bar. */
+  data?: (RangeBarValueType | null)[];
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<RangeBarValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'rangeBar'
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+## External Types
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (
+  value: unknown | null,
+  context: { dataIndex: number },
+) => string | null;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  itemIdentifier:
+    | { type: 'bar'; seriesId: string; dataIndex: number }
+    | { type: 'rangeBar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
diff --git a/docs/pages/x/api/charts/types.bar-chart-premium.ts b/docs/pages/x/api/charts/types.bar-chart-premium.ts
new file mode 100644
index 0000000000000..677c31fe15955
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-chart-premium.ts
@@ -0,0 +1,4 @@
+import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarChartPremium = createTypes(import.meta.url, BarChartPremium);
diff --git a/docs/pages/x/api/charts/types.bar-chart-pro.md b/docs/pages/x/api/charts/types.bar-chart-pro.md
new file mode 100644
index 0000000000000..69a9268c51488
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-chart-pro.md
@@ -0,0 +1,1493 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-chart-pro.md'
+
+## API Reference
+
+### BarChartPro
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'vertical' \| 'horizontal'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+## Additional Types
+
+### BAR_CHART_PRO_PLUGINS
+
+```typescript
+type BAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartProPluginSignatures
+
+```typescript
+type BarChartProPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartProProps
+
+````typescript
+type BarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartProSlotProps
+
+```typescript
+type BarChartProSlotProps = {
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartProSlots
+
+```typescript
+type BarChartProSlots = {
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'small'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'small'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'small'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'small'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.bar-chart-pro.ts b/docs/pages/x/api/charts/types.bar-chart-pro.ts
new file mode 100644
index 0000000000000..3625aa8e57aa7
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-chart-pro.ts
@@ -0,0 +1,4 @@
+import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarChartPro = createTypes(import.meta.url, BarChartPro);
diff --git a/docs/pages/x/api/charts/types.bar-chart.md b/docs/pages/x/api/charts/types.bar-chart.md
new file mode 100644
index 0000000000000..69e855a71e2be
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-chart.md
@@ -0,0 +1,1702 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-chart.md'
+
+## API Reference
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'vertical' \| 'horizontal'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### FocusedBar
+
+## Additional Types
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'root' | 'series' | 'seriesLabels' | 'element' | 'label' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  color: string;
+  classes?: Partial<BarClasses>;
+  seriesId: string;
+  dataIndex: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.bar-chart.ts b/docs/pages/x/api/charts/types.bar-chart.ts
new file mode 100644
index 0000000000000..52b983d92ab7a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-chart.ts
@@ -0,0 +1,4 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarChart = createTypes(import.meta.url, BarChart);
diff --git a/docs/pages/x/api/charts/types.bar-element.md b/docs/pages/x/api/charts/types.bar-element.md
new file mode 100644
index 0000000000000..b9100ae3c7324
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-element.md
@@ -0,0 +1,1702 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-element.md'
+
+## API Reference
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'vertical' \| 'horizontal'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### FocusedBar
+
+## Additional Types
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'root' | 'series' | 'seriesLabels' | 'element' | 'label' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  color: string;
+  classes?: Partial<BarClasses>;
+  seriesId: string;
+  dataIndex: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.bar-element.ts b/docs/pages/x/api/charts/types.bar-element.ts
new file mode 100644
index 0000000000000..95c8f189987f6
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-element.ts
@@ -0,0 +1,4 @@
+import { BarElement } from '@mui/x-charts/BarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarElement = createTypes(import.meta.url, BarElement);
diff --git a/docs/pages/x/api/charts/types.bar-label.md b/docs/pages/x/api/charts/types.bar-label.md
new file mode 100644
index 0000000000000..7b0f6a01da737
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-label.md
@@ -0,0 +1,1702 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-label.md'
+
+## API Reference
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'vertical' \| 'horizontal'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### FocusedBar
+
+## Additional Types
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'root' | 'series' | 'seriesLabels' | 'element' | 'label' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  color: string;
+  classes?: Partial<BarClasses>;
+  seriesId: string;
+  dataIndex: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.bar-label.ts b/docs/pages/x/api/charts/types.bar-label.ts
new file mode 100644
index 0000000000000..4a58dc971d7c4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-label.ts
@@ -0,0 +1,4 @@
+import { BarLabel } from '@mui/x-charts/BarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarLabel = createTypes(import.meta.url, BarLabel);
diff --git a/docs/pages/x/api/charts/types.bar-plot.md b/docs/pages/x/api/charts/types.bar-plot.md
new file mode 100644
index 0000000000000..797ccba92422a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-plot.md
@@ -0,0 +1,1702 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-plot.md'
+
+## API Reference
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'vertical' \| 'horizontal'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### FocusedBar
+
+## Additional Types
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'label'
+    | 'marker'
+    | 'line'
+    | 'text'
+    | 'p'
+    | 'center'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'root' | 'series' | 'seriesLabels' | 'element' | 'label' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  color: string;
+  classes?: Partial<BarClasses>;
+  seriesId: string;
+  dataIndex: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.bar-plot.ts b/docs/pages/x/api/charts/types.bar-plot.ts
new file mode 100644
index 0000000000000..8026201e026c9
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-plot.ts
@@ -0,0 +1,4 @@
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarPlot = createTypes(import.meta.url, BarPlot);
diff --git a/docs/pages/x/api/charts/types.bar-series.md b/docs/pages/x/api/charts/types.bar-series.md
new file mode 100644
index 0000000000000..c06769af5cd0c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-series.md
@@ -0,0 +1,38240 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.bar-series.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarChartPremium
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar or range bar item is clicked.                                                                                                                                                                                                                                                                               |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `(RangeBarSeriesType \| BarSeries)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] or \[\[RangeBarSeries]] objects.                                                                                                                                                                                                                              |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartPremiumSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartPremiumSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarChartPro
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### blueberryTwilightPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### bluePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsAxis Props:**
+
+| Prop      | Type                  | Default | Description                             |
+| :-------- | :-------------------- | :------ | :-------------------------------------- |
+| slotProps | `ChartsAxisSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `ChartsAxisSlots`     | `{}`    | Overridable component slots.            |
+
+### ChartsAxisHighlight
+
+Demos:
+
+- [Custom components](https://mui.com/x/react-charts/components/)
+
+API:
+
+- [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+
+**ChartsAxisHighlight Props:**
+
+| Prop | Type                      | Default | Description |
+| :--- | :------------------------ | :------ | :---------- |
+| x    | `ChartsAxisHighlightType` | -       | -           |
+| y    | `ChartsAxisHighlightType` | -       | -           |
+
+### ChartsAxisTooltipContent
+
+**ChartsAxisTooltipContent Props:**
+
+| Prop    | Type                            | Default  | Description                                                                                                                                                                                   |
+| :------ | :------------------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes | `Partial<ChartsTooltipClasses>` | -        | Override or extend the styles applied to the component.                                                                                                                                       |
+| sort    | `'none' \| 'asc' \| 'desc'`     | `'none'` | The sort in which series items are displayed in the tooltip.&#xA;When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value. |
+| sx      | `SxProps<Theme>`                | -        | -                                                                                                                                                                                             |
+
+### ChartsClipPath
+
+API:
+
+- [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+
+**ChartsClipPath Props:**
+
+| Prop   | Type                                                               | Default | Description                                                                                                                             |
+| :----- | :----------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| offset | `{ top?: number; right?: number; bottom?: number; left?: number }` | -       | Offset, in pixels, of the clip path rectangle from the drawing area. A positive value will move the rectangle outside the drawing area. |
+| id\*   | `string`                                                           | -       | The id of the clip path.                                                                                                                |
+
+### ChartsColorCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### ChartsColorPaletteCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsContainerPremium
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPremium` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPremium API](https://mui.com/x/api/charts/charts-container-premium/)
+
+**ChartsContainerPremium Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsContainerPro
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPro` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+
+**ChartsContainerPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProvider
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/react-charts/composition/)
+
+API:
+
+- [ChartsDataProvider API](https://mui.com/x/api/charts/charts-data-provider/)
+
+**ChartsDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                  | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                  | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                       | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                      | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                              | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                           | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                      | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                             | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]` | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                           | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                             | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                                                                                                | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                                                                                                    | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                              | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                              | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProviderPremium
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPremium API](https://mui.com/x/api/charts/charts-data-provider-premium/)
+
+**ChartsDataProviderPremium Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProviderPro
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPro API](https://mui.com/x/api/charts/charts-data-provider-pro/)
+
+**ChartsDataProviderPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType \| RangeBarSeriesType \| OHLCSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsGrid
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsGrid Props:**
+
+| Prop       | Type                         | Default | Description                                             |
+| :--------- | :--------------------------- | :------ | :------------------------------------------------------ |
+| classes    | `Partial<ChartsGridClasses>` | -       | Override or extend the styles applied to the component. |
+| horizontal | `boolean`                    | -       | Displays horizontal grid.                               |
+| vertical   | `boolean`                    | -       | Displays vertical grid.                                 |
+| className  | `string`                     | -       | A CSS class name applied to the root element.           |
+
+### ChartsItemTooltipContent
+
+**ChartsItemTooltipContent Props:**
+
+| Prop    | Type                            | Default | Description                                             |
+| :------ | :------------------------------ | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipClasses>` | -       | Override or extend the styles applied to the component. |
+| sx      | `SxProps<Theme>`                | -       | -                                                       |
+
+### ChartsLegend
+
+**ChartsLegend Props:**
+
+| Prop                    | Type                                                                                                                     | Default | Description                                                                                  |
+| :---------------------- | :----------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------- |
+| classes                 | `Partial<ChartsLegendClasses>`                                                                                           | -       | Override or extend the styles applied to the component.                                      |
+| direction               | `Direction`                                                                                                              | -       | The direction of the legend layout.&#xA;The default depends on the chart.                    |
+| onItemClick             | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void)` | -       | Callback fired when a legend item is clicked.                                                |
+| slotProps               | `ChartsLegendSlotProps`                                                                                                  | `{}`    | The props used for each component slot.                                                      |
+| slots                   | `ChartsLegendSlots`                                                                                                      | `{}`    | Overridable component slots.                                                                 |
+| sx                      | `SxProps<Theme>`                                                                                                         | -       | -                                                                                            |
+| tabIndex                | `number`                                                                                                                 | -       | -                                                                                            |
+| toggleVisibilityOnClick | `boolean`                                                                                                                | `false` | If `true`, clicking on a legend item will toggle the visibility of the corresponding series. |
+| className               | `string`                                                                                                                 | -       | -                                                                                            |
+
+### ChartsLocalizationProvider
+
+Demos:
+
+- [localization](https://mui.com/x/react-charts/localization/)
+
+API:
+
+- [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
+
+**ChartsLocalizationProvider Props:**
+
+| Prop       | Type                        | Default | Description                          |
+| :--------- | :-------------------------- | :------ | :----------------------------------- |
+| localeText | `Partial<ChartsLocaleText>` | -       | Localized text for chart components. |
+| children   | `React.ReactNode`           | -       | -                                    |
+
+### ChartsReferenceLine
+
+**ChartsReferenceLine Props:**
+
+| Prop       | Type                                   | Default                                                                      | Description                                                                                                                                            |
+| :--------- | :------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label      | `string`                               | -                                                                            | The label to display along the reference line.                                                                                                         |
+| axisId     | `AxisId`                               | ``The `id` of the first defined axis.``                                      | The id of the axis used for the reference value.                                                                                                       |
+| classes    | `Partial<ChartsReferenceLineClasses>`  | -                                                                            | Override or extend the styles applied to the component.                                                                                                |
+| labelAlign | `'start' \| 'middle' \| 'end'`         | `'middle'`                                                                   | The alignment if the label is in the chart drawing area.                                                                                               |
+| labelStyle | `ChartsTextStyle`                      | -                                                                            | The style applied to the label.                                                                                                                        |
+| lineStyle  | `React.CSSProperties`                  | -                                                                            | The style applied to the line.                                                                                                                         |
+| spacing    | `number \| { x?: number; y?: number }` | `{ x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.` | Additional space around the label in px.&#xA;Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes. |
+| x          | `string \| number \| Date`             | -                                                                            | The x value associated with the reference line.&#xA;If defined the reference line will be vertical.                                                    |
+| y          | `string \| number \| Date`             | -                                                                            | The y value associated with the reference line.&#xA;If defined the reference line will be horizontal.                                                  |
+
+### ChartsRenderer
+
+A component that renders different types of charts based on the provided data and configuration.
+It supports column, bar, line, area and pie charts with customizable styling and formatting options.
+The component handles both single and multiple dimension datasets, with special data processing for each case.
+For multiple dimension datasets, it creates grouped axes.
+
+**ChartsRenderer Props:**
+
+| Prop            | Type                                                                                                   | Default | Description |
+| :-------------- | :----------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| chartType\*     | `string`                                                                                               | -       | -           |
+| configuration\* | `Record<string, any>`                                                                                  | -       | -           |
+| dimensions\*    | `({ id: string; label: string; data: (string \| number \| Date \| null)[] })[]`                        | -       | -           |
+| onRender        | `((type: string, props: Record<string, any>, Component: React.ComponentType<any>) => React.ReactNode)` | -       | -           |
+| values\*        | `({ id: string; label: string; data: (number \| null)[] })[]`                                          | -       | -           |
+
+### ChartsSurface
+
+A helper component that combines `<ChartsLayerContainer>` and `<ChartsSvgLayer>` to provide a surface for drawing charts.
+If you need more control over the layers, you can use `<ChartsLayerContainer>` and `<ChartsSvgLayer>` separately.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+
+**ChartsSurface Props:**
+
+| Prop      | Type              | Default | Description                                                                                |
+| :-------- | :---------------- | :------ | :----------------------------------------------------------------------------------------- |
+| desc      | `string`          | -       | The description of the chart.&#xA;Used to provide an accessible description for the chart. |
+| sx        | `SxProps<Theme>`  | -       | -                                                                                          |
+| title     | `string`          | -       | The title of the chart.&#xA;Used to provide an accessible label for the chart.             |
+| children  | `React.ReactNode` | -       | -                                                                                          |
+| className | `string`          | -       | -                                                                                          |
+
+### ChartsText
+
+Helper component to manage multiline text in SVG
+
+**ChartsText Props:**
+
+| Prop             | Type              | Default | Description                            |
+| :--------------- | :---------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`          | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`         | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`             | -       | -                                      |
+| text\*           | `string`          | -       | Text displayed.                        |
+| style            | `ChartsTextStyle` | -       | Style applied to text elements.        |
+
+### ChartsToolbarImageExportTrigger
+
+A button that triggers an image export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarImageExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartsToolbarImageExportOptions`                                                                                                                                                                 | -       | The options to apply on the image export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPrintExportTrigger
+
+A button that triggers a print export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarPrintExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartsToolbarPrintExportOptions`                                                                                                                                                                 | -       | The options to apply on the Print export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPro
+
+The chart toolbar component for the pro package.
+
+**ChartsToolbarPro Props:**
+
+| Prop               | Type                                | Default | Description |
+| :----------------- | :---------------------------------- | :------ | :---------- |
+| imageExportOptions | `ChartsToolbarImageExportOptions[]` | -       | -           |
+| printOptions       | `ChartsToolbarPrintExportOptions`   | -       | -           |
+
+### ChartsToolbarZoomInTrigger
+
+A button that zooms the chart in.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomInTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarZoomOutTrigger
+
+A button that zooms the chart out.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomOutTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsTooltip
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                                                                                                                |
+| :-------- | :--------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                                                                                                                    |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                                                                                                                  |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                                                                                                                    |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                                                                                                               |
+| sort      | `'none' \| 'asc' \| 'desc'`              | `'none'`    | Defines the sort order in which series items are displayed in the axis tooltip.&#xA;When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.&#xA;Only applies when `trigger='axis'`. |
+| trigger   | `'axis' \| 'none' \| 'item'`             | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip.                                                                                         |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                                                                                                          |
+
+### ChartsTooltipContainer
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltipContainer Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                        |
+| :-------- | :--------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                            |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                          |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                            |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                       |
+| trigger   | `TriggerOptions`                         | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip. |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                  |
+| children  | `React.ReactNode`                        | -           | -                                                                                                                                                                                  |
+
+### ChartsWebGLLayer
+
+### ChartsXAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
+
+**ChartsXAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'x'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelMinGap    | `number`                                                      | `4`             | The minimum gap in pixels between two tick labels.&#xA;If two tick labels are closer than this minimum gap, one of them will be hidden.                                                                                                                                                                                         |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsYAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+
+**ChartsYAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'y'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsZoomSlider
+
+Renders the zoom slider for all x and y axes that have it enabled.
+
+### ChartZoomSlider
+
+### cheerfulFiestaPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ContinuousColorLegend
+
+**ContinuousColorLegend Props:**
+
+| Prop          | Type                                    | Default                | Description                                                                                                                                                                          |
+| :------------ | :-------------------------------------- | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisDirection | `'x' \| 'y' \| 'z'`                     | `'z'`                  | The axis direction containing the color configuration to represent.                                                                                                                  |
+| axisId        | `AxisId`                                | `The first axis item.` | The id of the axis item with the color configuration to represent.                                                                                                                   |
+| classes       | `Partial<ContinuousColorLegendClasses>` | -                      | Override or extend the styles applied to the component.                                                                                                                              |
+| direction     | `Direction`                             | `'horizontal'`         | The direction of the legend layout.                                                                                                                                                  |
+| gradientId    | `string`                                | `auto-generated id`    | The id for the gradient to use.&#xA;If not provided, it will use the generated gradient from the axis configuration.&#xA;The `gradientId` will be used as `fill="url(#gradientId)"`. |
+| labelPosition | `'start' \| 'end' \| 'extremes'`        | `'end'`                | Where to position the labels relative to the gradient.                                                                                                                               |
+| maxLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the maximum side of the gradient.&#xA;Can either be a string, or a function.&#xA;If not defined, the formatted maximal value is display.                     |
+| minLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the minimum side of the gradient.&#xA;Can either be a string, or a function.                                                                                 |
+| reverse       | `boolean`                               | `false`                | If `true`, the gradient and labels will be reversed.                                                                                                                                 |
+| slotProps     | `ChartsLegendSlotProps`                 | `{}`                   | The props used for each component slot.                                                                                                                                              |
+| slots         | `ChartsLegendSlots`                     | `{}`                   | Overridable component slots.                                                                                                                                                         |
+| sx            | `SxProps<Theme>`                        | -                      | -                                                                                                                                                                                    |
+| tabIndex      | `number`                                | -                      | -                                                                                                                                                                                    |
+| thickness     | `number`                                | `12`                   | The thickness of the gradient                                                                                                                                                        |
+| className     | `string`                                | -                      | -                                                                                                                                                                                    |
+
+### cyanPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### defaultOnBeforeExport
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| iframe    | `HTMLIFrameElement` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void;
+```
+
+### FocusedBar
+
+### FocusedFunnelSection
+
+### FocusedHeatmapCell
+
+### FocusedLineMark
+
+### FocusedPieArc
+
+**FocusedPieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color           | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius    | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| outerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle    | `number`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+
+### FocusedRadarMark
+
+### FocusedRangeBar
+
+### FocusedScatterMark
+
+### FunnelChart
+
+**FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### FunnelPlot
+
+**FunnelPlot Props:**
+
+| Prop        | Type                                                                                                      | Default | Description                                   |
+| :---------- | :-------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------- |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)` | -       | Callback fired when a funnel item is clicked. |
+| slotProps   | `FunnelPlotSlotProps`                                                                                     | `{}`    | The props used for each component slot.       |
+| slots       | `FunnelPlotSlots`                                                                                         | `{}`    | Overridable component slots.                  |
+| className   | `string`                                                                                                  | -       | A CSS class name applied to the root element. |
+
+### Gauge
+
+**Gauge Props:**
+
+| Prop          | Type                                                           | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                                               | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| classes       | `Partial<GaugeClasses>`                                        | -        | -                                                                                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`                                             | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`                                             | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`                                             | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                                                       | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                                                       | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                                                       | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`                                             | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number`                               | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`                                             | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                                                      | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                                                       | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                                               | -        | -                                                                                                                                                                                                                                                                            |
+| text          | `string \| ((params: GaugeFormatterParams) => string \| null)` | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                                                       | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                                                       | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                                                       | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                                                       | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                                                       | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                                              | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                                                       | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeContainer
+
+**GaugeContainer Props:**
+
+| Prop          | Type                             | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                 | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`               | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`               | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`               | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                         | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                         | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                         | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`               | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number` | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`               | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                        | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                         | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                 | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                         | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                         | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                         | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                         | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                         | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                         | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeReferenceArc
+
+### GaugeValueArc
+
+**GaugeValueArc Props:**
+
+| Prop          | Type      | Default | Description |
+| :------------ | :-------- | :------ | :---------- |
+| skipAnimation | `boolean` | -       | -           |
+
+### GaugeValueText
+
+**GaugeValueText Props:**
+
+| Prop             | Type                                                           | Default | Description                            |
+| :--------------- | :------------------------------------------------------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`                                                       | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`                                                      | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`                                                          | -       | -                                      |
+| text             | `string \| ((params: GaugeFormatterParams) => string \| null)` | -       | -                                      |
+| style            | `ChartsTextStyle`                                              | -       | Style applied to text elements.        |
+
+### getLocalizedConfigurationOptions
+
+**Parameters:**
+
+| Parameter | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| locale?   | `Partial<ChartsLocaleText>` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GridChartsConfigurationOptions;
+```
+
+### getPieCoordinates
+
+**Parameters:**
+
+| Parameter | Type                                                       | Default | Description |
+| :-------- | :--------------------------------------------------------- | :------ | :---------- |
+| series    | `LegendItemParams<DefaultizedPieSeriesType, 'cx' \| 'cy'>` | -       | -           |
+| drawing   | `LegendItemParams<ChartDrawingArea, 'width' \| 'height'>`  | -       | -           |
+
+**Return Value:**
+
+| Property          | Type     | Description |
+| :---------------- | :------- | :---------- |
+| `cx`              | `number` | -           |
+| `cy`              | `number` | -           |
+| `availableRadius` | `number` | -           |
+
+### getValueToPositionMapper
+
+For a given scale return a function that map value to their position.
+Useful when dealing with specific scale such as band.
+
+**Parameters:**
+
+| Parameter | Type                                                                  | Default | Description      |
+| :-------- | :-------------------------------------------------------------------- | :------ | :--------------- |
+| scale     | `D3Scale<{ toString: function toString() { [native code] } }, Range>` | -       | The scale to use |
+
+**Return Value:**
+
+A function that map value to their position
+
+```tsx
+type ReturnValue = (value: any) => number;
+```
+
+### greenPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Heatmap
+
+**Heatmap Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                 | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                                             | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                        | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                 | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                      | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                             | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                            | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                          | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                             | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                                            | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`                                   | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                          | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                     | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                                         | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                                             | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                   | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                                                    | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                            | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapSlotProps`                                                                                                                                                                                                   | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapSlots`                                                                                                                                                                                                       | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                             | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                                                 | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                               | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| null`                                                                                                                                   | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                             | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                              | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                             | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                    | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+### HeatmapCell
+
+Demos:
+
+- [Heatmap](https://mui.com/x/react-charts/heatmap/)
+
+API:
+
+- [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+
+**HeatmapCell Props:**
+
+| Prop         | Type                    | Default | Description |
+| :----------- | :---------------------- | :------ | :---------- |
+| height\*     | `number`                | -       | -           |
+| ownerState\* | `HeatmapCellOwnerState` | -       | -           |
+| width\*      | `number`                | -       | -           |
+| x\*          | `number`                | -       | -           |
+| y\*          | `number`                | -       | -           |
+
+### HeatmapData
+
+**Constructor Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| data      | `HeatmapValueType[]` | -       | -           |
+
+**Methods:**
+
+```typescript
+function getValue(xIndex: number, yIndex: number): number | null;
+```
+
+### HeatmapPlot
+
+**HeatmapPlot Props:**
+
+| Prop         | Type                   | Default | Description                                       |
+| :----------- | :--------------------- | :------ | :------------------------------------------------ |
+| borderRadius | `number`               | -       | The border radius of the heatmap cells in pixels. |
+| slotProps    | `HeatmapPlotSlotProps` | `{}`    | The props used for each component slot.           |
+| slots        | `HeatmapPlotSlots`     | `{}`    | Overridable component slots.                      |
+| className    | `string`               | -       | A CSS class name applied to the root element.     |
+
+### HeatmapPremium
+
+**HeatmapPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                 | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                                             | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                        | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                 | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                      | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                             | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                            | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                          | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                             | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                                            | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`                                   | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                          | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                     | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                                         | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                                             | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                   | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| renderer                  | `'svg-single' \| 'webgl'`                                                                                                                                                                                            | -                     | The type of renderer to use for the heatmap plot. `svg-single`: Renders every scatter item in a `<rect />` element.`webgl`: Renders heatmap cells using WebGL for better performance, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/heatmap/#performance                                            |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                                                    | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                            | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapSlotProps`                                                                                                                                                                                                   | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapSlots`                                                                                                                                                                                                       | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                             | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                                                 | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                               | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| null`                                                                                                                                   | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                             | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                              | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                             | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                    | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+### HeatmapTooltip
+
+**HeatmapTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer'`                    | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### HeatmapTooltipContent
+
+**HeatmapTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineChartPro
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'line'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'line'>>, ChartPlugin<UseChartHighlightSignature<'line'>>, ChartPlugin<UseChartVisibilityManagerSignature<'line'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                       | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### mangoFusionPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+### orangePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### PieArc
+
+**PieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color\*         | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius\*  | `number`                                                          | -       | -                                                                                                                                        |
+| dataIndex\*     | `number`                                                          | -       | -                                                                                                                                        |
+| endAngle\*      | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| isFaded\*       | `boolean`                                                         | -       | -                                                                                                                                        |
+| isFocused\*     | `boolean`                                                         | -       | -                                                                                                                                        |
+| isHighlighted\* | `boolean`                                                         | -       | -                                                                                                                                        |
+| outerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle\*  | `number`                                                          | -       | -                                                                                                                                        |
+| seriesId\*      | `string`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+| startAngle\*    | `number`                                                          | -       | -                                                                                                                                        |
+
+### PieArcLabel
+
+**PieArcLabel Props:**
+
+| Prop              | Type                  | Default | Description |
+| :---------------- | :-------------------- | :------ | :---------- |
+| hidden            | `boolean`             | -       | -           |
+| arcLabelRadius\*  | `number`              | -       | -           |
+| classes           | `Partial<PieClasses>` | -       | -           |
+| color\*           | `string`              | -       | -           |
+| cornerRadius\*    | `number`              | -       | -           |
+| endAngle\*        | `number`              | -       | -           |
+| formattedArcLabel | `string \| null`      | -       | -           |
+| isFaded\*         | `boolean`             | -       | -           |
+| isHighlighted\*   | `boolean`             | -       | -           |
+| paddingAngle\*    | `number`              | -       | -           |
+| seriesId\*        | `string`              | -       | -           |
+| skipAnimation\*   | `boolean`             | -       | -           |
+| startAngle\*      | `number`              | -       | -           |
+
+### PieArcLabelPlot
+
+**PieArcLabelPlot Props:**
+
+| Prop             | Type                                                                                                                                                                                                           | Default                           | Description                                                    |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabel         | `'formattedValue' \| 'label' \| 'value' \| ((item: { id?: PieItemId; color: string; labelMarkType?: ChartsLabelMarkType; value: number; formattedValue: string; hidden: boolean; label?: string }) => string)` | -                                 | The label displayed into the arc.                              |
+| arcLabelMinAngle | `number`                                                                                                                                                                                                       | `0`                               | The minimal angle required to display the arc label.           |
+| arcLabelRadius   | `number`                                                                                                                                                                                                       | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius     | `number`                                                                                                                                                                                                       | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*           | `DefaultizedPieValueType[]`                                                                                                                                                                                    | -                                 | -                                                              |
+| faded            | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted      | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius      | `number`                                                                                                                                                                                                       | `0`                               | The radius between circle center and the beginning of the arc. |
+| outerRadius\*    | `number`                                                                                                                                                                                                       | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle     | `number`                                                                                                                                                                                                       | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*       | `string`                                                                                                                                                                                                       | -                                 | The id of this series.                                         |
+| skipAnimation    | `boolean`                                                                                                                                                                                                      | `false`                           | If `true`, animations are skipped.                             |
+| slotProps        | `PieArcLabelPlotSlotProps`                                                                                                                                                                                     | `{}`                              | The props used for each component slot.                        |
+| slots            | `PieArcLabelPlotSlots`                                                                                                                                                                                         | `{}`                              | Overridable component slots.                                   |
+
+### PieArcPlot
+
+**PieArcPlot Props:**
+
+| Prop           | Type                                                                                                                                                               | Default                           | Description                                                    |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabelRadius | `number`                                                                                                                                                           | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius   | `number`                                                                                                                                                           | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*         | `DefaultizedPieValueType[]`                                                                                                                                        | -                                 | -                                                              |
+| faded          | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted    | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius    | `number`                                                                                                                                                           | `0`                               | The radius between circle center and the beginning of the arc. |
+| onItemClick    | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                             | -                                 | Callback fired when a pie item is clicked.                     |
+| outerRadius\*  | `number`                                                                                                                                                           | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle   | `number`                                                                                                                                                           | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*     | `string`                                                                                                                                                           | -                                 | The id of this series.                                         |
+| skipAnimation  | `boolean`                                                                                                                                                          | `false`                           | If `true`, animations are skipped.                             |
+| slotProps      | `PieArcPlotSlotProps`                                                                                                                                              | `{}`                              | The props used for each component slot.                        |
+| slots          | `PieArcPlotSlots`                                                                                                                                                  | `{}`                              | Overridable component slots.                                   |
+
+### piecewiseColorDefaultLabelFormatter
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `PiecewiseLabelFormatterParams` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PiecewiseColorLegend
+
+**PiecewiseColorLegend Props:**
+
+| Prop           | Type                                                                                                                             | Default                | Description                                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :------------------------------------------------------------------ |
+| axisDirection  | `'x' \| 'y' \| 'z'`                                                                                                              | `'z'`                  | The axis direction containing the color configuration to represent. |
+| axisId         | `AxisId`                                                                                                                         | `The first axis item.` | The id of the axis item with the color configuration to represent.  |
+| classes        | `Partial<PiecewiseColorLegendClasses>`                                                                                           | -                      | Override or extend the styles applied to the component.             |
+| direction      | `Direction`                                                                                                                      | `'horizontal'`         | The direction of the legend layout.                                 |
+| labelFormatter | `((params: PiecewiseLabelFormatterParams) => string \| null)`                                                                    | -                      | Format the legend labels.                                           |
+| labelPosition  | `'start' \| 'end' \| 'extremes' \| 'inline-start' \| 'inline-end'`                                                               | `'extremes'`           | Where to position the labels relative to the color marks.           |
+| onItemClick    | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void)` | -                      | Callback fired when a legend item is clicked.                       |
+| slotProps      | `ChartsLegendSlotProps`                                                                                                          | `{}`                   | The props used for each component slot.                             |
+| slots          | `ChartsLegendSlots`                                                                                                              | `{}`                   | Overridable component slots.                                        |
+| sx             | `SxProps<Theme>`                                                                                                                 | -                      | -                                                                   |
+| tabIndex       | `number`                                                                                                                         | -                      | -                                                                   |
+| className      | `string`                                                                                                                         | -                      | -                                                                   |
+
+### PieChart
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+
+**PieChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PieChartPro
+
+**PieChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PiePlot
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+
+**PiePlot Props:**
+
+| Prop          | Type                                                                                                                                   | Default | Description                                |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)` | -       | Callback fired when a pie item is clicked. |
+| skipAnimation | `boolean`                                                                                                                              | `false` | If `true`, animations are skipped.         |
+| slotProps     | `PiePlotSlotProps`                                                                                                                     | `{}`    | The props used for each component slot.    |
+| slots         | `PiePlotSlots`                                                                                                                         | `{}`    | Overridable component slots.               |
+| className     | `string`                                                                                                                               | -       | -                                          |
+
+### pinkPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### purplePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### RadarAxis
+
+**RadarAxis Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default        | Description                                                                                                                                                                              |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| angle            | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The absolute rotation angle of the metrics (in degree)&#xA;If not defined the metric angle will be used.                                                                                 |
+| classes          | `Partial<LegendItemParams<RadarClasses, 'axisLine' \| 'axisLabel' \| 'axisRoot'>>`                                                                                                                                                                                                                                                                                                                                                                   | -              | Override or extend the styles applied to the component.                                                                                                                                  |
+| divisions        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `1`            | The number of divisions with label.                                                                                                                                                      |
+| dominantBaseline | `'auto' \| 'use-script' \| 'no-change' \| 'reset-size' \| 'ideographic' \| 'alphabetic' \| 'hanging' \| 'mathematical' \| 'central' \| 'middle' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| ((angle: number) => 'auto' \| 'middle' \| 'alphabetic' \| 'hanging' \| 'ideographic' \| 'mathematical' \| 'central' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| 'use-script' \| 'no-change' \| 'reset-size' \| undefined)` | -              | The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).                                                                           |
+| labelOrientation | `'horizontal' \| 'rotated'`                                                                                                                                                                                                                                                                                                                                                                                                                          | `'horizontal'` | Defines how label align with the axis. 'horizontal': labels stay horizontal and their placement change with the axis angle.'rotated': labels are rotated 90deg relatively to their axis. |
+| metric           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The metric to get.&#xA;If `undefined`, the hook returns `null`                                                                                                                           |
+| textAnchor       | `'start' \| 'middle' \| 'end' \| 'inherit' \| ((angle: number) => 'start' \| 'end' \| 'middle' \| 'inherit' \| undefined)`                                                                                                                                                                                                                                                                                                                           | -              | The labels text anchor or a function returning the text anchor for a given axis angle (in degree).                                                                                       |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | A CSS class name applied to the root element.                                                                                                                                            |
+
+### RadarAxisHighlight
+
+**RadarAxisHighlight Props:**
+
+| Prop      | Type                                                                                                        | Default | Description                                             |
+| :-------- | :---------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| classes   | `Partial<LegendItemParams<RadarClasses, 'axisHighlightRoot' \| 'axisHighlightLine' \| 'axisHighlightDot'>>` | -       | Override or extend the styles applied to the component. |
+| className | `string`                                                                                                    | -       | A CSS class name applied to the root element.           |
+
+### RadarChart
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarChartPro
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                          | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                 | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                                                                                                                                                                                                                      | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                                                                                                                                                                                                                | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                        | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                              | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                 | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                                                                                                                                                                                                                     | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                        | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'radar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartPolarAxisSignature>, ChartPlugin<UseChartHighlightSignature<'radar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>, ChartPlugin<UseChartProExportSignature>]` | -                                                                                      | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*                   | `RadarConfig`                                                                                                                                                                                                                                                                                                                                 | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                                                                                                                                                                                                                     | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                                                                                                                                                                                                                   | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                                                                                                                                                                                                       | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartProSlotProps`                                                                                                                                                                                                                                                                                                                      | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartProSlots`                                                                                                                                                                                                                                                                                                                          | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                                                                                                                                                                                                         | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                              | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                           | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                             | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarDataProvider
+
+**RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### RadarGrid
+
+**RadarGrid Props:**
+
+| Prop        | Type                                  | Default                                                                                | Description                                               |
+| :---------- | :------------------------------------ | :------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
+| divisions   | `number`                              | `5`                                                                                    | The number of divisions in the radar grid.                |
+| shape       | `'sharp' \| 'circular'`               | `'sharp'`                                                                              | The grid shape.                                           |
+| stripeColor | `((index: number) => string) \| null` | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes |
+
+### RadarMetricLabels
+
+### RadarSeriesArea
+
+**RadarSeriesArea Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesMarks
+
+**RadarSeriesMarks Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesPlot
+
+**RadarSeriesPlot Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onAreaClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| onMarkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### rainbowSurgePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### RangeBarPlot
+
+Demos:
+
+- [Range Bar](https://mui.com/x/react-charts/range-bar/)
+
+API:
+
+- [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
+
+**RangeBarPlot Props:**
+
+| Prop          | Type                                                                                                     | Default     | Description                                   |
+| :------------ | :------------------------------------------------------------------------------------------------------- | :---------- | :-------------------------------------------- |
+| borderRadius  | `number`                                                                                                 | -           | Defines the border radius of the bar element. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void)` | -           | Callback fired when a bar item is clicked.    |
+| skipAnimation | `boolean`                                                                                                | `undefined` | If `true`, animations are skipped.            |
+| slotProps     | `RangeBarPlotSlotProps`                                                                                  | `{}`        | The props used for each component slot.       |
+| slots         | `RangeBarPlotSlots`                                                                                      | `{}`        | Overridable component slots.                  |
+
+### redPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Scatter
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [Scatter API](https://mui.com/x/api/charts/scatter/)
+
+**Scatter Props:**
+
+| Prop          | Type                                                                                                        | Default | Description                                                                                                                                                                                                                                    |
+| :------------ | :---------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes       | `Partial<ScatterClasses>`                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| color\*       | `string`                                                                                                    | -       | -                                                                                                                                                                                                                                              |
+| colorGetter\* | `((dataIndex?: number) => string)`                                                                          | -       | Function to get the color of a scatter item given its data index.&#xA;The data index argument is optional. If not provided, the color for the entire series is returned.&#xA;If provided, the color for the specific scatter item is returned. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -       | Callback fired when clicking on a scatter item.                                                                                                                                                                                                |
+| series\*      | `DefaultizedScatterSeriesType`                                                                              | -       | -                                                                                                                                                                                                                                              |
+| slotProps     | `ScatterSlotProps`                                                                                          | -       | -                                                                                                                                                                                                                                              |
+| slots         | `ScatterSlots`                                                                                              | -       | -                                                                                                                                                                                                                                              |
+| xScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| yScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+
+### ScatterChart
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterChartPro
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'scatter'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>, ChartPlugin<UseChartHighlightSignature<'scatter'>>, ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>, ChartPlugin<UseChartClosestPointSignature>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                               | -                          | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterMarker
+
+**ScatterMarker Props:**
+
+| Prop            | Type                                                          | Default | Description                                     |
+| :-------------- | :------------------------------------------------------------ | :------ | :---------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGElement, MouseEvent>) => void)` | -       | Callback fired when clicking on a scatter item. |
+| color\*         | `string`                                                      | -       | The fill color of the marker.                   |
+| dataIndex\*     | `number`                                                      | -       | The index of the data point.                    |
+| isFaded\*       | `boolean`                                                     | -       | If `true`, the marker is faded.                 |
+| isHighlighted\* | `boolean`                                                     | -       | If `true`, the marker is highlighted.           |
+| seriesId\*      | `string`                                                      | -       | The series ID.                                  |
+| size\*          | `number`                                                      | -       | The size of the marker.                         |
+| x\*             | `number`                                                      | -       | The x coordinate of the data point.             |
+| y\*             | `number`                                                      | -       | The y coordinate of the data point.             |
+
+### ScatterPlot
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+
+**ScatterPlot Props:**
+
+| Prop        | Type                                                                                                        | Default        | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------- | :---------------------------------------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classes     | `Partial<ScatterClasses>`                                                                                   | -              | -                                                                                                                                                                                                                                                                                                                                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -              | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| renderer    | `RendererType`                                                                                              | `'svg-single'` | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| slotProps   | `ScatterPlotSlotProps`                                                                                      | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots       | `ScatterPlotSlots`                                                                                          | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| className   | `string`                                                                                                    | -              | -                                                                                                                                                                                                                                                                                                                                     |
+
+### SparkLineChart
+
+Demos:
+
+- [SparkLine](https://mui.com/x/react-charts/sparkline/)
+
+API:
+
+- [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+
+**SparkLineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default                                                               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| area                      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | Set to `true` to fill spark line area.&#xA;Has no effect if plotType='bar'.                                                                                                                                                                                                                                                           |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| baseline                  | `number \| 'min' \| 'max'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `0`                                                                   | The value of the line at the base of the series area. `'min'` the area will fill the space **under** the line.`'max'` the area will fill the space **above** the line.`number` the area will fill the space between this value and the line                                                                                           |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| clipAreaOffset            | `{ top?: number; right?: number; bottom?: number; left?: number }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `{ top: 1, right: 1, bottom: 1, left: 1 }`                            | The clipped area offset in pixels. This prevents partial clipping of lines when they are drawn on the edge of the drawing area.                                                                                                                                                                                                       |
+| color                     | `ChartsColor`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette[0]`                                              | Color used to colorize the sparkline.                                                                                                                                                                                                                                                                                                 |
+| curve                     | `CurveType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'linear'`                                                            | -                                                                                                                                                                                                                                                                                                                                     |
+| data\*                    | `number[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | Data to plot.                                                                                                                                                                                                                                                                                                                         |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClipping           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.                                                                                                                                                                                                                        |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'rangeBar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'rangeBar' } \| { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| { type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'rangeBar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'rangeBar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'ohlc'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                         | -                                                                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                                     | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'rangeBar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'rangeBar' } \| { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `5`                                                                   | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'rangeBar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'rangeBar' } \| { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| { type: 'bar'; seriesId: string; dataIndex?: number } \| { type: 'line'; seriesId: string; dataIndex?: number } \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| { type: 'pie'; seriesId: string; dataIndex?: number } \| { type: 'radar'; seriesId: string; dataIndex?: number } \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| { type: 'rangeBar'; seriesId: string; dataIndex?: number } \| { type: 'ohlc'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Callback fired when clicking close to an item.&#xA;This is only available for scatter plot for now.                                                                                                                                                                                                                                   |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| LineItemIdentifier \| ScatterItemIdentifier \| PieItemIdentifier \| RadarItemIdentifier \| HeatmapItemIdentifier \| FunnelItemIdentifier \| SankeyItemIdentifier \| RangeBarItemIdentifier \| OHLCItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| plotType                  | `'bar' \| 'line'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'line'`                                                              | Type of plot used.                                                                                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'>; line: ChartSeriesTypeConfig<'line'>; scatter: ChartSeriesTypeConfig<'scatter'>; pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> }; radar: ChartSeriesTypeConfig<'radar'>; heatmap: ChartSeriesTypeConfig<'heatmap'>; funnel: ChartSeriesTypeConfig<'funnel'>; sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> }; rangeBar: ChartSeriesTypeConfig<'rangeBar'>; ohlc: ChartSeriesTypeConfig<'ohlc'> }` | -                                                                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showHighlight             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | Set to `true` to highlight the value.&#xA;With line, it shows a point.&#xA;With bar, it shows a highlight band.                                                                                                                                                                                                                       |
+| showTooltip               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`                                                               | Set to `true` to enable the tooltip in the sparkline.                                                                                                                                                                                                                                                                                 |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `SparkLineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                                                                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `SparkLineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `{}`                                                                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| RangeBarItemIdentifier \| LegendItemParams<RangeBarItemIdentifier, 'type'> \| OHLCItemIdentifier \| LegendItemParams<OHLCItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                                                                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| valueFormatter            | `((value: number \| null) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `(value: number \| null) => (value === null ? '' : value.toString())` | Formatter used by the tooltip.                                                                                                                                                                                                                                                                                                        |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `XAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | The xAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| yAxis                     | `YAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | The yAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### strawberrySkyPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Unstable_CandlestickChart
+
+Demos:
+
+- [Candlestick](https://mui.com/x/react-charts/candlestick/)
+
+API:
+
+- [Unstable_CandlestickChart API](https://mui.com/x/api/charts/candlestick/)
+
+**Unstable_CandlestickChart Props:**
+
+| Prop                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                  | `React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                 | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight           | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line', y: 'line' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| colors                  | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                 | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| grid                    | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                  | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems             | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis         | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem         | `{ type: 'ohlc'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems      | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom             | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText              | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                  | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick             | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange     | `((hiddenItems: ({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange       | `((highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipAxisChange     | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange     | `((tooltipItem: OHLCItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange            | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                | `OHLCSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | The series to display in the candlestick chart.&#xA;An array of \[\[OHLCSeries]] objects. Currently, only one OHLC series is supported. If would like to display more than one OHLC&#xA;series, open an issue at https\://github.com/mui/mui-x explaining your use case.                                                              |
+| seriesConfig            | `{ ohlc: ChartSeriesTypeConfig<'ohlc'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps               | `CandlestickChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                   | `CandlestickChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                      | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                   | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis             | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem             | `OHLCItemIdentifier \| LegendItemParams<OHLCItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zoomData                | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig   | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_CandlestickPlot
+
+### Unstable_FunnelChart
+
+**Unstable_FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarChart
+
+**Unstable_RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarDataProvider
+
+**Unstable_RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useAnimate
+
+Hook to customize the animation of an element.
+Animates a ref from `initialProps` to `props`.
+
+**useAnimate Parameters:**
+
+| Parameter | Type                                | Default | Description              |
+| :-------- | :---------------------------------- | :------ | :----------------------- |
+| props     | `{}`                                | -       | The props to animate to. |
+| \_\_1     | `UseAnimateParams<{}, Element, {}>` | -       | -                        |
+
+**useAnimate Return Value:**
+
+an object containing a ref that should be passed to the element to animate and the transformed props.
+If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+`initialProps`.
+
+The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+
+When an animation starts, an interpolator is created using `createInterpolator`.
+On every animation frame:
+
+1. The interpolator is called to get the interpolated props;
+2. `transformProps` is called to transform the interpolated props;
+3. `applyProps` is called to apply the transformed props to the element.
+
+If `props` change while an animation is progress, the animation will continue towards the new `props`.
+
+The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+started and `applyProps` will not be called.
+
+```tsx
+type ReturnValue = UseAnimateReturn<Element, {}>;
+```
+
+### useAnimateArea
+
+Animates an area of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateArea Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateAreaParams` | -       | -           |
+
+**useAnimateArea Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedAreaReturn;
+```
+
+### useAnimateBar
+
+Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+final position.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBar Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| props     | `UseAnimateBarParams` | -       | -           |
+
+**useAnimateBar Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarReturnValue;
+```
+
+### useAnimateBarLabel
+
+Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+center of the bar it belongs to.
+The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+horizontally.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBarLabel Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| props     | `UseAnimateBarLabelParams` | -       | -           |
+
+**useAnimateBarLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarLabelReturn;
+```
+
+### useAnimateLine
+
+Animates a line of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateLine Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateLineParams` | -       | -           |
+
+**useAnimateLine Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedReturnValue;
+```
+
+### useAnimatePieArc
+
+Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArc Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcParams` | -       | -           |
+
+**useAnimatePieArc Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcReturnValue;
+```
+
+### useAnimatePieArcLabel
+
+Animates the label of pie slice from its middle point to the centroid of the slice.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArcLabel Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcLabelParams` | -       | -           |
+
+**useAnimatePieArcLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcLabelReturn;
+```
+
+### useAnimateRangeBar
+
+Animates a range bar from its center outwards.
+The animation only happens in the direction of the numerical axis (x-axis for vertical layout, y-axis for horizontal layout).
+The other direction remains constant during the animation.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateRangeBar Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| props     | `UseAnimateRangeBarParams` | -       | -           |
+
+**useAnimateRangeBar Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateRangeBarReturnValue;
+```
+
+### useAxesTooltip
+
+Returns the axes to display in the tooltip and the series item related to them.
+
+**useAxesTooltip Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| params    | `UseAxesTooltipParams` | -       | -           |
+
+**useAxesTooltip Return Value:**
+
+```tsx
+type ReturnValue =
+  | UseAxesTooltipReturnValue<
+      'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar' | 'ohlc',
+      string | number | Date
+    >[]
+  | null;
+```
+
+### useBarSeries
+
+Get access to the internal state of bar series.
+
+**useBarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useBarSeries Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'bar';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        | 'bar'
+        | 'line'
+        | 'scatter'
+        | 'pie'
+        | 'radar'
+        | 'heatmap'
+        | 'funnel'
+        | 'sankey'
+        | 'rangeBar'
+        | 'ohlc'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      stackOffset?: StackOffsetType;
+      barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+      barLabelPlacement?: 'center' | 'outside';
+      stack?: string;
+      stackOrder?: StackOrderType;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      layout: 'horizontal' | 'vertical';
+      minBarSize: number;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useBarSeriesContext
+
+Get access to the internal state of bar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useBarSeriesContext Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'bar'> | undefined;
+```
+
+### useBrush
+
+Get the current brush state.
+
+- `start` is the starting point of the brush selection.
+- `current` is the current point of the brush selection.
+
+**useBrush Return Value:**
+
+`{ start, current }` - The brush state.
+
+```tsx
+type ReturnValue = { start: { x: number; y: number }; current: { x: number; y: number } } | null;
+```
+
+### useChartApiContext
+
+The `useChartApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProvider` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<Partial<{}>>;
+```
+
+### useChartCartesianAxis
+
+**useChartCartesianAxis Parameters:**
+
+| Parameter | Type                                                      | Default | Description |
+| :-------- | :-------------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartCartesianAxisSignature<any>>` | -       | -           |
+
+**useChartCartesianAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartCartesianAxisSignature<any>>;
+```
+
+### useChartClosestPoint
+
+**useChartClosestPoint Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartClosestPointSignature>` | -       | -           |
+
+**useChartClosestPoint Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartClosestPointSignature>;
+```
+
+### useChartGradientId
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+
+**useChartGradientId Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientId Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartGradientIdObjectBound
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+
+**useChartGradientIdObjectBound Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientIdObjectBound Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartHighlight
+
+**useChartHighlight Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartHighlightSignature<any>>` | -       | -           |
+
+**useChartHighlight Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartHighlightSignature<any>>;
+```
+
+### useChartId
+
+Get the unique identifier of the chart.
+
+**useChartId Return Value:**
+
+chartId if it exists.
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### useChartInteraction
+
+**useChartInteraction Parameters:**
+
+| Parameter | Type                                               | Default | Description |
+| :-------- | :------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartInteractionSignature>` | -       | -           |
+
+**useChartInteraction Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartInteractionSignature>;
+```
+
+### useChartPolarAxis
+
+**useChartPolarAxis Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartPolarAxisSignature<any>>` | -       | -           |
+
+**useChartPolarAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartPolarAxisSignature<any>>;
+```
+
+### useChartPremiumApiRef
+
+Hook that instantiates a \[\[ChartPremiumApiRef]].
+The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+
+**useChartPremiumApiRef Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<
+  | ChartPremiumApi<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'composition',
+      ChartAnyPluginSignature[]
+    >
+  | undefined
+>;
+```
+
+### useChartProApiContext
+
+The `useChartProApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProviderPro` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartProApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<ChartProApi>;
+```
+
+### useChartProApiRef
+
+Hook that instantiates a \[\[ChartProApiRef]].
+The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+
+**useChartProApiRef Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<
+  | ChartProApi<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'composition',
+      ChartAnyPluginSignature[]
+    >
+  | undefined
+>;
+```
+
+### useChartProExport
+
+**useChartProExport Parameters:**
+
+| Parameter | Type                                             | Default | Description |
+| :-------- | :----------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProExportSignature>` | -       | -           |
+
+**useChartProExport Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProExportSignature>;
+```
+
+### useChartProZoom
+
+**useChartProZoom Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProZoomSignature>` | -       | -           |
+
+**useChartProZoom Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProZoomSignature>;
+```
+
+### useChartRootRef
+
+Get the ref for the root chart element.
+
+**useChartRootRef Return Value:**
+
+The root chart element ref.
+
+```tsx
+type ReturnValue = React.RefObject<Element | null>;
+```
+
+### useChartsLayerContainerRef
+
+Get the ref for the chart surface element.
+
+**useChartsLayerContainerRef Return Value:**
+
+The chart surface ref.
+
+```tsx
+type ReturnValue = React.RefObject<HTMLDivElement | null>;
+```
+
+### useChartsLocalization
+
+**useChartsLocalization Return Value:**
+
+```tsx
+type ReturnValue = ChartsLocalizationContextValue;
+```
+
+### useChartTooltip
+
+**useChartTooltip Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartTooltipSignature<any>>` | -       | -           |
+
+**useChartTooltip Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartTooltipSignature<any>>;
+```
+
+### useChartVisibilityManager
+
+**useChartVisibilityManager Parameters:**
+
+| Parameter | Type                                                          | Default | Description |
+| :-------- | :------------------------------------------------------------ | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartVisibilityManagerSignature<any>>` | -       | -           |
+
+**useChartVisibilityManager Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartVisibilityManagerSignature<any>>;
+```
+
+### useChartZAxis
+
+**useChartZAxis Parameters:**
+
+| Parameter | Type                                         | Default | Description |
+| :-------- | :------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartZAxisSignature>` | -       | -           |
+
+**useChartZAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartZAxisSignature>;
+```
+
+### useDataset
+
+Get access to the dataset used to populate series and axes data.
+
+**useDataset Return Value:**
+
+The dataset array if provided, otherwise undefined.
+
+```tsx
+type ReturnValue = Readonly<DatasetElementType<unknown>[]> | undefined;
+```
+
+### useDrawingArea
+
+Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
+
+It includes the left, top, width, height, bottom, and right dimensions.
+
+**useDrawingArea Return Value:**
+
+The drawing area dimensions.
+
+```tsx
+type ReturnValue = ChartDrawingArea;
+```
+
+### useFocusedItem
+
+Get the focused item from keyboard navigation.
+
+**useFocusedItem Return Value:**
+
+```tsx
+type ReturnValue = FocusedItemIdentifier | null;
+```
+
+### useFunnelSeries
+
+Get access to the internal state of funnel series.
+
+**useFunnelSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useFunnelSeries Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue = DefaultizedFunnelSeriesType | undefined;
+```
+
+### useFunnelSeriesContext
+
+Get access to the internal state of funnel series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useFunnelSeriesContext Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useGaugeState
+
+**useGaugeState Return Value:**
+
+```tsx
+type ReturnValue = {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  cx: number;
+  cy: number;
+  maxRadius: number;
+  valueAngle: number | null;
+};
+```
+
+### useHeatmapSeries
+
+Get access to the internal state of heatmap series.
+
+**useHeatmapSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useHeatmapSeries Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue = DefaultizedHeatmapSeriesType | undefined;
+```
+
+### useHeatmapSeriesContext
+
+Get access to the internal state of heatmap series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useHeatmapSeriesContext Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useIsZoomInteracting
+
+Get access to the zoom state.
+
+**useIsZoomInteracting Return Value:**
+
+Inform the zoom is interacting.
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### useItemHighlightState
+
+A hook to check the highlighted state of the item.
+This function already calculates that an item is not faded if it is highlighted.
+
+If you need fine control over the state, use the `useItemHighlightStateGetter` hook instead.
+
+**useItemHighlightState Parameters:**
+
+| Parameter | Type                                                                                                                                      | Default | Description          |
+| :-------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------- |
+| item      | `UseItemHighlightedParams<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>` | -       | is the item to check |
+
+**useItemHighlightState Return Value:**
+
+the state of the item
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useItemHighlightStateGetter
+
+A hook to get a callback that returns the highlight state of an item.
+
+If you're interested by a single item, consider using `useItemHighlightState`.
+
+**useItemHighlightStateGetter Return Value:**
+
+callback to get the highlight state of an item.
+
+```tsx
+type ReturnValue = (
+  item:
+    | SankeyItemIdentifier
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | { type: 'rangeBar'; seriesId: string; dataIndex?: number }
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | null,
+) => HighlightState;
+```
+
+### useItemTooltip
+
+Returns a config object when the tooltip contains a single item to display.
+Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+
+**useItemTooltip Return Value:**
+
+The tooltip item config
+
+```tsx
+type ReturnValue = UseItemTooltipReturnValue<
+  'bar' | 'line' | 'scatter' | 'pie' | 'heatmap' | 'funnel' | 'sankey' | 'rangeBar' | 'ohlc'
+> | null;
+```
+
+### useLegend
+
+Get the legend items to display.
+
+This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+
+An alternative is to use the `useSeries` hook and format the legend items yourself.
+
+**useLegend Return Value:**
+
+legend data
+
+| Property | Type                       | Description |
+| :------- | :------------------------- | :---------- |
+| items    | `SeriesLegendItemParams[]` | -           |
+
+### useLineSeries
+
+Get access to the internal state of line series.
+
+**useLineSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useLineSeries Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'line';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        | 'bar'
+        | 'line'
+        | 'scatter'
+        | 'pie'
+        | 'radar'
+        | 'heatmap'
+        | 'funnel'
+        | 'sankey'
+        | 'rangeBar'
+        | 'ohlc'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      baseline?: number | 'min' | 'max';
+      stackOffset?: StackOffsetType;
+      stack?: string;
+      stackOrder?: StackOrderType;
+      area?: boolean;
+      curve?: CurveType;
+      strictStepCurve?: boolean;
+      showMark?: boolean | ((params: ShowMarkParams) => boolean);
+      shape?: MarkShape;
+      disableHighlight?: boolean;
+      connectNulls?: boolean;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useLineSeriesContext
+
+Get access to the internal state of line series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useLineSeriesContext Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'line'> | undefined;
+```
+
+### useOHLCSeries
+
+Get access to the internal state of OHLC series.
+
+**useOHLCSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useOHLCSeries Return Value:**
+
+the OHLC series
+
+```tsx
+type ReturnValue = DefaultizedOHLCSeriesType | undefined;
+```
+
+### useOHLCSeriesContext
+
+Get access to the internal state of OHLC series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useOHLCSeriesContext Return Value:**
+
+the OHLC series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### usePieSeries
+
+Get access to the internal state of pie series.
+
+**usePieSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**usePieSeries Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue = DefaultizedPieSeriesType | undefined;
+```
+
+### usePieSeriesContext
+
+Get access to the internal state of pie series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**usePieSeriesContext Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadarAxis
+
+Returns an array with one item per metric with the different points to label.
+
+**useRadarAxis Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| params    | `UseRadarAxisParams` | -       | -           |
+
+**useRadarAxis Return Value:**
+
+```tsx
+type ReturnValue = {
+  metric: string;
+  angle: number;
+  center: { x: number; y: number };
+  labels: { x: number; y: number; value: number | Date; formattedValue: string }[];
+} | null;
+```
+
+### useRadarItemTooltip
+
+Contains an object per value with their content and the label of the associated metric.
+
+**useRadarItemTooltip Return Value:**
+
+The tooltip item configs
+
+```tsx
+type ReturnValue = UseRadarItemTooltipReturnValue | null;
+```
+
+### useRadarSeries
+
+Get access to the internal state of radar series.
+
+**useRadarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useRadarSeries Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue = DefaultizedRadarSeriesType | undefined;
+```
+
+### useRadarSeriesContext
+
+Get access to the internal state of radar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useRadarSeriesContext Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadiusAxes
+
+Get all the radius axes for polar charts.
+
+Returns all radial axes configured in polar charts along with their IDs.
+Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+
+**useRadiusAxes Return Value:**
+
+An object containing:
+
+- `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `radiusAxisIds`: An array of all radius axis IDs in the chart
+
+| Property      | Type                                           | Description |
+| :------------ | :--------------------------------------------- | :---------- |
+| radiusAxis    | `DefaultizedAxisConfig<ChartsRadiusAxisProps>` | -           |
+| radiusAxisIds | `string[]`                                     | -           |
+
+### useRadiusAxis
+
+Get a specific radius axis or the default radius axis for polar charts.
+
+Returns the configuration and scale for a radial axis in polar charts.
+The radius axis controls the radial distance of data points from the center of the circle.
+
+**useRadiusAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                           |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's radius axis configurationUndefined to get the default (first) radius axis |
+
+**useRadiusAxis Return Value:**
+
+The radius axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRadiusAxisProps
+    >
+  | undefined;
+```
+
+### useRadiusScale
+
+Get the radius scale.
+
+**useRadiusScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                           |
+| :-------- | :----------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `radiusAxis` propUndefined to get the default radius axis |
+
+**useRadiusScale Return Value:**
+
+The radius axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useRangeBarSeries
+
+Get access to the internal state of range bar series.
+
+**useRangeBarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useRangeBarSeries Return Value:**
+
+the range bar series
+
+```tsx
+type ReturnValue = DefaultizedRangeBarSeriesType | undefined;
+```
+
+### useRangeBarSeriesContext
+
+Get access to the internal state of range bar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useRangeBarSeriesContext Return Value:**
+
+the range bar series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRotationAxes
+
+Get all the rotation axes for polar charts.
+
+Returns all rotation axes configured in polar charts along with their IDs.
+Rotation axes are used in charts like `RadarChart` to define angular positioning.
+
+**useRotationAxes Return Value:**
+
+An object containing:
+
+- `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `rotationAxisIds`: An array of all rotation axis IDs in the chart
+
+| Property        | Type                                             | Description |
+| :-------------- | :----------------------------------------------- | :---------- |
+| rotationAxis    | `DefaultizedAxisConfig<ChartsRotationAxisProps>` | -           |
+| rotationAxisIds | `string[]`                                       | -           |
+
+### useRotationAxis
+
+Get a specific rotation axis or the default rotation axis for polar charts.
+
+Returns the configuration and scale for a rotation axis in polar charts.
+The rotation axis controls the angular positioning of data points around the circle.
+
+**useRotationAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                               |
+| :-------- | :------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's rotation axis configurationUndefined to get the default (first) rotation axis |
+
+**useRotationAxis Return Value:**
+
+The rotation axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRotationAxisProps
+    >
+  | undefined;
+```
+
+### useRotationScale
+
+Get the rotation scale.
+
+**useRotationScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                               |
+| :-------- | :----------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `rotationAxis` propUndefined to get the default rotation axis |
+
+**useRotationScale Return Value:**
+
+The rotation axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useScatterSeries
+
+Get access to the internal state of scatter series.
+
+**useScatterSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useScatterSeries Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue = DefaultizedScatterSeriesType | undefined;
+```
+
+### useScatterSeriesContext
+
+Get access to the internal state of scatter series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useScatterSeriesContext Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useSeries
+
+Get access to the internal state of series.
+Structured by type of series:
+{ seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: \[id1, ...] } }
+
+**useSeries Return Value:**
+
+FormattedSeries series
+
+```tsx
+type ReturnValue = ProcessedSeries;
+```
+
+### useXAxes
+
+Get all the x-axes.
+
+Returns all X axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useXAxes Return Value:**
+
+An object containing:
+
+- `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `xAxisIds`: An array of all X axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| xAxis    | `ComputedAxisConfig<ChartsXAxisProps>` | -           |
+| xAxisIds | `AxisId[]`                             | -           |
+
+### useXAxis
+
+Get a specific X axis or the default X axis.
+
+**useXAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXAxis Return Value:**
+
+The configuration for a single X axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsXAxisProps
+>;
+```
+
+### useXAxisCoordinates
+
+Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+
+**useXAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisCoordinates Return Value:**
+
+The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useXAxisTicks
+
+Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useXAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useXColorScale
+
+Get the X axis color scale.
+
+**useXColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useXColorScale Return Value:**
+
+The color scale for the specified X axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useXScale
+
+Get the X scale.
+
+**useXScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXScale Return Value:**
+
+The X axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useYAxes
+
+Get all the y-axes.
+
+Returns all Y axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useYAxes Return Value:**
+
+An object containing:
+
+- `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `yAxisIds`: An array of all Y axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| yAxis    | `ComputedAxisConfig<ChartsYAxisProps>` | -           |
+| yAxisIds | `AxisId[]`                             | -           |
+
+### useYAxis
+
+Get a specific Y axis or the default Y axis.
+
+**useYAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYAxis Return Value:**
+
+The configuration for a single Y axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsYAxisProps
+>;
+```
+
+### useYAxisCoordinates
+
+Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+
+**useYAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisCoordinates Return Value:**
+
+The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useYAxisTicks
+
+Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useYAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useYColorScale
+
+Get the Y axis color scale.
+
+**useYColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useYColorScale Return Value:**
+
+The color scale for the specified Y axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useYScale
+
+Get the Y scale.
+
+**useYScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYScale Return Value:**
+
+The Y axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useZAxes
+
+**useZAxes Return Value:**
+
+| Property | Type                     | Description |
+| :------- | :----------------------- | :---------- |
+| zAxis    | `DefaultizedZAxisConfig` | -           |
+| zAxisIds | `AxisId[]`               | -           |
+
+### useZAxis
+
+**useZAxis Parameters:**
+
+| Parameter  | Type               | Default | Description |
+| :--------- | :----------------- | :------ | :---------- |
+| identifier | `number \| string` | -       | -           |
+
+**useZAxis Return Value:**
+
+```tsx
+type ReturnValue = ZAxisDefaultized;
+```
+
+### useZColorScale
+
+Get the Z axis color scale.
+
+**useZColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useZColorScale Return Value:**
+
+The color scale for the specified Z axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### yellowPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+## Additional Types
+
+### AllSeriesType
+
+```typescript
+type AllSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | MakeOptional<PieValueType, 'id'>[]
+    | number[]
+    | FunnelValueType[]
+    | SankeyData
+    | (RangeBarValueType | null)[]
+    | (OHLCValueType | null)[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<MakeOptional<PieValueType, 'id'>>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null)
+    | SeriesValueFormatter<RangeBarValueType | null>
+    | ((value: number | null, context: { dataIndex: number; field: OHLCField }) => string | null);
+  /** The id of this series. */
+  id?: SeriesId;
+};
+```
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AXIS_LABEL_DEFAULT_HEIGHT
+
+```typescript
+type AXIS_LABEL_DEFAULT_HEIGHT = 20;
+```
+
+### axisClasses
+
+```typescript
+type axisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### AxisConfig
+
+Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
+
+```typescript
+type AxisConfig<S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear', V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = { offset?: number } & CommonAxisConfig<S, V> & { min?: NumberValue; max?: NumberValue } | {} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<{ scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear'; scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>; colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig }, 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension
+```
+
+### AxisCoordinates
+
+```typescript
+type AxisCoordinates = { left: number; top: number; right: number; bottom: number };
+```
+
+### AxisItemIdentifier
+
+Identifies a data point within an axis.
+
+```typescript
+type AxisItemIdentifier = {
+  /** The axis id. */
+  axisId: AxisId;
+  /** The data index. */
+  dataIndex: number;
+};
+```
+
+### AxisValueFormatterContext
+
+```typescript
+type AxisValueFormatterContext<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+> =
+  | { location: 'legend' }
+  | {
+      location: 'tooltip' | 'zoom-slider-tooltip';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+    }
+  | {
+      location: 'tick';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+      defaultTickLabel: string;
+      tickNumber?: number;
+    };
+```
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BAR_CHART_PREMIUM_PLUGINS
+
+```typescript
+type BAR_CHART_PREMIUM_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BAR_CHART_PRO_PLUGINS
+
+```typescript
+type BAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartPremiumPluginSignatures
+
+```typescript
+type BarChartPremiumPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartPremiumProps
+
+````typescript
+type BarChartPremiumProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartPremiumSlotProps;
+  /** Callback fired when a bar or range bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
+   */
+  series: (RangeBarSeriesType | BarSeries)[];
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartPremiumSlotProps
+
+```typescript
+type BarChartPremiumSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartPremiumSlots
+
+```typescript
+type BarChartPremiumSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### BarChartProPluginSignatures
+
+```typescript
+type BarChartProPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartProProps
+
+````typescript
+type BarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartProSlotProps
+
+```typescript
+type BarChartProSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartProSlots
+
+```typescript
+type BarChartProSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'label' | 'root' | 'series' | 'element' | 'seriesLabels' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  classes?: Partial<BarClasses>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarItemIdentifier
+
+An object that allows to identify a single bar.
+Used for item interaction
+
+```typescript
+type BarItemIdentifier = { type: 'bar'; seriesId: string; dataIndex: number };
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+### BarSeriesType
+
+```typescript
+type BarSeriesType = {
+  type: 'bar';
+  /** Data associated to each bar. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize?: number;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### BarValueType
+
+```typescript
+type BarValueType = number;
+```
+
+### blueberryTwilightPaletteDark
+
+```typescript
+type blueberryTwilightPaletteDark = string[];
+```
+
+### blueberryTwilightPaletteLight
+
+```typescript
+type blueberryTwilightPaletteLight = string[];
+```
+
+### bluePaletteDark
+
+```typescript
+type bluePaletteDark = string[];
+```
+
+### bluePaletteLight
+
+```typescript
+type bluePaletteLight = string[];
+```
+
+### CandlestickChartProps
+
+````typescript
+type CandlestickChartProps = {
+  /**
+   * The series to display in the candlestick chart.
+   * An array of [[OHLCSeries]] objects.
+   *
+   * Currently, only one OHLC series is supported. If would like to display more than one OHLC
+   * series, open an issue at https://github.com/mui/mui-x explaining your use case.
+   */
+  series: OHLCSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line', y: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: CandlestickChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: CandlestickChartSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: OHLCItemIdentifier | Omit<OHLCItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: OHLCItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { ohlc: ChartSeriesTypeConfig<'ohlc'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'ohlc';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'ohlc';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### CandlestickChartSlotProps
+
+```typescript
+type CandlestickChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### CandlestickChartSlots
+
+```typescript
+type CandlestickChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### CandlestickPlotProps
+
+```typescript
+type CandlestickPlotProps = {};
+```
+
+### CartesianChartSeriesType
+
+```typescript
+type CartesianChartSeriesType =
+  | 'bar'
+  | 'line'
+  | 'scatter'
+  | 'heatmap'
+  | 'funnel'
+  | 'rangeBar'
+  | 'ohlc';
+```
+
+### CategoryAxis
+
+```typescript
+type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = {
+  /**
+   * The categories to be displayed on the axis.
+   * The order of the categories is the order in which they are displayed.
+   */
+  categories?: string[];
+  /**
+   * The position of the axis.
+   * - 'left' - The axis is positioned on the left side of the chart.
+   * - 'right' - The axis is positioned on the right side of the chart.
+   * - 'top' - The axis is positioned on the top side of the chart.
+   * - 'bottom' - The axis is positioned on the bottom side of the chart.
+   * - 'none' - The axis is not displayed.
+   */
+  position?: 'left' | 'right' | 'top' | 'bottom' | 'none';
+  /**
+   * The size of the axis.
+   * - If the axis is horizontal, the size is the height of the axis.
+   * - If the axis is vertical, the size is the width of the axis.
+   * - If set to `'auto'`, the size is automatically calculated based on tick label measurements.
+   */
+  size?: number | 'auto';
+  scaleType?: 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### ChartApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartApi<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'composition' | undefined = undefined,
+  TSignatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### chartAxisZoomSliderThumbClasses
+
+```typescript
+type chartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClasses
+
+```typescript
+type ChartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartAxisZoomSliderTrackClasses
+
+```typescript
+type chartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClasses
+
+```typescript
+type ChartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartBaseButtonProps
+
+```typescript
+type ChartBaseButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+```
+
+### ChartBaseCommonProps
+
+```typescript
+type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+```
+
+### ChartBaseIconButtonProps
+
+```typescript
+type ChartBaseIconButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
+};
+```
+
+### ChartBaseIconProps
+
+```typescript
+type ChartBaseIconProps = React.DOMAttributes<SVGSVGElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+```
+
+### ChartDrawingArea
+
+```typescript
+type ChartDrawingArea = {
+  /** The gap between the left border of the SVG and the drawing area. */
+  left: number;
+  /** The gap between the top border of the SVG and the drawing area. */
+  top: number;
+  /** The gap between the bottom border of the SVG and the drawing area. */
+  bottom: number;
+  /** The gap between the right border of the SVG and the drawing area. */
+  right: number;
+  /** The width of the drawing area. */
+  width: number;
+  /** The height of the drawing area. */
+  height: number;
+};
+```
+
+### ChartPremiumApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartPremiumApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### ChartProApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartProApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### ChartsAxisClasses
+
+```typescript
+type ChartsAxisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### ChartsAxisClassKey
+
+```typescript
+type ChartsAxisClassKey =
+  | 'line'
+  | 'label'
+  | 'tick'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'root'
+  | 'tickContainer'
+  | 'tickLabel'
+  | 'directionX'
+  | 'directionY';
+```
+
+### ChartsAxisData
+
+The data format returned by onAxisClick.
+
+```typescript
+type ChartsAxisData = {
+  /** The index in the axis' data property. */
+  dataIndex: number;
+  /** Tha value associated to the axis item. */
+  axisValue: number | Date | string;
+  /** The mapping of series ids to their value for this particular axis index. */
+  seriesValues: Record<string, number | null | undefined>;
+};
+```
+
+### chartsAxisHighlightClasses
+
+```typescript
+type chartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClasses
+
+```typescript
+type ChartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClassKey
+
+```typescript
+type ChartsAxisHighlightClassKey = 'root';
+```
+
+### ChartsAxisHighlightPath
+
+```typescript
+type ChartsAxisHighlightPath = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: { axisHighlight: ChartsAxisHighlightType } },
+  Pick<
+    React.SVGProps<SVGPathElement>,
+    | 'string'
+    | 'id'
+    | 'min'
+    | 'max'
+    | 'type'
+    | 'color'
+    | 'scale'
+    | 'className'
+    | 'offset'
+    | 'end'
+    | 'height'
+    | 'x'
+    | 'style'
+    | 'width'
+    | 'ref'
+    | 'dominantBaseline'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'media'
+    | 'method'
+    | 'name'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'target'
+    | 'role'
+    | 'tabIndex'
+    | 'crossOrigin'
+    | 'accentHeight'
+    | 'accumulate'
+    | 'additive'
+    | 'alignmentBaseline'
+    | 'allowReorder'
+    | 'alphabetic'
+    | 'amplitude'
+    | 'arabicForm'
+    | 'ascent'
+    | 'attributeName'
+    | 'attributeType'
+    | 'autoReverse'
+    | 'azimuth'
+    | 'baseFrequency'
+    | 'baselineShift'
+    | 'baseProfile'
+    | 'bbox'
+    | 'begin'
+    | 'bias'
+    | 'by'
+    | 'calcMode'
+    | 'capHeight'
+    | 'clip'
+    | 'clipPath'
+    | 'clipPathUnits'
+    | 'clipRule'
+    | 'colorInterpolation'
+    | 'colorInterpolationFilters'
+    | 'colorProfile'
+    | 'colorRendering'
+    | 'contentScriptType'
+    | 'contentStyleType'
+    | 'cursor'
+    | 'cx'
+    | 'cy'
+    | 'd'
+    | 'decelerate'
+    | 'descent'
+    | 'diffuseConstant'
+    | 'direction'
+    | 'display'
+    | 'divisor'
+    | 'dur'
+    | 'dx'
+    | 'dy'
+    | 'edgeMode'
+    | 'elevation'
+    | 'enableBackground'
+    | 'exponent'
+    | 'externalResourcesRequired'
+    | 'fill'
+    | 'fillOpacity'
+    | 'fillRule'
+    | 'filter'
+    | 'filterRes'
+    | 'filterUnits'
+    | 'floodColor'
+    | 'floodOpacity'
+    | 'focusable'
+    | 'fontFamily'
+    | 'fontSize'
+    | 'fontSizeAdjust'
+    | 'fontStretch'
+    | 'fontStyle'
+    | 'fontVariant'
+    | 'fontWeight'
+    | 'format'
+    | 'fr'
+    | 'from'
+    | 'fx'
+    | 'fy'
+    | 'g1'
+    | 'g2'
+    | 'glyphName'
+    | 'glyphOrientationHorizontal'
+    | 'glyphOrientationVertical'
+    | 'glyphRef'
+    | 'gradientTransform'
+    | 'gradientUnits'
+    | 'hanging'
+    | 'horizAdvX'
+    | 'horizOriginX'
+    | 'href'
+    | 'ideographic'
+    | 'imageRendering'
+    | 'in2'
+    | 'in'
+    | 'intercept'
+    | 'k1'
+    | 'k2'
+    | 'k3'
+    | 'k4'
+    | 'k'
+    | 'kernelMatrix'
+    | 'kernelUnitLength'
+    | 'kerning'
+    | 'keyPoints'
+    | 'keySplines'
+    | 'keyTimes'
+    | 'lengthAdjust'
+    | 'letterSpacing'
+    | 'lightingColor'
+    | 'limitingConeAngle'
+    | 'local'
+    | 'markerEnd'
+    | 'markerHeight'
+    | 'markerMid'
+    | 'markerStart'
+    | 'markerUnits'
+    | 'markerWidth'
+    | 'mask'
+    | 'maskContentUnits'
+    | 'maskUnits'
+    | 'mathematical'
+    | 'mode'
+    | 'numOctaves'
+    | 'opacity'
+    | 'operator'
+    | 'order'
+    | 'orient'
+    | 'orientation'
+    | 'origin'
+    | 'overflow'
+    | 'overlinePosition'
+    | 'overlineThickness'
+    | 'paintOrder'
+    | 'panose1'
+    | 'path'
+    | 'pathLength'
+    | 'patternContentUnits'
+    | 'patternTransform'
+    | 'patternUnits'
+    | 'pointerEvents'
+    | 'points'
+    | 'pointsAtX'
+    | 'pointsAtY'
+    | 'pointsAtZ'
+    | 'preserveAlpha'
+    | 'preserveAspectRatio'
+    | 'primitiveUnits'
+    | 'r'
+    | 'radius'
+    | 'refX'
+    | 'refY'
+    | 'renderingIntent'
+    | 'repeatCount'
+    | 'repeatDur'
+    | 'requiredExtensions'
+    | 'requiredFeatures'
+    | 'restart'
+    | 'result'
+    | 'rotate'
+    | 'rx'
+    | 'ry'
+    | 'seed'
+    | 'shapeRendering'
+    | 'slope'
+    | 'spacing'
+    | 'specularConstant'
+    | 'specularExponent'
+    | 'speed'
+    | 'spreadMethod'
+    | 'startOffset'
+    | 'stdDeviation'
+    | 'stemh'
+    | 'stemv'
+    | 'stitchTiles'
+    | 'stopColor'
+    | 'stopOpacity'
+    | 'strikethroughPosition'
+    | 'strikethroughThickness'
+    | 'stroke'
+    | 'strokeDasharray'
+    | 'strokeDashoffset'
+    | 'strokeLinecap'
+    | 'strokeLinejoin'
+    | 'strokeMiterlimit'
+    | 'strokeOpacity'
+    | 'strokeWidth'
+    | 'surfaceScale'
+    | 'systemLanguage'
+    | 'tableValues'
+    | 'targetX'
+    | 'targetY'
+    | 'textAnchor'
+    | 'textDecoration'
+    | 'textLength'
+    | 'textRendering'
+    | 'to'
+    | 'transform'
+    | 'u1'
+    | 'u2'
+    | 'underlinePosition'
+    | 'underlineThickness'
+    | 'unicode'
+    | 'unicodeBidi'
+    | 'unicodeRange'
+    | 'unitsPerEm'
+    | 'vAlphabetic'
+    | 'values'
+    | 'vectorEffect'
+    | 'version'
+    | 'vertAdvY'
+    | 'vertOriginX'
+    | 'vertOriginY'
+    | 'vHanging'
+    | 'vIdeographic'
+    | 'viewBox'
+    | 'viewTarget'
+    | 'visibility'
+    | 'vMathematical'
+    | 'widths'
+    | 'wordSpacing'
+    | 'writingMode'
+    | 'x1'
+    | 'x2'
+    | 'xChannelSelector'
+    | 'xHeight'
+    | 'xlinkActuate'
+    | 'xlinkArcrole'
+    | 'xlinkHref'
+    | 'xlinkRole'
+    | 'xlinkShow'
+    | 'xlinkTitle'
+    | 'xlinkType'
+    | 'xmlBase'
+    | 'xmlLang'
+    | 'xmlns'
+    | 'xmlnsXlink'
+    | 'xmlSpace'
+    | 'y1'
+    | 'y2'
+    | 'y'
+    | 'yChannelSelector'
+    | 'z'
+    | 'zoomAndPan'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### ChartsAxisHighlightProps
+
+```typescript
+type ChartsAxisHighlightProps = { x?: ChartsAxisHighlightType; y?: ChartsAxisHighlightType };
+```
+
+### ChartsAxisHighlightType
+
+```typescript
+type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+```
+
+### ChartsAxisProps
+
+```typescript
+type ChartsAxisProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsAxisSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsAxisSlotProps;
+};
+```
+
+### ChartsAxisSlotProps
+
+```typescript
+type ChartsAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisSlots
+
+```typescript
+type ChartsAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisTooltipContentClasses
+
+```typescript
+type ChartsAxisTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsAxisTooltipContentProps
+
+```typescript
+type ChartsAxisTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### chartsAxisZoomSliderThumbClasses
+
+```typescript
+type chartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClasses
+
+```typescript
+type ChartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartsAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartsAxisZoomSliderTrackClasses
+
+```typescript
+type chartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClasses
+
+```typescript
+type ChartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartsAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartsBaseSlots
+
+```typescript
+type ChartsBaseSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### ChartsClipPathProps
+
+```typescript
+type ChartsClipPathProps = {
+  /** The id of the clip path. */
+  id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
+  offset?: { top?: number; right?: number; bottom?: number; left?: number };
+};
+```
+
+### ChartsColor
+
+```typescript
+type ChartsColor = string | ChartsColorCallback;
+```
+
+### ChartsColorPalette
+
+```typescript
+type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+```
+
+### ChartsContainerPremiumProps
+
+```typescript
+type ChartsContainerPremiumProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderPremiumSlots>;
+    slotProps?: Partial<ChartsDataProviderPremiumSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsContainerPremiumSlotProps
+
+```typescript
+type ChartsContainerPremiumSlotProps = {};
+```
+
+### ChartsContainerPremiumSlots
+
+```typescript
+type ChartsContainerPremiumSlots = {};
+```
+
+### ChartsContainerProProps
+
+```typescript
+type ChartsContainerProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsDataProviderPremiumProps
+
+```typescript
+type ChartsDataProviderPremiumProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderPremiumSlots>;
+    slotProps?: Partial<ChartsDataProviderPremiumSlotProps>;
+  };
+```
+
+### ChartsDataProviderPremiumSlotProps
+
+```typescript
+type ChartsDataProviderPremiumSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderPremiumSlots
+
+```typescript
+type ChartsDataProviderPremiumSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ChartsDataProviderProProps
+
+```typescript
+type ChartsDataProviderProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  };
+```
+
+### ChartsDataProviderProps
+
+```typescript
+type ChartsDataProviderProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartPolarAxisSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+    UseChartClosestPointSignature,
+    UseChartKeyboardNavigationSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  };
+```
+
+### ChartsDataProviderProSlotProps
+
+```typescript
+type ChartsDataProviderProSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderProSlots
+
+```typescript
+type ChartsDataProviderProSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ChartsDataProviderSlotProps
+
+```typescript
+type ChartsDataProviderSlotProps = {
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ChartsDataProviderSlots
+
+```typescript
+type ChartsDataProviderSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### chartsGridClasses
+
+```typescript
+type chartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClasses
+
+```typescript
+type ChartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClassKey
+
+```typescript
+type ChartsGridClassKey = 'line' | 'root' | 'horizontalLine' | 'verticalLine';
+```
+
+### ChartsGridProps
+
+```typescript
+type ChartsGridProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Displays vertical grid. */
+  vertical?: boolean;
+  /** Displays horizontal grid. */
+  horizontal?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsGridClasses>;
+};
+```
+
+### ChartsIconSlots
+
+```typescript
+type ChartsIconSlots = {};
+```
+
+### ChartsItemTooltipContentClasses
+
+```typescript
+type ChartsItemTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsItemTooltipContentProps
+
+```typescript
+type ChartsItemTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabel
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabel = unknown;
+```
+
+### ChartsLabelClasses
+
+```typescript
+type ChartsLabelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsLabelCustomMarkProps
+
+```typescript
+type ChartsLabelCustomMarkProps = {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+};
+```
+
+### ChartsLabelGradientClasses
+
+```typescript
+type ChartsLabelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### ChartsLabelMark
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabelMark = unknown;
+```
+
+### ChartsLabelMarkClasses
+
+```typescript
+type ChartsLabelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### ChartsLabelMarkProps
+
+```typescript
+type ChartsLabelMarkProps = {
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type?: ChartsLabelMarkType;
+  /**
+   * The mark will be rendered as a combination of a line and the specified mark type.
+   * The line will be rendered first, followed by the mark.
+   * Only used if `type='line+mark'`.
+   */
+  markShape?: MarkShape;
+  /** The color of the mark. */
+  color?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelMarkClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabelProps
+
+```typescript
+type ChartsLabelProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLegendClasses
+
+```typescript
+type ChartsLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### ChartsLegendPosition
+
+```typescript
+type ChartsLegendPosition = {
+  /**
+   * The position of the legend in relation to the chart.
+   * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+   * If customization is needed, simply use the composition pattern.
+   */
+  position?: Position;
+};
+```
+
+### ChartsLegendProps
+
+```typescript
+type ChartsLegendProps = {
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: SeriesLegendItemContext,
+    index: number,
+  ) => void;
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction?: Direction;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLegendClasses>;
+  /**
+   * If `true`, clicking on a legend item will toggle the visibility of the corresponding series.
+   * @default false
+   */
+  toggleVisibilityOnClick?: boolean;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+};
+```
+
+### ChartsLegendSlotExtension
+
+```typescript
+type ChartsLegendSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsLegendSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsLegendSlotProps;
+};
+```
+
+### ChartsLegendSlotProps
+
+```typescript
+type ChartsLegendSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+};
+```
+
+### ChartsLegendSlots
+
+```typescript
+type ChartsLegendSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+};
+```
+
+### ChartsLocalizationProviderProps
+
+```typescript
+type ChartsLocalizationProviderProps = {
+  children?: React.ReactNode;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+};
+```
+
+### ChartsPieSorting
+
+```typescript
+type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
+```
+
+### ChartsReferenceLineClasses
+
+```typescript
+type ChartsReferenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### ChartsReferenceLineClassKey
+
+```typescript
+type ChartsReferenceLineClassKey = 'line' | 'label' | 'root' | 'horizontal' | 'vertical';
+```
+
+### ChartsReferenceLineProps
+
+```typescript
+type ChartsReferenceLineProps = (
+  | { x?: undefined; y: string | number | Date }
+  | { y?: undefined; x: string | number | Date }
+) & {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+};
+```
+
+### ChartsRendererProps
+
+```typescript
+type ChartsRendererProps = {
+  dimensions: { id: string; label: string; data: (string | number | Date | null)[] }[];
+  values: { id: string; label: string; data: (number | null)[] }[];
+  chartType: string;
+  configuration: Record<string, any>;
+  onRender?: (
+    type: string,
+    props: Record<string, any>,
+    Component: React.ComponentType<any>,
+  ) => React.ReactNode;
+};
+```
+
+### chartsSurfaceClasses
+
+```typescript
+type chartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceClasses
+
+```typescript
+type ChartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceProps
+
+```typescript
+type ChartsSurfaceProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+};
+```
+
+### ChartsTextProps
+
+```typescript
+type ChartsTextProps = {
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /** Text displayed. */
+  text: string;
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### ChartsTextStyle
+
+```typescript
+type ChartsTextStyle = {
+  angle?: number;
+  /**
+   * The text baseline
+   * @default 'central'
+   */
+  dominantBaseline?: ChartsTextBaseline;
+  /**
+   * The text anchor
+   * @default 'middle'
+   */
+  textAnchor?: ChartsTextAnchor;
+};
+```
+
+### ChartsToolbarImageExportOptions
+
+```typescript
+type ChartsToolbarImageExportOptions = {
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
+   * @default 'image/png'
+   */
+  type: string;
+};
+```
+
+### ChartsToolbarImageExportTriggerProps
+
+```typescript
+type ChartsToolbarImageExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartsToolbarImageExportOptions;
+};
+```
+
+### ChartsToolbarPrintExportOptions
+
+```typescript
+type ChartsToolbarPrintExportOptions = {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartsToolbarPrintExportTriggerProps
+
+```typescript
+type ChartsToolbarPrintExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartPrintExportOptions;
+};
+```
+
+### ChartsToolbarProProps
+
+```typescript
+type ChartsToolbarProProps = {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+};
+```
+
+### ChartsToolbarProSlotProps
+
+```typescript
+type ChartsToolbarProSlotProps = {
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+};
+```
+
+### ChartsToolbarProSlots
+
+```typescript
+type ChartsToolbarProSlots = {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipCell
+
+```typescript
+type ChartsTooltipCell = StyledComponent<
+  Pick<
+    TypographyOwnProps &
+      CommonProps &
+      Omit<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+        | 'color'
+        | 'className'
+        | 'classes'
+        | 'sx'
+        | 'style'
+        | 'children'
+        | 'variant'
+        | 'align'
+        | 'gutterBottom'
+        | 'noWrap'
+        | 'variantMapping'
+      >,
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'classes'
+    | 'sx'
+    | 'style'
+    | 'ref'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'variant'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'gutterBottom'
+    | 'noWrap'
+    | 'variantMapping'
+  > &
+    MUIStyledCommonProps<Theme> & { component?: React.ElementType },
+  {},
+  {}
+>;
+```
+
+### chartsTooltipClasses
+
+```typescript
+type chartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClasses
+
+```typescript
+type ChartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClassKey
+
+```typescript
+type ChartsTooltipClassKey = 'root' | 'paper' | 'table' | 'row' | 'cell' | 'mark' | 'axisValueCell';
+```
+
+### ChartsTooltipContainerClasses
+
+```typescript
+type ChartsTooltipContainerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipContainerProps
+
+```typescript
+type ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  children?: React.ReactNode;
+};
+```
+
+### ChartsTooltipContainerSlotProps
+
+```typescript
+type ChartsTooltipContainerSlotProps = {};
+```
+
+### ChartsTooltipContainerSlots
+
+```typescript
+type ChartsTooltipContainerSlots = {};
+```
+
+### ChartsTooltipPaper
+
+```typescript
+type ChartsTooltipPaper = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipProps
+
+```typescript
+type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'axis' | 'none' | 'item';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### ChartsTooltipRow
+
+```typescript
+type ChartsTooltipRow = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipSlotProps
+
+```typescript
+type ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<ChartsTooltipProps<T>>;
+};
+```
+
+### ChartsTooltipSlots
+
+```typescript
+type ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    ChartsTooltipProps<T>,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipTable
+
+```typescript
+type ChartsTooltipTable = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'width'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'border'
+    | 'bgcolor'
+    | 'hidden'
+    | 'title'
+    | 'summary'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'frame'
+    | 'rules'
+  >,
+  {}
+>;
+```
+
+### ChartsTypeFeatureFlags
+
+```typescript
+type ChartsTypeFeatureFlags = {};
+```
+
+### ChartsXAxisProps
+
+```typescript
+type ChartsXAxisProps = {
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsXAxisSlotProps
+
+```typescript
+type ChartsXAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsXAxisSlots
+
+```typescript
+type ChartsXAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsXReferenceLineProps
+
+```typescript
+type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: TValue;
+};
+```
+
+### ChartsYAxisProps
+
+```typescript
+type ChartsYAxisProps = {
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsYAxisSlotProps
+
+```typescript
+type ChartsYAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsYAxisSlots
+
+```typescript
+type ChartsYAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsYReferenceLineProps
+
+```typescript
+type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: TValue;
+};
+```
+
+### cheerfulFiestaPaletteDark
+
+```typescript
+type cheerfulFiestaPaletteDark = string[];
+```
+
+### cheerfulFiestaPaletteLight
+
+```typescript
+type cheerfulFiestaPaletteLight = string[];
+```
+
+### ColorLegendSelector
+
+```typescript
+type ColorLegendSelector = {
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### ComputedPieRadius
+
+Props received when the parent components has done the percentage conversion.
+
+```typescript
+type ComputedPieRadius = {
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### configurationOptions
+
+```typescript
+type configurationOptions = {
+  [key: string]: {
+    label: string;
+    icon: (props: any) => React.ReactNode;
+    customization: GridChartsConfigurationSection[];
+    dimensionsLabel?: string;
+    valuesLabel?: string;
+    maxDimensions?: number;
+    maxValues?: number;
+  };
+};
+```
+
+### continuousColorLegendClasses
+
+```typescript
+type continuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendClasses
+
+```typescript
+type ContinuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendProps
+
+```typescript
+type ContinuousColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness?: number;
+};
+```
+
+### ContinuousScaleName
+
+```typescript
+type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
+```
+
+### CurveType
+
+The type of curve to use for the line.
+Read more about curves at
+[line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+
+```typescript
+type CurveType =
+  | 'catmullRom'
+  | 'linear'
+  | 'monotoneX'
+  | 'monotoneY'
+  | 'natural'
+  | 'step'
+  | 'stepBefore'
+  | 'stepAfter'
+  | 'bumpY'
+  | 'bumpX';
+```
+
+### cyanPaletteDark
+
+```typescript
+type cyanPaletteDark = string[];
+```
+
+### cyanPaletteLight
+
+```typescript
+type cyanPaletteLight = string[];
+```
+
+### DEFAULT_AXIS_SIZE_HEIGHT
+
+```typescript
+type DEFAULT_AXIS_SIZE_HEIGHT = 25;
+```
+
+### DEFAULT_AXIS_SIZE_WIDTH
+
+```typescript
+type DEFAULT_AXIS_SIZE_WIDTH = 45;
+```
+
+### DEFAULT_MARGINS
+
+```typescript
+type DEFAULT_MARGINS = { top: number; bottom: number; left: number; right: number };
+```
+
+### DEFAULT_RADIUS_AXIS_KEY
+
+```typescript
+type DEFAULT_RADIUS_AXIS_KEY = 'DEFAULT_RADIUS_AXIS_KEY';
+```
+
+### DEFAULT_ROTATION_AXIS_KEY
+
+```typescript
+type DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
+```
+
+### DEFAULT_X_AXIS_KEY
+
+```typescript
+type DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
+```
+
+### DEFAULT_Y_AXIS_KEY
+
+```typescript
+type DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+```
+
+### DefaultizedBarSeriesType
+
+```typescript
+type DefaultizedBarSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+};
+```
+
+### DefaultizedFunnelSeriesType
+
+```typescript
+type DefaultizedFunnelSeriesType = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### DefaultizedHeatmapSeriesType
+
+```typescript
+type DefaultizedHeatmapSeriesType = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### DefaultizedLineSeriesType
+
+```typescript
+type DefaultizedLineSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedOHLCSeriesType
+
+```typescript
+type DefaultizedOHLCSeriesType = {
+  hidden: boolean;
+  /** The color of the candle body when the close price is greater than or equal to the open price. */
+  upColor: string;
+  /** The color of the candle body when the close price is less than the open price. */
+  downColor: string;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  type: 'ohlc';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /** The id of this series. */
+  id: string;
+  /** The OHLC data points. */
+  data: (OHLCValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedPieSeriesType
+
+```typescript
+type DefaultizedPieSeriesType = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### DefaultizedPieValueType
+
+```typescript
+type DefaultizedPieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  color: string;
+  formattedValue: string;
+  hidden: boolean;
+};
+```
+
+### DefaultizedRadarSeriesType
+
+```typescript
+type DefaultizedRadarSeriesType = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedRangeBarSeriesType
+
+```typescript
+type DefaultizedRangeBarSeriesType = {
+  hidden: boolean;
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  type: 'rangeBar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each range bar. */
+  data: (RangeBarValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<RangeBarValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+};
+```
+
+### DefaultizedScatterSeriesType
+
+```typescript
+type DefaultizedScatterSeriesType = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### DefaultizedSeriesType
+
+```typescript
+type DefaultizedSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: CommonHighlightScope | SankeyHighlightScope;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | number[]
+    | (RangeBarValueType | null)[]
+    | (OHLCValueType | null)[]
+    | DefaultizedPieValueType[]
+    | MakeRequired<FunnelValueType, 'id' | 'color'>[]
+    | SankeyLayout<false>;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null)
+    | SeriesValueFormatter<RangeBarValueType | null>
+    | ((value: number | null, context: { dataIndex: number; field: OHLCField }) => string | null)
+    | SeriesValueFormatter<PieValueType>;
+};
+```
+
+### defaultSeriesConfigPremium
+
+```typescript
+type defaultSeriesConfigPremium = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+  rangeBar: ChartSeriesTypeConfig<'rangeBar'>;
+  ohlc: ChartSeriesTypeConfig<'ohlc'>;
+};
+```
+
+### defaultSeriesConfigPro
+
+```typescript
+type defaultSeriesConfigPro = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+};
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### FadeOptions
+
+```typescript
+type FadeOptions = 'none' | 'series' | 'global';
+```
+
+### FocusedItemIdentifier
+
+```typescript
+type FocusedItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### FUNNEL_CHART_PLUGINS
+
+```typescript
+type FUNNEL_CHART_PLUGINS = [
+  ChartPlugin<UseChartFunnelAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'funnel'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'funnel'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'funnel'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### FunnelChartPluginSignatures
+
+```typescript
+type FunnelChartPluginSignatures = FunnelChartPluginSignatures;
+```
+
+### FunnelChartProps
+
+````typescript
+type FunnelChartProps = {
+  /**
+   * The series to display in the funnel chart.
+   * An array of [[FunnelSeries]] objects.
+   */
+  series: FunnelSeries[];
+  /**
+   * The configuration of the category axis.
+   * @default { position: 'none' }
+   */
+  categoryAxis?: CategoryAxis;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: FunnelItemIdentifier | Omit<FunnelItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: FunnelItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { funnel: ChartSeriesTypeConfig<'funnel'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all funnel elements at the current position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'funnel';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'funnel';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+````
+
+### FunnelChartSlotExtension
+
+```typescript
+type FunnelChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+```
+
+### FunnelChartSlotProps
+
+```typescript
+type FunnelChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### FunnelChartSlots
+
+```typescript
+type FunnelChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### funnelClasses
+
+```typescript
+type funnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClasses
+
+```typescript
+type FunnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClassKey
+
+```typescript
+type FunnelClassKey = 'root' | 'section' | 'sectionLabel' | 'sectionFilled' | 'sectionOutlined';
+```
+
+### FunnelCurveType
+
+```typescript
+type FunnelCurveType = 'linear' | 'linear-sharp' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+```
+
+### FunnelDataPoints
+
+```typescript
+type FunnelDataPoints = Record<'x' | 'y', number> & { useBandWidth: boolean; stackOffset: number };
+```
+
+### FunnelItem
+
+```typescript
+type FunnelItem = {
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number;
+};
+```
+
+### FunnelItemId
+
+```typescript
+type FunnelItemId = string | number;
+```
+
+### FunnelItemIdentifier
+
+An object that allows to identify a funnel item.
+Used for item interaction
+
+```typescript
+type FunnelItemIdentifier = {
+  type: 'funnel';
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+};
+```
+
+### FunnelLabelOptions
+
+```typescript
+type FunnelLabelOptions = {
+  /**
+   * The position of the label.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  position?: Position;
+  /**
+   * The text anchor of the label. Affects the horizontal alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  textAnchor?: 'start' | 'middle' | 'end';
+  /**
+   * The dominant baseline of the label. Affects the vertical alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  dominantBaseline?:
+    | 'auto'
+    | 'baseline'
+    | 'hanging'
+    | 'middle'
+    | 'central'
+    | 'text-after-edge'
+    | 'text-before-edge';
+  /**
+   * The offset of the label from the anchor point.
+   * If a single number is provided, the offset will be applied in both directions.
+   * @default 0
+   */
+  offset?: number | { x?: number; y?: number };
+};
+```
+
+### FunnelPlotProps
+
+```typescript
+type FunnelPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotExtension
+
+```typescript
+type FunnelPlotSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotProps
+
+```typescript
+type FunnelPlotSlotProps = {
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+};
+```
+
+### FunnelPlotSlots
+
+```typescript
+type FunnelPlotSlots = {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### FunnelScaleName
+
+```typescript
+type FunnelScaleName = Exclude<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  'point'
+>;
+```
+
+### FunnelSection
+
+```typescript
+type FunnelSection = unknown;
+```
+
+### FunnelSectionLabel
+
+```typescript
+type FunnelSectionLabel = unknown;
+```
+
+### FunnelSeries
+
+```typescript
+type FunnelSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  type?: 'funnel';
+};
+```
+
+### FunnelSeriesType
+
+```typescript
+type FunnelSeriesType = {
+  type: 'funnel';
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### FunnelValueType
+
+```typescript
+type FunnelValueType = {
+  /** A unique identifier of the funnel section. */
+  id?: FunnelItemId;
+  /** The value of the funnel section. */
+  value: number;
+  /** The label to display on the tooltip, funnel section, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
+  /** The color of the funnel section */
+  color?: string;
+  /**
+   * Defines the mark type for the funnel item.
+   * @default 'square'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### gaugeClasses
+
+```typescript
+type gaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClasses
+
+```typescript
+type GaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClassKey
+
+```typescript
+type GaugeClassKey = 'root' | 'valueArc' | 'referenceArc' | 'valueText';
+```
+
+### GaugeContainerProps
+
+```typescript
+type GaugeContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+};
+```
+
+### GaugeFormatterParams
+
+```typescript
+type GaugeFormatterParams = { value: number | null; valueMin: number; valueMax: number };
+```
+
+### GaugeProps
+
+```typescript
+type GaugeProps = {
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+};
+```
+
+### GaugeValueTextProps
+
+```typescript
+type GaugeValueTextProps = {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### greenPaletteDark
+
+```typescript
+type greenPaletteDark = string[];
+```
+
+### greenPaletteLight
+
+```typescript
+type greenPaletteLight = string[];
+```
+
+### GridChartsConfigurationOptions
+
+```typescript
+type GridChartsConfigurationOptions = {
+  [key: string]: {
+    label: string;
+    icon: (props: any) => React.ReactNode;
+    customization: GridChartsConfigurationSection[];
+    dimensionsLabel?: string;
+    valuesLabel?: string;
+    maxDimensions?: number;
+    maxValues?: number;
+  };
+};
+```
+
+### GridChartsConfigurationSection
+
+```typescript
+type GridChartsConfigurationSection = {
+  id: string;
+  label: string;
+  controls: { [key: string]: GridChartsConfigurationControl };
+};
+```
+
+### HEATMAP_PLUGINS
+
+```typescript
+type HEATMAP_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'heatmap'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'heatmap'>>,
+  ChartPlugin<UseChartHighlightSignature<'heatmap'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartItemClickSignature<'heatmap'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### HeatmapCellOwnerState
+
+```typescript
+type HeatmapCellOwnerState = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+  value: number;
+};
+```
+
+### HeatmapCellProps
+
+```typescript
+type HeatmapCellProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapCellOwnerState;
+};
+```
+
+### heatmapClasses
+
+```typescript
+type heatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClasses
+
+```typescript
+type HeatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClassKey
+
+```typescript
+type HeatmapClassKey = 'root' | 'series' | 'highlighted' | 'faded' | 'cell';
+```
+
+### HeatmapItemIdentifier
+
+An object that allows to identify a single cell.
+Used for item interaction
+
+```typescript
+type HeatmapItemIdentifier = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+};
+```
+
+### HeatmapItemIdentifierWithData
+
+The cell identifier with the associated data value.
+
+```typescript
+type HeatmapItemIdentifierWithData = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+  /** The value of the cell. Null if there is no data associated. */
+  value: number | null;
+};
+```
+
+### HeatmapPlotProps
+
+```typescript
+type HeatmapPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapPlotSlotProps;
+};
+```
+
+### HeatmapPlotSlotProps
+
+```typescript
+type HeatmapPlotSlotProps = { cell?: Partial<HeatmapCellProps> };
+```
+
+### HeatmapPlotSlots
+
+```typescript
+type HeatmapPlotSlots = {
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+};
+```
+
+### HeatmapPluginSignatures
+
+```typescript
+type HeatmapPluginSignatures = HeatmapPluginSignatures;
+```
+
+### HeatmapPremiumProps
+
+```typescript
+type HeatmapPremiumProps = {
+  /**
+   * The type of renderer to use for the heatmap plot.
+   * - `svg-single`: Renders every scatter item in a `<rect />` element.
+   * - `webgl`: Renders heatmap cells using WebGL for better performance, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/heatmap/#performance
+   */
+  renderer?: 'svg-single' | 'webgl';
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapPremiumSlotProps
+
+```typescript
+type HeatmapPremiumSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapPremiumSlots
+
+```typescript
+type HeatmapPremiumSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### HeatmapProps
+
+```typescript
+type HeatmapProps = {
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapSeries
+
+```typescript
+type HeatmapSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  type?: 'heatmap';
+};
+```
+
+### HeatmapSeriesType
+
+```typescript
+type HeatmapSeriesType = {
+  type: 'heatmap';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The id of this series. */
+  id?: SeriesId;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### HeatmapSlotProps
+
+```typescript
+type HeatmapSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapSlots
+
+```typescript
+type HeatmapSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### HeatmapTooltipClasses
+
+```typescript
+type HeatmapTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentClasses
+
+```typescript
+type HeatmapTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentProps
+
+```typescript
+type HeatmapTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+};
+```
+
+### HeatmapTooltipProps
+
+```typescript
+type HeatmapTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer';
+};
+```
+
+### HeatmapTooltipSlotProps
+
+```typescript
+type HeatmapTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<HeatmapTooltipProps>;
+};
+```
+
+### HeatmapTooltipSlots
+
+```typescript
+type HeatmapTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### HeatmapValueType
+
+```typescript
+type HeatmapValueType = HeatmapValueType;
+```
+
+### HighlightItemIdentifier
+
+Identifies an highlighted item or series.
+
+```typescript
+type HighlightItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightItemIdentifierWithType
+
+```typescript
+type HighlightItemIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightOptions
+
+```typescript
+type HighlightOptions = 'none' | 'item' | 'series';
+```
+
+### HighlightScope
+
+```typescript
+type HighlightScope = CommonHighlightScope | SankeyHighlightScope;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
+
+### ItemTooltip
+
+```typescript
+type ItemTooltip<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | RangeBarValueType
+    | OHLCValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### labelClasses
+
+```typescript
+type labelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### labelGradientClasses
+
+```typescript
+type labelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### labelMarkClasses
+
+```typescript
+type labelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### legendClasses
+
+```typescript
+type legendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### LegendItemContext
+
+```typescript
+type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+```
+
+### LegendItemParams
+
+```typescript
+type LegendItemParams = {
+  /** The type of the series */
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  markType: ChartsLabelMarkType | undefined;
+  /** The identifier of the series */
+  seriesId?: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The minimum value of the category */
+  minValue?: number | Date | null;
+  /** The maximum value of the category */
+  maxValue?: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LINE_CHART_PRO_PLUGINS
+
+```typescript
+type LINE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProPluginSignatures
+
+```typescript
+type LineChartProPluginSignatures = LineChartProPluginSignatures;
+```
+
+### LineChartProProps
+
+````typescript
+type LineChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'line'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+    ChartPlugin<UseChartHighlightSignature<'line'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartProSlotProps
+
+```typescript
+type LineChartProSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### LineChartProSlots
+
+```typescript
+type LineChartProSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'line'
+  | 'area'
+  | 'mark'
+  | 'highlight'
+  | 'markAnimate'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LineItemIdentifier
+
+An object that allows to identify a single line.
+Used for item interaction
+
+```typescript
+type LineItemIdentifier = {
+  type: 'line';
+  seriesId: string;
+  /** `dataIndex` can be `undefined` if the mouse is over the area and not a specific item. */
+  dataIndex?: number;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### LineSeriesType
+
+```typescript
+type LineSeriesType = {
+  type: 'line';
+  /** Data associated to the line. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### mangoFusionPaletteDark
+
+```typescript
+type mangoFusionPaletteDark = string[];
+```
+
+### mangoFusionPaletteLight
+
+```typescript
+type mangoFusionPaletteLight = string[];
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  seriesId: string;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
+
+### NumberValue
+
+```typescript
+type NumberValue = NumberValue;
+```
+
+### OHLCField
+
+The OHLC fields that can be formatted individually.
+
+```typescript
+type OHLCField = 'open' | 'high' | 'low' | 'close';
+```
+
+### OHLCFormattedValue
+
+The structured formatted tooltip value for OHLC series.
+
+```typescript
+type OHLCFormattedValue = {
+  open: string | null;
+  high: string | null;
+  low: string | null;
+  close: string | null;
+};
+```
+
+### OHLCItemIdentifier
+
+An object that allows to identify a single bar.
+Used for item interaction
+
+```typescript
+type OHLCItemIdentifier = { type: 'ohlc'; seriesId: string; dataIndex: number };
+```
+
+### OHLCSeries
+
+```typescript
+type OHLCSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /** The OHLC data points. */
+  data?: (OHLCValueType | null)[];
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default (mode) =>  mode === 'dark' ? '#66bb6a' : '#2e7d32'
+   */
+  upColor?: ChartsColor;
+  /**
+   * The color of the candle body when the close price is less than the open price.
+   * @default (mode) =>  mode === 'dark' ? '#f44336' : '#d32f2f'
+   */
+  downColor?: ChartsColor;
+  type?: 'ohlc';
+};
+```
+
+### OHLCSeriesType
+
+```typescript
+type OHLCSeriesType = {
+  type: 'ohlc';
+  /** The OHLC data points. */
+  data?: (OHLCValueType | null)[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default (mode) =>  mode === 'dark' ? '#66bb6a' : '#2e7d32'
+   */
+  upColor?: ChartsColor;
+  /**
+   * The color of the candle body when the close price is less than the open price.
+   * @default (mode) =>  mode === 'dark' ? '#f44336' : '#d32f2f'
+   */
+  downColor?: ChartsColor;
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### OHLCTooltipValue
+
+The structured tooltip value for OHLC series.
+
+```typescript
+type OHLCTooltipValue = { open: string; high: string; low: string; close: string };
+```
+
+### OHLCValueType
+
+Type representing the values of a single OHLC element.
+The array contains four numbers in the following order:
+\[open, high, low, close].
+
+```typescript
+type OHLCValueType = OHLCValueType;
+```
+
+### orangePaletteDark
+
+```typescript
+type orangePaletteDark = string[];
+```
+
+### orangePaletteLight
+
+```typescript
+type orangePaletteLight = string[];
+```
+
+### OrdinalTimeTicks
+
+```typescript
+type OrdinalTimeTicks = (TickFrequencyDefinition | TickFrequency)[];
+```
+
+### PIE_CHART_PLUGINS
+
+```typescript
+type PIE_CHART_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### PIE_CHART_PRO_PLUGINS
+
+```typescript
+type PIE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### PieArcLabelPlotProps
+
+```typescript
+type PieArcLabelPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcLabelPlotSlotProps
+
+```typescript
+type PieArcLabelPlotSlotProps = { pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PieArcLabelPlotSlots
+
+```typescript
+type PieArcLabelPlotSlots = { pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps> };
+```
+
+### PieArcLabelProps
+
+```typescript
+type PieArcLabelProps = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  classes?: Partial<PieClasses>;
+  startAngle: number;
+  endAngle: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+  hidden?: boolean;
+};
+```
+
+### PieArcOwnerState
+
+```typescript
+type PieArcOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+};
+```
+
+### PieArcPlotProps
+
+```typescript
+type PieArcPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcPlotSlotProps
+
+```typescript
+type PieArcPlotSlotProps = { pieArc?: Partial<PieArcProps> };
+```
+
+### PieArcPlotSlots
+
+```typescript
+type PieArcPlotSlots = { pieArc?: React.JSXElementConstructor<PieArcProps> };
+```
+
+### PieArcProps
+
+```typescript
+type PieArcProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** If `true`, the animation is disabled. */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
+};
+```
+
+### piecewiseColorLegendClasses
+
+```typescript
+type piecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendClasses
+
+```typescript
+type PiecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendItemContext
+
+```typescript
+type PiecewiseColorLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'piecewiseColor';
+  /** The minimum value of the category */
+  minValue: number | Date | null;
+  /** The maximum value of the category */
+  maxValue: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendProps
+
+```typescript
+type PiecewiseColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @returns The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the color marks.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: PiecewiseColorLegendItemContext,
+    index: number,
+  ) => void;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### PiecewiseLabelFormatterParams
+
+```typescript
+type PiecewiseLabelFormatterParams = {
+  /** The index of the entry. */
+  index: number;
+  /** The length of the entries array. */
+  length: number;
+  /** The min value of the piece. `null` is infinite. */
+  min: number | Date | null;
+  /** The max value of the piece. `null` is infinite. */
+  max: number | Date | null;
+  /** The formatted min value of the piece. `null` is infinite. */
+  formattedMin: string | null;
+  /** The formatted max value of the piece. `null` is infinite. */
+  formattedMax: string | null;
+};
+```
+
+### PieChartPluginSignatures
+
+```typescript
+type PieChartPluginSignatures = PieChartPluginSignatures;
+```
+
+### PieChartProPluginSignatures
+
+```typescript
+type PieChartProPluginSignatures = PieChartProPluginSignatures;
+```
+
+### PieChartProProps
+
+````typescript
+type PieChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+};
+````
+
+### PieChartProps
+
+````typescript
+type PieChartProps = {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### PieChartProSlotProps
+
+```typescript
+type PieChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### PieChartProSlots
+
+```typescript
+type PieChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### PieChartSlotProps
+
+```typescript
+type PieChartSlotProps = {
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### PieChartSlots
+
+```typescript
+type PieChartSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### pieClasses
+
+```typescript
+type pieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClasses
+
+```typescript
+type PieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClassKey
+
+```typescript
+type PieClassKey =
+  | 'root'
+  | 'arc'
+  | 'series'
+  | 'arcLabel'
+  | 'animate'
+  | 'seriesLabels'
+  | 'focusIndicator';
+```
+
+### PieItemId
+
+```typescript
+type PieItemId = string | number;
+```
+
+### PieItemIdentifier
+
+An object that allows to identify a single pie slice.
+Used for item interaction
+
+```typescript
+type PieItemIdentifier = { type: 'pie'; seriesId: string; dataIndex: number };
+```
+
+### PiePlotProps
+
+```typescript
+type PiePlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+};
+```
+
+### PiePlotSlotProps
+
+```typescript
+type PiePlotSlotProps = { pieArc?: Partial<PieArcProps>; pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PiePlotSlots
+
+```typescript
+type PiePlotSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+};
+```
+
+### PieSeries
+
+```typescript
+type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
+```
+
+### PieSeriesLayout
+
+Layout information computed from the pie series and the drawing area.
+
+```typescript
+type PieSeriesLayout = {
+  /** The pie center coordinate in px. */
+  center: { x: number; y: number };
+  /**
+   * The pie radius in px.
+   * Computed based on the drawing area and the center placement.
+   */
+  radius: {
+    /**
+     * The maximum available radius in px.
+     * Correspond to radius='100%'.
+     */
+    available: number;
+    /** The pie inner radius in px, except if overridden by item state (highlight/faded). */
+    inner: number;
+    /** The pie outer radius in px, except if overridden by item state (highlight/faded). */
+    outer: number;
+    /** The pie label radius in px, except if overridden by item state (highlight/faded). */
+    label: number;
+  };
+};
+```
+
+### PieSeriesType
+
+```typescript
+type PieSeriesType<TData = PieValueType> = {
+  type: 'pie';
+  data: TData[];
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<TData>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<SeriesType>;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<TData>) => string;
+};
+```
+
+### PieValueType
+
+```typescript
+type PieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### pinkPaletteDark
+
+```typescript
+type pinkPaletteDark = string[];
+```
+
+### pinkPaletteLight
+
+```typescript
+type pinkPaletteLight = string[];
+```
+
+### Position
+
+```typescript
+type Position = {
+  /** The vertical position. */
+  vertical?: 'top' | 'middle' | 'bottom';
+  /** The horizontal position. */
+  horizontal?: 'start' | 'center' | 'end';
+};
+```
+
+### PropsFromSlot
+
+```typescript
+type PropsFromSlot =
+  | P
+  | React.ComponentProps<
+      NonNullable<React.JSXElementConstructor<any> | React.ElementType | null | undefined>
+    >;
+```
+
+### purplePaletteDark
+
+```typescript
+type purplePaletteDark = string[];
+```
+
+### purplePaletteLight
+
+```typescript
+type purplePaletteLight = string[];
+```
+
+### RADAR_CHART_PRO_PLUGINS
+
+```typescript
+type RADAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'radar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature>,
+  ChartPlugin<UseChartHighlightSignature<'radar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### RADAR_PLUGINS
+
+```typescript
+type RADAR_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<any>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature<any>>,
+  ChartPlugin<UseChartHighlightSignature<any>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<any>>,
+];
+```
+
+### RadarAxisHighlightProps
+
+```typescript
+type RadarAxisHighlightProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<
+    Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>
+  >;
+};
+```
+
+### RadarAxisProps
+
+```typescript
+type RadarAxisProps = {
+  /**
+   * Defines how label align with the axis.
+   * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
+   * - 'rotated': labels are rotated 90deg relatively to their axis.
+   * @default 'horizontal'
+   */
+  labelOrientation?: 'horizontal' | 'rotated';
+  /** The labels text anchor or a function returning the text anchor for a given axis angle (in degree). */
+  textAnchor?:
+    | 'start'
+    | 'middle'
+    | 'end'
+    | 'inherit'
+    | ((angle: number) => 'start' | 'end' | 'middle' | 'inherit' | undefined);
+  /** The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree). */
+  dominantBaseline?:
+    | 'auto'
+    | 'use-script'
+    | 'no-change'
+    | 'reset-size'
+    | 'ideographic'
+    | 'alphabetic'
+    | 'hanging'
+    | 'mathematical'
+    | 'central'
+    | 'middle'
+    | 'text-after-edge'
+    | 'text-before-edge'
+    | 'inherit'
+    | ((
+        angle: number,
+      ) =>
+        | 'auto'
+        | 'middle'
+        | 'alphabetic'
+        | 'hanging'
+        | 'ideographic'
+        | 'mathematical'
+        | 'central'
+        | 'text-after-edge'
+        | 'text-before-edge'
+        | 'inherit'
+        | 'use-script'
+        | 'no-change'
+        | 'reset-size'
+        | undefined);
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<Pick<RadarClasses, 'axisLine' | 'axisLabel' | 'axisRoot'>>;
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### RadarChartPluginSignatures
+
+```typescript
+type RadarChartPluginSignatures = RadarChartPluginSignatures;
+```
+
+### RadarChartProPluginSignatures
+
+```typescript
+type RadarChartProPluginSignatures = RadarChartProPluginSignatures;
+```
+
+### RadarChartProProps
+
+````typescript
+type RadarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'radar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartPolarAxisSignature>,
+    ChartPlugin<UseChartHighlightSignature<'radar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+};
+````
+
+### RadarChartProps
+
+````typescript
+type RadarChartProps = {
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+};
+````
+
+### RadarChartProSlotProps
+
+```typescript
+type RadarChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### RadarChartProSlots
+
+```typescript
+type RadarChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### RadarChartSlotProps
+
+```typescript
+type RadarChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### RadarChartSlots
+
+```typescript
+type RadarChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### radarClasses
+
+```typescript
+type radarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClasses
+
+```typescript
+type RadarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClassKey
+
+```typescript
+type RadarClassKey =
+  | 'axisLine'
+  | 'axisLabel'
+  | 'axisRoot'
+  | 'gridRadial'
+  | 'gridDivider'
+  | 'gridStripe'
+  | 'seriesRoot'
+  | 'seriesArea'
+  | 'seriesMark'
+  | 'axisHighlightRoot'
+  | 'axisHighlightLine'
+  | 'axisHighlightDot';
+```
+
+### RadarDataProviderProps
+
+```typescript
+type RadarDataProviderProps<
+  TSignatures extends ChartAnyPluginSignature[] = RadarChartPluginSignatures,
+> = {
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [] | [ChartPlugin<ChartAnyPluginSignature>];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** Slots to customize charts' components. */
+  slots?: Partial<ChartsDataProviderSlots>;
+  /** The props for the slots. */
+  slotProps?: Partial<ChartsDataProviderSlotProps>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?:
+    | string
+    | number
+    | bigint
+    | boolean
+    | ReactElement
+    | Iterable<React.ReactNode, any, any>
+    | React.ReactPortal
+    | Promise<AwaitedReactNode>
+    | null;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: number | Partial<ChartMargin>;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: {};
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+};
+```
+
+### RadarGridProps
+
+```typescript
+type RadarGridProps = {
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+};
+```
+
+### RadarItemIdentifier
+
+An object that allows to identify either a radar series or a radar point (if dataIndex is defined).
+Used for item interaction
+
+```typescript
+type RadarItemIdentifier = { type: 'radar'; seriesId: string; dataIndex?: number };
+```
+
+### RadarSeries
+
+```typescript
+type RadarSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  type?: 'radar';
+};
+```
+
+### RadarSeriesAreaProps
+
+```typescript
+type RadarSeriesAreaProps = {
+  /** Callback fired when an area is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesMarksProps
+
+```typescript
+type RadarSeriesMarksProps = {
+  /** Callback fired when a mark is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesPlotProps
+
+```typescript
+type RadarSeriesPlotProps = {
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesType
+
+```typescript
+type RadarSeriesType = {
+  type: 'radar';
+  data: number[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+};
+```
+
+### RadiusAxis
+
+```typescript
+type RadiusAxis<S extends 'linear' = 'linear', V = any> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * The minimal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  min?: number;
+  /**
+   * The maximal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  max?: number;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The minimal radius. */
+  minRadius?: number;
+  /** The maximal radius. */
+  maxRadius?: number;
+  colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### rainbowSurgePaletteDark
+
+```typescript
+type rainbowSurgePaletteDark = string[];
+```
+
+### rainbowSurgePaletteLight
+
+```typescript
+type rainbowSurgePaletteLight = string[];
+```
+
+### rangeBarClasses
+
+```typescript
+type rangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClasses
+
+```typescript
+type RangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClassKey
+
+```typescript
+type RangeBarClassKey = 'root' | 'series' | 'seriesLabels';
+```
+
+### RangeBarItemIdentifier
+
+An object that allows to identify a range bar.
+Used for item interaction
+
+```typescript
+type RangeBarItemIdentifier = { type: 'rangeBar'; seriesId: string; dataIndex: number };
+```
+
+### RangeBarPlotProps
+
+```typescript
+type RangeBarPlotProps = {
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    barItemIdentifier: RangeBarItemIdentifier,
+  ) => void;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RangeBarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RangeBarPlotSlots;
+};
+```
+
+### RangeBarPlotSlotProps
+
+```typescript
+type RangeBarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### RangeBarPlotSlots
+
+```typescript
+type RangeBarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### RangeBarSeries
+
+```typescript
+type RangeBarSeries = {
+  type: 'rangeBar';
+  /** Data associated to each range bar. */
+  data?: (RangeBarValueType | null)[];
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<RangeBarValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### RangeBarSeriesType
+
+```typescript
+type RangeBarSeriesType = {
+  type: 'rangeBar';
+  /** Data associated to each range bar. */
+  data?: (RangeBarValueType | null)[];
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<RangeBarValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### RangeBarValueType
+
+\[start, end]
+
+```typescript
+type RangeBarValueType = RangeBarValueType;
+```
+
+### redPaletteDark
+
+```typescript
+type redPaletteDark = string[];
+```
+
+### redPaletteLight
+
+```typescript
+type redPaletteLight = string[];
+```
+
+### referenceLineClasses
+
+```typescript
+type referenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### RotationAxis
+
+```typescript
+type RotationAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The start angle (in deg). */
+  startAngle?: number;
+  /** The end angle (in deg). */
+  endAngle?: number;
+  /** The gap between the axis and the label. */
+  labelGap?: number;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### ScaleName
+
+```typescript
+type ScaleName = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### SCATTER_CHART_PLUGINS
+
+```typescript
+type SCATTER_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### SCATTER_CHART_PRO_PLUGINS
+
+```typescript
+type SCATTER_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### ScatterChartPluginSignatures
+
+```typescript
+type ScatterChartPluginSignatures = ScatterChartPluginSignatures;
+```
+
+### ScatterChartProPluginSignatures
+
+```typescript
+type ScatterChartProPluginSignatures = ScatterChartProPluginSignatures;
+```
+
+### ScatterChartProProps
+
+````typescript
+type ScatterChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+    ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+    ChartPlugin<UseChartClosestPointSignature>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### ScatterChartProps
+
+````typescript
+type ScatterChartProps = {
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartSlotProps;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+};
+````
+
+### ScatterChartProSlotProps
+
+```typescript
+type ScatterChartProSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ScatterChartProSlots
+
+```typescript
+type ScatterChartProSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ScatterChartSlotProps
+
+```typescript
+type ScatterChartSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ScatterChartSlots
+
+```typescript
+type ScatterChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### scatterClasses
+
+```typescript
+type scatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClasses
+
+```typescript
+type ScatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClassKey
+
+```typescript
+type ScatterClassKey = 'marker' | 'root' | 'series' | 'focusedMark';
+```
+
+### ScatterItemIdentifier
+
+An object that allows to identify a single scatter item.
+Used for item interaction
+
+```typescript
+type ScatterItemIdentifier = { type: 'scatter'; seriesId: string; dataIndex: number };
+```
+
+### ScatterMarkerProps
+
+```typescript
+type ScatterMarkerProps = {
+  /** The series ID. */
+  seriesId: string;
+  /** The index of the data point. */
+  dataIndex: number;
+  /** The x coordinate of the data point. */
+  x: number;
+  /** The y coordinate of the data point. */
+  y: number;
+  /** The fill color of the marker. */
+  color: string;
+  /** The size of the marker. */
+  size: number;
+  /** If `true`, the marker is highlighted. */
+  isHighlighted: boolean;
+  /** If `true`, the marker is faded. */
+  isFaded: boolean;
+  /** Callback fired when clicking on a scatter item. */
+  onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+};
+```
+
+### ScatterMarkerSlotExtension
+
+```typescript
+type ScatterMarkerSlotExtension = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterMarkerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterMarkerSlots;
+};
+```
+
+### ScatterMarkerSlotProps
+
+```typescript
+type ScatterMarkerSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterMarkerSlots
+
+```typescript
+type ScatterMarkerSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterPlotProps
+
+```typescript
+type ScatterPlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  classes?: Partial<ScatterClasses>;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+};
+```
+
+### ScatterPlotSlotProps
+
+```typescript
+type ScatterPlotSlotProps = { scatter?: Partial<ScatterProps>; marker?: ScatterMarkerProps };
+```
+
+### ScatterPlotSlots
+
+```typescript
+type ScatterPlotSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterProps
+
+```typescript
+type ScatterProps = {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: (dataIndex?: number) => string;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+  classes?: Partial<ScatterClasses>;
+  slots?: ScatterSlots;
+  slotProps?: ScatterSlotProps;
+};
+```
+
+### ScatterSeries
+
+```typescript
+type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
+```
+
+### ScatterSeriesType
+
+```typescript
+type ScatterSeriesType = {
+  type: 'scatter';
+  data?: ScatterValueType[];
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize?: number;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  preview?: { markerSize?: number };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<ScatterValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### ScatterSlotProps
+
+```typescript
+type ScatterSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterSlots
+
+```typescript
+type ScatterSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterValueType
+
+```typescript
+type ScatterValueType = {
+  x: number;
+  y: number;
+  z?: any;
+  /** A unique identifier for the scatter point */
+  id?: string | number;
+};
+```
+
+### SeriesId
+
+The unique identifier of a series.
+
+```typescript
+type SeriesId = string;
+```
+
+### SeriesItem
+
+```typescript
+type SeriesItem<
+  T extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar' | 'ohlc',
+> = {
+  seriesId: string;
+  color: string;
+  value:
+    | { open: number; high: number; low: number; close: number }
+    | number
+    | HeatmapValueType
+    | ScatterValueType
+    | RangeBarValueType
+    | OHLCValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkType | undefined;
+  markShape: MarkShape | undefined;
+};
+```
+
+### SeriesItemIdentifier
+
+```typescript
+type SeriesItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = { seriesId: string };
+```
+
+### SeriesItemIdentifierWithData
+
+```typescript
+type SeriesItemIdentifierWithData<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### SeriesItemIdentifierWithType
+
+```typescript
+type SeriesItemIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### SeriesLegendItemContext
+
+```typescript
+type SeriesLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'series';
+  /** The identifier of the series */
+  seriesId: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### SeriesLegendItemParams
+
+```typescript
+type SeriesLegendItemParams = {
+  /** The identifier of the series */
+  seriesId: string;
+  /** The type of the series */
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  markType: ChartsLabelMarkType | undefined;
+  markShape?: MarkShape;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### ShowMarkParams
+
+```typescript
+type ShowMarkParams<AxisValue = number | Date> = {
+  /** The item index. */
+  index: number;
+  /** The x coordinate in the SVG. */
+  x: number;
+  /** The y coordinate in the SVG. */
+  y: number;
+  /** The item position value. It likely comes from the axis `data` property. */
+  position: AxisValue;
+  /** The item value. It comes from the series `data` property. */
+  value: number;
+};
+```
+
+### SparkLineChartProps
+
+````typescript
+type SparkLineChartProps<PlotType extends 'bar' | 'line' = 'bar' | 'line'> = {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: XAxis;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: YAxis;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: 'bar' | 'line';
+  /** Data to plot. */
+  data: number[];
+  /**
+   * Formatter used by the tooltip.
+   * @default (value: number | null) => (value === null ? '' : value.toString())
+   * @returns the formatted value.
+   */
+  valueFormatter?: (value: number | null) => string;
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip?: boolean;
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area?: boolean;
+  /** @default 'linear' */
+  curve?: CurveType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SparkLineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SparkLineChartSlotProps;
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: { top?: number; right?: number; bottom?: number; left?: number };
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | BarItemIdentifier
+    | Omit<BarItemIdentifier, 'type'>
+    | LineItemIdentifier
+    | Omit<LineItemIdentifier, 'type'>
+    | ScatterItemIdentifier
+    | Omit<ScatterItemIdentifier, 'type'>
+    | PieItemIdentifier
+    | Omit<PieItemIdentifier, 'type'>
+    | RadarItemIdentifier
+    | Omit<RadarItemIdentifier, 'type'>
+    | HeatmapItemIdentifier
+    | Omit<HeatmapItemIdentifier, 'type'>
+    | FunnelItemIdentifier
+    | Omit<FunnelItemIdentifier, 'type'>
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | RangeBarItemIdentifier
+    | Omit<RangeBarItemIdentifier, 'type'>
+    | OHLCItemIdentifier
+    | Omit<OHLCItemIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (
+    tooltipItem:
+      | BarItemIdentifier
+      | LineItemIdentifier
+      | ScatterItemIdentifier
+      | PieItemIdentifier
+      | RadarItemIdentifier
+      | HeatmapItemIdentifier
+      | FunnelItemIdentifier
+      | SankeyItemIdentifier
+      | RangeBarItemIdentifier
+      | OHLCItemIdentifier
+      | null,
+  ) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'rangeBar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'rangeBar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem:
+      | SankeyItemIdentifier
+      | { type: 'bar'; seriesId: string; dataIndex?: number }
+      | { type: 'line'; seriesId: string; dataIndex?: number }
+      | { type: 'scatter'; seriesId: string; dataIndex?: number }
+      | { type: 'pie'; seriesId: string; dataIndex?: number }
+      | { type: 'radar'; seriesId: string; dataIndex?: number }
+      | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+      | { type: 'funnel'; seriesId: string; dataIndex?: number }
+      | { type: 'rangeBar'; seriesId: string; dataIndex?: number }
+      | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+      | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   */
+  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    bar: ChartSeriesTypeConfig<'bar'>;
+    line: ChartSeriesTypeConfig<'line'>;
+    scatter: ChartSeriesTypeConfig<'scatter'>;
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+    radar: ChartSeriesTypeConfig<'radar'>;
+    heatmap: ChartSeriesTypeConfig<'heatmap'>;
+    funnel: ChartSeriesTypeConfig<'funnel'>;
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+    rangeBar: ChartSeriesTypeConfig<'rangeBar'>;
+    ohlc: ChartSeriesTypeConfig<'ohlc'>;
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: (
+      | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+      | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+      | {
+          type?: 'scatter';
+          seriesId?: string;
+          dataIndex?: number;
+          seriesId: string;
+          type: 'scatter';
+        }
+      | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+      | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+      | {
+          type?: 'heatmap';
+          seriesId?: string;
+          xIndex?: number;
+          yIndex?: number;
+          seriesId: string;
+          type: 'heatmap';
+        }
+      | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'node';
+          nodeId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'link';
+          sourceId?: SankeyNodeId;
+          targetId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+      | {
+          type?: 'rangeBar';
+          seriesId?: string;
+          dataIndex?: number;
+          seriesId: string;
+          type: 'rangeBar';
+        }
+      | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    )[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'rangeBar';
+        seriesId?: string;
+        dataIndex?: number;
+        seriesId: string;
+        type: 'rangeBar';
+      }
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'rangeBar';
+        seriesId?: string;
+        dataIndex?: number;
+        seriesId: string;
+        type: 'rangeBar';
+      }
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /** If true, the hit area interaction is disabled and falls back to hover events. */
+  disableHitArea?: boolean;
+};
+````
+
+### SparkLineChartSlotProps
+
+```typescript
+type SparkLineChartSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SparkLineChartSlots
+
+```typescript
+type SparkLineChartSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### StackableChartSeriesType
+
+```typescript
+type StackableChartSeriesType = 'bar' | 'line';
+```
+
+### StackOffsetType
+
+```typescript
+type StackOffsetType = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';
+```
+
+### StackOrderType
+
+```typescript
+type StackOrderType = 'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';
+```
+
+### strawberrySkyPaletteDark
+
+```typescript
+type strawberrySkyPaletteDark = string[];
+```
+
+### strawberrySkyPaletteLight
+
+```typescript
+type strawberrySkyPaletteLight = string[];
+```
+
+### TickFrequency
+
+The predefined tick frequencies for time ordinal axes.
+
+- 'years': displays the year, placing ticks at the start of each year
+- 'quarterly': displays the month, placing ticks at the start of each quarter
+- 'months': displays the month, placing ticks at the start of each month
+- 'biweekly': displays the day, placing ticks every two weeks
+- 'weeks': displays the day, placing ticks at the start of each week
+- 'days': displays the day, placing ticks at the start of each day
+- 'hours': displays the hour and minutes, placing ticks at the start of each hour
+
+```typescript
+type TickFrequency = 'years' | 'quarterly' | 'months' | 'biweekly' | 'weeks' | 'days' | 'hours';
+```
+
+### TickFrequencyDefinition
+
+Definition of a tick frequency for time ordinal axes.
+
+```typescript
+type TickFrequencyDefinition = {
+  /**
+   * Returns the number of ticks in the given date range for this tick frequency.
+   * @returns The number of ticks in the [from, to] range.
+   */
+  getTickNumber: (from: Date, to: Date) => number;
+  /**
+   * Decides if the current date should be shown as a tick.
+   * @returns Whether the current date is a tick or not.
+   */
+  isTick: (prev: Date, value: Date) => boolean;
+  /**
+   * Format the tick value for display.
+   * @returns The formatted date string.
+   */
+  format: (date: Date) => string;
+};
+```
+
+### TickItem
+
+```typescript
+type TickItem = {
+  /**
+   * The value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  value?: any;
+  /**
+   * The formatted value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  formattedValue?: string;
+  /**
+   * The offset in pixels relative to the SVG origin.
+   * For an x-axis, it is relative to the left side of the SVG.
+   * For a y-axis, it is relative to the top side of the SVG.
+   */
+  offset: number;
+  /**
+   * The offset in pixels relative to the tick position.
+   * For an x-axis, a positive value means the label is shifted to the right of the tick.
+   * For a y-axis, a positive value means the label is shifted downwards from the tick.
+   */
+  labelOffset: number;
+};
+```
+
+### UseAnimateParams
+
+```typescript
+type UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = {}> = {
+  /**
+   * Function that returns the interpolation function for animating props.
+   * @returns
+   * Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   * @returns The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /** If `true`, the animation will be skipped and the final props will be applied immediately. */
+  skip?: boolean;
+  /** Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`. */
+  initialProps?: Props;
+  /** Optional ref to merge with the ref returned from this hook. */
+  ref?: React.Ref<Elem>;
+};
+```
+
+### UseAnimateReturn
+
+```typescript
+type UseAnimateReturn<Elem extends Element, T extends {}> = {
+  /** Ref to be passed to the element to animate. */
+  ref: React.Ref<Elem>;
+};
+```
+
+### UseAxesTooltipParams
+
+```typescript
+type UseAxesTooltipParams = {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+};
+```
+
+### UseAxesTooltipReturnValue
+
+```typescript
+type UseAxesTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar' | 'ohlc' = 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' | 'rangeBar', AxisValueT extends string | number | Date = string | number | Date> = { axisDirection: 'x' | 'y' | 'radius' | 'rotation';
+mainAxis: { /**
+ * ID used to identify the axis.
+ *
+ * The ID must be unique across all axes in this chart.
+ */
+id: AxisId;
+/** The data used by `'band'` and `'point'` scales. */
+data?: any[];
+/** The key used to retrieve `data` from the `dataset` prop. */
+dataKey?: string;
+/**
+ * A function to extract and transform the value from the `dataset` item.
+ * It receives the full dataset item and should return the axis value.
+ * Can be used as an alternative to `dataKey`.
+ * @returns The transformed value.
+ */
+valueGetter?: ((item: DatasetElementType<unknown>) => any);
+colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string); type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'piecewise'; thresholds: (number | Date)[]; colors: string[]; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) };
+/**
+ * Formats the axis value.
+ * @returns The string to display.
+ */
+valueFormatter?: (<TScaleName extends S>(value: any, context: AxisValueFormatterContext<TScaleName>) => string);
+/** The label of the axis. */
+label?: string;
+/** A CSS class name applied to the root element. */
+className?: string;
+/**
+ * If true, the axis line is disabled.
+ * @default false
+ */
+disableLine?: boolean;
+/**
+ * If true, the ticks are disabled.
+ * @default false
+ */
+disableTicks?: boolean;
+/** The style applied to ticks text. */
+tickLabelStyle?: ChartsTextStyle;
+/** The style applied to the axis label. */
+labelStyle?: ChartsTextStyle;
+/**
+ * Defines which ticks get its label displayed. Its value can be:
+ * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+ * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+ * @default 'auto'
+ */
+tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+/**
+ * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+ * @default 0
+ */
+tickSpacing?: number;
+/**
+ * The size of the ticks.
+ * @default 6
+ */
+tickSize?: number;
+/** Override or extend the styles applied to the component. */
+classes?: Partial<ChartsAxisClasses>;
+/**
+ * Overridable component slots.
+ * @default {}
+ */
+slots?: Partial<ChartsAxisSlots>;
+/**
+ * The props used for each component slot.
+ * @default {}
+ */
+slotProps?: Partial<ChartsAxisSlotProps>;
+sx?: SxProps;
+/**
+ * Maximal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMaxStep?: number;
+/**
+ * Minimal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMinStep?: number;
+/**
+ * The number of ticks. This number is not guaranteed.
+ * Not supported by categorical axis (band, points).
+ */
+tickNumber?: number;
+/**
+ * Defines which ticks are displayed.
+ * Its value can be:
+ * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+ * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+ * - an array containing the values where ticks should be displayed.
+ * @default 'auto'
+ * @see
+ */
+tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+/**
+ * The placement of ticks in regard to the band interval.
+ * Only used if scale is 'band'.
+ * @default 'extremities'
+ */
+tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+/**
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
+ * Only used if scale is 'band'.
+ * @default 'middle'
+ */
+tickLabelPlacement?: 'middle' | 'tick';
+/** If `true`, hide this value in the tooltip */
+hideTooltip?: boolean;
+/** If `true`, Reverse the axis scaleBand. */
+reverse?: boolean;
+/**
+ * Defines the axis scale domain based on the min/max values of series linked to it.
+ * - 'nice': Rounds the domain at human friendly values.
+ * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+ * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+ */
+domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+/** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+ignoreTooltip?: boolean;
+zoom?: boolean | ZoomOptions | false & DefaultizedZoomOptions | true & DefaultizedZoomOptions | { minStart?: number; maxEnd?: number; step?: number; minSpan?: number; maxSpan?: number; panning?: boolean; filterMode?: ZoomFilterMode; slider?: ZoomSliderOptions; axisId: AxisId; axisDirection: 'x' | 'y'; slider: DefaultedZoomSliderOptions; reverse: boolean; minStart: number; maxEnd: number; step: number; minSpan: number; maxSpan: number; panning: boolean; filterMode: ZoomFilterMode };
+/**
+ * The offset of the axis in pixels. It can be used to move the axis from its default position.
+ * X-axis: A top axis will move up, and a bottom axis will move down.
+ * Y-axis: A left axis will move left, and a right axis will move right.
+ * @default 0
+ */
+offset?: number;
+scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>;
+colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null, never> | ScaleThreshold<number, string | null, never>;
+/** Indicate if the axis should be consider by a tooltip with `trigger='axis'`. */
+triggerTooltip?: boolean };
+axisId: AxisId;
+axisValue: AxisValueT;
+axisFormattedValue: string;
+dataIndex: number;
+seriesItems: SeriesItem<SeriesType>[] }
+```
+
+### UseBarSeriesContextReturnValue
+
+```typescript
+type UseBarSeriesContextReturnValue = SeriesProcessorResult<'bar'>;
+```
+
+### UseBarSeriesReturnValue
+
+```typescript
+type UseBarSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UseChartCartesianAxisSignature
+
+```typescript
+type UseChartCartesianAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartCartesianAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartCartesianAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
+};
+```
+
+### UseChartClosestPointSignature
+
+```typescript
+type UseChartClosestPointSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVoronoiParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVoronoiDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartVoronoiInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVoronoiState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<SeriesType>,
+    UseChartTooltipSignature,
+  ];
+};
+```
+
+### UseChartHighlightSignature
+
+```typescript
+type UseChartHighlightSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartHighlightParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartHighlightDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartHighlightInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartHighlightState<SeriesType>;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartInteractionSignature
+
+```typescript
+type UseChartInteractionSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: {};
+  /** The params after being processed with the default values. */
+  defaultizedParams: {};
+  /** An imperative api available for internal use. */
+  instance: UseChartInteractionInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartInteractionState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartPolarAxisSignature
+
+```typescript
+type UseChartPolarAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartPolarAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartPolarAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartPolarAxisInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartPolarAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature];
+};
+```
+
+### UseChartProExportSignature
+
+```typescript
+type UseChartProExportSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProExportParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProExportParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProExportInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProExportState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProExportPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartProZoomSignature
+
+```typescript
+type UseChartProZoomSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProZoomParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProZoomDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProZoomInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProZoomState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProZoomPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartTooltipSignature
+
+```typescript
+type UseChartTooltipSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartTooltipParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartTooltipDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartTooltipInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartTooltipState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartVisibilityManagerInstance
+
+```typescript
+type UseChartVisibilityManagerInstance<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** Hide an item by its identifier. */
+  hideItem: hideItem;
+  /** Show an item by its identifier. */
+  showItem: showItem;
+  /** Toggle the visibility of an item by its identifier. */
+  toggleItemVisibility: toggleItemVisibility;
+};
+```
+
+### UseChartVisibilityManagerParameters
+
+````typescript
+type UseChartVisibilityManagerParameters<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifierWithType<SeriesType>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (VisibilityIdentifierWithType<SeriesType> | VisibilityIdentifier<SeriesType>)[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | VisibilityIdentifierWithType<SeriesType>
+    | VisibilityIdentifier<SeriesType>
+  )[];
+};
+````
+
+### UseChartVisibilityManagerSignature
+
+```typescript
+type UseChartVisibilityManagerSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVisibilityManagerParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartVisibilityManagerInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVisibilityManagerState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartZAxisSignature
+
+```typescript
+type UseChartZAxisSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartZAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartZAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartZAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseFunnelSeriesContextReturnValue
+
+```typescript
+type UseFunnelSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseFunnelSeriesReturnValue
+
+```typescript
+type UseFunnelSeriesReturnValue = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### UseHeatmapSeriesContextReturnValue
+
+```typescript
+type UseHeatmapSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseHeatmapSeriesReturnValue
+
+```typescript
+type UseHeatmapSeriesReturnValue = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### UseItemTooltipReturnValue
+
+```typescript
+type UseItemTooltipReturnValue<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | RangeBarValueType
+    | OHLCValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### UseLineSeriesContextReturnValue
+
+```typescript
+type UseLineSeriesContextReturnValue = SeriesProcessorResult<'line'>;
+```
+
+### UseLineSeriesReturnValue
+
+```typescript
+type UseLineSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UseOHLCSeriesContextReturnValue
+
+```typescript
+type UseOHLCSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseOHLCSeriesReturnValue
+
+```typescript
+type UseOHLCSeriesReturnValue = {
+  hidden: boolean;
+  /** The color of the candle body when the close price is greater than or equal to the open price. */
+  upColor: string;
+  /** The color of the candle body when the close price is less than the open price. */
+  downColor: string;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  type: 'ohlc';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /** The id of this series. */
+  id: string;
+  /** The OHLC data points. */
+  data: (OHLCValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### UsePieSeriesContextReturnValue
+
+```typescript
+type UsePieSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UsePieSeriesReturnValue
+
+```typescript
+type UsePieSeriesReturnValue = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### UseRadarAxisParams
+
+```typescript
+type UseRadarAxisParams = {
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### UseRadarItemTooltipReturnValue
+
+```typescript
+type UseRadarItemTooltipReturnValue = {
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+  values: ItemTooltipValue<'radar'>[];
+};
+```
+
+### UseRadarSeriesContextReturnValue
+
+```typescript
+type UseRadarSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseRadarSeriesReturnValue
+
+```typescript
+type UseRadarSeriesReturnValue = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### UseRangeBarSeriesContextReturnValue
+
+```typescript
+type UseRangeBarSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseRangeBarSeriesReturnValue
+
+```typescript
+type UseRangeBarSeriesReturnValue = {
+  hidden: boolean;
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  type: 'rangeBar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each range bar. */
+  data: (RangeBarValueType | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<RangeBarValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+};
+```
+
+### UseScatterSeriesContextReturnValue
+
+```typescript
+type UseScatterSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseScatterSeriesReturnValue
+
+```typescript
+type UseScatterSeriesReturnValue = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### VisibilityIdentifier
+
+```typescript
+type VisibilityIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type?:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId?: string;
+  seriesId: string;
+};
+```
+
+### VisibilityIdentifierWithType
+
+```typescript
+type VisibilityIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc',
+> = {
+  type:
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'rangeBar'
+    | 'ohlc';
+  seriesId: string;
+};
+```
+
+### XAxis
+
+```typescript
+type XAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### YAxis
+
+```typescript
+type YAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'left' | 'right' | 'none';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * The width of the axis.
+   * Set to `'auto'` to automatically calculate the width based on tick label measurements.
+   * @default 65 if an axis label is provided, 45 otherwise.
+   */
+  width?: number | 'auto';
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### yellowPaletteDark
+
+```typescript
+type yellowPaletteDark = string[];
+```
+
+### yellowPaletteLight
+
+```typescript
+type yellowPaletteLight = string[];
+```
+
+### ZoomData
+
+```typescript
+type ZoomData = {
+  /** The id of the zoomed axis. */
+  axisId: AxisId;
+  /** The starting percentage of the zoom range. In the range of 0 to 100. */
+  start: number;
+  /** The ending percentage of the zoom range. In the range of 0 to 100. */
+  end: number;
+};
+```
+
+### ZoomFilterMode
+
+```typescript
+type ZoomFilterMode = 'keep' | 'discard';
+```
+
+### ZoomOptions
+
+```typescript
+type ZoomOptions = {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   * @default 0
+   */
+  minStart?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   * @default 100
+   */
+  maxEnd?: number;
+  /**
+   * The step size of the zooming function. Defines the granularity of the zoom.
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimum span size in the range of 0 to 100.
+   *
+   * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximum span size in the range of 0 to 100.
+   *
+   * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   * @default true
+   */
+  panning?: boolean;
+  /**
+   * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+   *
+   * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+   * - `discard`: The data outside the zoomed range is discarded for the other axes.
+   *    The other axes will be adjusted to fit the zoomed range.
+   * @default 'keep'
+   */
+  filterMode?: ZoomFilterMode;
+  /** Configures the zoom slider. The slider is an element that shows the zoomed range and allows its manipulation. */
+  slider?: ZoomSliderOptions;
+};
+```
+
+### ZoomSliderOptions
+
+```typescript
+type ZoomSliderOptions = {
+  /** If `true`, the slider will be shown. */
+  enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   * @default 48 if preview is enabled, 28 otherwise.
+   */
+  size?: number;
+  /**
+   * Defines when the tooltip with the zoom values should be shown.
+   * - 'always': The tooltip is always shown.
+   * - 'hover': The tooltip is shown when hovering over the track or thumb.
+   * - 'never': The tooltip is never shown.
+   * @default 'hover'
+   */
+  showTooltip?: ZoomSliderShowTooltip;
+  /**
+   * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
+   */
+  preview?: boolean | ZoomSliderPreviewOptions;
+};
+```
+
+### ZoomSliderShowTooltip
+
+```typescript
+type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
+```
+
+## External Types
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (value: number, context: { dataIndex: number }) => string | null;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### Exclude
+
+```typescript
+type Exclude = 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### hideItem
+
+```typescript
+type hideItem = (identifier: unknown) => void;
+```
+
+### showItem
+
+```typescript
+type showItem = (identifier: unknown) => void;
+```
+
+### toggleItemVisibility
+
+```typescript
+type toggleItemVisibility = (
+  identifier:
+    | unknown
+    | {
+        type:
+          | 'bar'
+          | 'line'
+          | 'scatter'
+          | 'pie'
+          | 'radar'
+          | 'heatmap'
+          | 'funnel'
+          | 'sankey'
+          | 'rangeBar'
+          | 'ohlc';
+        seriesId: string;
+      },
+) => void;
+```
+
+### TriggerOptions
+
+```typescript
+type TriggerOptions = 'item' | 'axis' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.bar-series.ts b/docs/pages/x/api/charts/types.bar-series.ts
new file mode 100644
index 0000000000000..7ac1436a66c36
--- /dev/null
+++ b/docs/pages/x/api/charts/types.bar-series.ts
@@ -0,0 +1,4 @@
+import { BarSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesBarSeries = createTypes(import.meta.url, BarSeries);
diff --git a/docs/pages/x/api/charts/types.candlestick-chart.md b/docs/pages/x/api/charts/types.candlestick-chart.md
new file mode 100644
index 0000000000000..3af385699704c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.candlestick-chart.md
@@ -0,0 +1,1358 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.candlestick-chart.md'
+
+## API Reference
+
+### Unstable_CandlestickChart
+
+Demos:
+
+- [Candlestick](https://mui.com/x/react-charts/candlestick/)
+
+API:
+
+- [Unstable_CandlestickChart API](https://mui.com/x/api/charts/candlestick/)
+
+**Unstable_CandlestickChart Props:**
+
+| Prop                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                  | `React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                 | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight           | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line', y: 'line' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| colors                  | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                 | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| grid                    | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                  | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems             | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis         | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem         | `{ type: 'ohlc'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems      | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom             | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText              | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                  | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick             | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange     | `((hiddenItems: ({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange       | `((highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipAxisChange     | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange     | `((tooltipItem: OHLCItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange            | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                | `OHLCSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | The series to display in the candlestick chart.&#xA;An array of \[\[OHLCSeries]] objects. Currently, only one OHLC series is supported. If would like to display more than one OHLC&#xA;series, open an issue at https\://github.com/mui/mui-x explaining your use case.                                                              |
+| seriesConfig            | `{ ohlc: ChartSeriesTypeConfig<'ohlc'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps               | `CandlestickChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                   | `CandlestickChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                      | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                   | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis             | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem             | `OHLCItemIdentifier \| Omit<OHLCItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zoomData                | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig   | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_CandlestickPlot
+
+## Additional Types
+
+### CandlestickChartProps
+
+````typescript
+type CandlestickChartProps = {
+  /**
+   * The series to display in the candlestick chart.
+   * An array of [[OHLCSeries]] objects.
+   *
+   * Currently, only one OHLC series is supported. If would like to display more than one OHLC
+   * series, open an issue at https://github.com/mui/mui-x explaining your use case.
+   */
+  series: OHLCSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line', y: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: CandlestickChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: CandlestickChartSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { ohlc: ChartSeriesTypeConfig<'ohlc'> };
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: OHLCItemIdentifier | Omit<OHLCItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: OHLCItemIdentifier | null) => void;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'ohlc';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'ohlc';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### CandlestickChartSlotProps
+
+```typescript
+type CandlestickChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### CandlestickChartSlots
+
+```typescript
+type CandlestickChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### CandlestickPlotProps
+
+```typescript
+type CandlestickPlotProps = {};
+```
+
+### OHLCSeries
+
+```typescript
+type OHLCSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /** The OHLC data points. */
+  data?: (OHLCValueType | null)[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'ohlc'
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'rangeBar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default (mode) =>  mode === 'dark' ? '#66bb6a' : '#2e7d32'
+   */
+  upColor?: ChartsColor;
+  /**
+   * The color of the candle body when the close price is less than the open price.
+   * @default (mode) =>  mode === 'dark' ? '#f44336' : '#d32f2f'
+   */
+  downColor?: ChartsColor;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  type?: 'ohlc';
+};
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### OHLCField
+
+```typescript
+type OHLCField = 'open' | 'high' | 'low' | 'close';
+```
diff --git a/docs/pages/x/api/charts/types.candlestick-chart.ts b/docs/pages/x/api/charts/types.candlestick-chart.ts
new file mode 100644
index 0000000000000..54d9e230500d1
--- /dev/null
+++ b/docs/pages/x/api/charts/types.candlestick-chart.ts
@@ -0,0 +1,4 @@
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesCandlestickChart = createTypes(import.meta.url, CandlestickChart);
diff --git a/docs/pages/x/api/charts/types.candlestick-plot.md b/docs/pages/x/api/charts/types.candlestick-plot.md
new file mode 100644
index 0000000000000..bea99fb73a683
--- /dev/null
+++ b/docs/pages/x/api/charts/types.candlestick-plot.md
@@ -0,0 +1,1358 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.candlestick-plot.md'
+
+## API Reference
+
+### Unstable_CandlestickChart
+
+Demos:
+
+- [Candlestick](https://mui.com/x/react-charts/candlestick/)
+
+API:
+
+- [Unstable_CandlestickChart API](https://mui.com/x/api/charts/candlestick/)
+
+**Unstable_CandlestickChart Props:**
+
+| Prop                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                  | `React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                 | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight           | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line', y: 'line' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| colors                  | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                 | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| grid                    | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                  | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems             | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis         | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem         | `{ type: 'ohlc'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems      | `({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' } \| VisibilityIdentifier<'ohlc'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom             | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText              | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                  | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick             | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange     | `((hiddenItems: ({ type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange       | `((highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipAxisChange     | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange     | `((tooltipItem: OHLCItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange            | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                | `OHLCSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | The series to display in the candlestick chart.&#xA;An array of \[\[OHLCSeries]] objects. Currently, only one OHLC series is supported. If would like to display more than one OHLC&#xA;series, open an issue at https\://github.com/mui/mui-x explaining your use case.                                                              |
+| seriesConfig            | `{ ohlc: ChartSeriesTypeConfig<'ohlc'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps               | `CandlestickChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                   | `CandlestickChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                      | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                   | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis             | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem             | `OHLCItemIdentifier \| Omit<OHLCItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                   | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zoomData                | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig   | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_CandlestickPlot
+
+## Additional Types
+
+### CandlestickChartProps
+
+````typescript
+type CandlestickChartProps = {
+  /**
+   * The series to display in the candlestick chart.
+   * An array of [[OHLCSeries]] objects.
+   *
+   * Currently, only one OHLC series is supported. If would like to display more than one OHLC
+   * series, open an issue at https://github.com/mui/mui-x explaining your use case.
+   */
+  series: OHLCSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line', y: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: CandlestickChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: CandlestickChartSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<CandlestickChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { ohlc: ChartSeriesTypeConfig<'ohlc'> };
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: OHLCItemIdentifier | Omit<OHLCItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: OHLCItemIdentifier | null) => void;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'ohlc'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'ohlc'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'ohlc'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'ohlc';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'ohlc';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'ohlc'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'ohlc' }
+    | VisibilityIdentifier<'ohlc'>
+  )[];
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### CandlestickChartSlotProps
+
+```typescript
+type CandlestickChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### CandlestickChartSlots
+
+```typescript
+type CandlestickChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'time'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### CandlestickPlotProps
+
+```typescript
+type CandlestickPlotProps = {};
+```
+
+### OHLCSeries
+
+```typescript
+type OHLCSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /** The OHLC data points. */
+  data?: (OHLCValueType | null)[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { dataIndex: number; field: OHLCField },
+  ) => string | null;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'ohlc'
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'rangeBar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<OHLCValueType | null>) => string;
+  /**
+   * A function to transform the dataset item into an OHLC value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => OHLCValueType | null;
+  /**
+   * The keys used to retrieve data from the dataset.
+   * When provided, all of `open`, `high`, `low`, and `close` must be specified.
+   */
+  datasetKeys?: { open: string; high: string; low: string; close: string };
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default (mode) =>  mode === 'dark' ? '#66bb6a' : '#2e7d32'
+   */
+  upColor?: ChartsColor;
+  /**
+   * The color of the candle body when the close price is less than the open price.
+   * @default (mode) =>  mode === 'dark' ? '#f44336' : '#d32f2f'
+   */
+  downColor?: ChartsColor;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  type?: 'ohlc';
+};
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### OHLCField
+
+```typescript
+type OHLCField = 'open' | 'high' | 'low' | 'close';
+```
diff --git a/docs/pages/x/api/charts/types.candlestick-plot.ts b/docs/pages/x/api/charts/types.candlestick-plot.ts
new file mode 100644
index 0000000000000..ed17f9fd70d9b
--- /dev/null
+++ b/docs/pages/x/api/charts/types.candlestick-plot.ts
@@ -0,0 +1,4 @@
+import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesCandlestickPlot = createTypes(import.meta.url, CandlestickPlot);
diff --git a/docs/pages/x/api/charts/types.chart-image-export-options.md b/docs/pages/x/api/charts/types.chart-image-export-options.md
new file mode 100644
index 0000000000000..5b9d9adf3f07a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.chart-image-export-options.md
@@ -0,0 +1,35002 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.chart-image-export-options.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarChartPro
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### blueberryTwilightPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### bluePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsAxis Props:**
+
+| Prop      | Type                  | Default | Description                             |
+| :-------- | :-------------------- | :------ | :-------------------------------------- |
+| slotProps | `ChartsAxisSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `ChartsAxisSlots`     | `{}`    | Overridable component slots.            |
+
+### ChartsAxisHighlight
+
+Demos:
+
+- [Custom components](https://mui.com/x/react-charts/components/)
+
+API:
+
+- [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+
+**ChartsAxisHighlight Props:**
+
+| Prop | Type                      | Default | Description |
+| :--- | :------------------------ | :------ | :---------- |
+| x    | `ChartsAxisHighlightType` | -       | -           |
+| y    | `ChartsAxisHighlightType` | -       | -           |
+
+### ChartsAxisTooltipContent
+
+**ChartsAxisTooltipContent Props:**
+
+| Prop    | Type                            | Default  | Description                                                                                                                                                                                   |
+| :------ | :------------------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes | `Partial<ChartsTooltipClasses>` | -        | Override or extend the styles applied to the component.                                                                                                                                       |
+| sort    | `'none' \| 'asc' \| 'desc'`     | `'none'` | The sort in which series items are displayed in the tooltip.&#xA;When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value. |
+| sx      | `SxProps<Theme>`                | -        | -                                                                                                                                                                                             |
+
+### ChartsBrushOverlay
+
+Component that renders visual feedback during brush interaction
+
+**ChartsBrushOverlay Props:**
+
+| Prop      | Type     | Default | Description                                   |
+| :-------- | :------- | :------ | :-------------------------------------------- |
+| className | `string` | -       | A CSS class name applied to the root element. |
+
+### ChartsClipPath
+
+API:
+
+- [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+
+**ChartsClipPath Props:**
+
+| Prop   | Type                                                               | Default | Description                                                                                                                             |
+| :----- | :----------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| offset | `{ top?: number; right?: number; bottom?: number; left?: number }` | -       | Offset, in pixels, of the clip path rectangle from the drawing area. A positive value will move the rectangle outside the drawing area. |
+| id\*   | `string`                                                           | -       | The id of the clip path.                                                                                                                |
+
+### ChartsColorCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### ChartsColorPaletteCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsContainerPro
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPro` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+
+**ChartsContainerPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProvider
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/react-charts/composition/)
+
+API:
+
+- [ChartsDataProvider API](https://mui.com/x/api/charts/charts-data-provider/)
+
+**ChartsDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                              | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                     | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]` | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                           | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                                                        | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                                                            | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProviderPro
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPro API](https://mui.com/x/api/charts/charts-data-provider-pro/)
+
+**ChartsDataProviderPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsGrid
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsGrid Props:**
+
+| Prop       | Type                         | Default | Description                                             |
+| :--------- | :--------------------------- | :------ | :------------------------------------------------------ |
+| classes    | `Partial<ChartsGridClasses>` | -       | Override or extend the styles applied to the component. |
+| horizontal | `boolean`                    | -       | Displays horizontal grid.                               |
+| vertical   | `boolean`                    | -       | Displays vertical grid.                                 |
+| className  | `string`                     | -       | A CSS class name applied to the root element.           |
+
+### ChartsItemTooltipContent
+
+**ChartsItemTooltipContent Props:**
+
+| Prop    | Type                            | Default | Description                                             |
+| :------ | :------------------------------ | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipClasses>` | -       | Override or extend the styles applied to the component. |
+| sx      | `SxProps<Theme>`                | -       | -                                                       |
+
+### ChartsLegend
+
+**ChartsLegend Props:**
+
+| Prop                    | Type                                                                                                                     | Default | Description                                                                                  |
+| :---------------------- | :----------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------- |
+| classes                 | `Partial<ChartsLegendClasses>`                                                                                           | -       | Override or extend the styles applied to the component.                                      |
+| direction               | `Direction`                                                                                                              | -       | The direction of the legend layout.&#xA;The default depends on the chart.                    |
+| onItemClick             | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void)` | -       | Callback fired when a legend item is clicked.                                                |
+| slotProps               | `ChartsLegendSlotProps`                                                                                                  | `{}`    | The props used for each component slot.                                                      |
+| slots                   | `ChartsLegendSlots`                                                                                                      | `{}`    | Overridable component slots.                                                                 |
+| sx                      | `SxProps<Theme>`                                                                                                         | -       | -                                                                                            |
+| tabIndex                | `number`                                                                                                                 | -       | -                                                                                            |
+| toggleVisibilityOnClick | `boolean`                                                                                                                | `false` | If `true`, clicking on a legend item will toggle the visibility of the corresponding series. |
+| className               | `string`                                                                                                                 | -       | -                                                                                            |
+
+### ChartsLoadingOverlay
+
+**ChartsLoadingOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### ChartsLocalizationProvider
+
+Demos:
+
+- [localization](https://mui.com/x/react-charts/localization/)
+
+API:
+
+- [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
+
+**ChartsLocalizationProvider Props:**
+
+| Prop       | Type                        | Default | Description                          |
+| :--------- | :-------------------------- | :------ | :----------------------------------- |
+| localeText | `Partial<ChartsLocaleText>` | -       | Localized text for chart components. |
+| children   | `React.ReactNode`           | -       | -                                    |
+
+### ChartsNoDataOverlay
+
+**ChartsNoDataOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### ChartsOverlay
+
+**ChartsOverlay Props:**
+
+| Prop      | Type                     | Default | Description                                |
+| :-------- | :----------------------- | :------ | :----------------------------------------- |
+| loading   | `boolean`                | `false` | If `true`, a loading overlay is displayed. |
+| slotProps | `ChartsOverlaySlotProps` | `{}`    | The props used for each component slot.    |
+| slots     | `ChartsOverlaySlots`     | `{}`    | Overridable component slots.               |
+
+### ChartsReferenceLine
+
+**ChartsReferenceLine Props:**
+
+| Prop       | Type                                   | Default                                                                      | Description                                                                                                                                            |
+| :--------- | :------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label      | `string`                               | -                                                                            | The label to display along the reference line.                                                                                                         |
+| axisId     | `AxisId`                               | ``The `id` of the first defined axis.``                                      | The id of the axis used for the reference value.                                                                                                       |
+| classes    | `Partial<ChartsReferenceLineClasses>`  | -                                                                            | Override or extend the styles applied to the component.                                                                                                |
+| labelAlign | `'start' \| 'middle' \| 'end'`         | `'middle'`                                                                   | The alignment if the label is in the chart drawing area.                                                                                               |
+| labelStyle | `ChartsTextStyle`                      | -                                                                            | The style applied to the label.                                                                                                                        |
+| lineStyle  | `React.CSSProperties`                  | -                                                                            | The style applied to the line.                                                                                                                         |
+| spacing    | `number \| { x?: number; y?: number }` | `{ x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.` | Additional space around the label in px.&#xA;Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes. |
+| x          | `string \| number \| Date`             | -                                                                            | The x value associated with the reference line.&#xA;If defined the reference line will be vertical.                                                    |
+| y          | `string \| number \| Date`             | -                                                                            | The y value associated with the reference line.&#xA;If defined the reference line will be horizontal.                                                  |
+
+### ChartsSurface
+
+A helper component that combines `<ChartsLayerContainer>` and `<ChartsSvgLayer>` to provide a surface for drawing charts.
+If you need more control over the layers, you can use `<ChartsLayerContainer>` and `<ChartsSvgLayer>` separately.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+
+**ChartsSurface Props:**
+
+| Prop      | Type              | Default | Description                                                                                |
+| :-------- | :---------------- | :------ | :----------------------------------------------------------------------------------------- |
+| desc      | `string`          | -       | The description of the chart.&#xA;Used to provide an accessible description for the chart. |
+| sx        | `SxProps<Theme>`  | -       | -                                                                                          |
+| title     | `string`          | -       | The title of the chart.&#xA;Used to provide an accessible label for the chart.             |
+| children  | `React.ReactNode` | -       | -                                                                                          |
+| className | `string`          | -       | -                                                                                          |
+
+### ChartsText
+
+Helper component to manage multiline text in SVG
+
+**ChartsText Props:**
+
+| Prop             | Type              | Default | Description                            |
+| :--------------- | :---------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`          | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`         | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`             | -       | -                                      |
+| text\*           | `string`          | -       | Text displayed.                        |
+| style            | `ChartsTextStyle` | -       | Style applied to text elements.        |
+
+### ChartsToolbarImageExportTrigger
+
+A button that triggers an image export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarImageExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartsToolbarImageExportOptions`                                                                                                                                                                 | -       | The options to apply on the image export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPrintExportTrigger
+
+A button that triggers a print export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarPrintExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartPrintExportOptions`                                                                                                                                                                         | -       | The options to apply on the Print export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPro
+
+The chart toolbar component for the pro package.
+
+**ChartsToolbarPro Props:**
+
+| Prop               | Type                                | Default | Description |
+| :----------------- | :---------------------------------- | :------ | :---------- |
+| imageExportOptions | `ChartsToolbarImageExportOptions[]` | -       | -           |
+| printOptions       | `ChartsToolbarPrintExportOptions`   | -       | -           |
+
+### ChartsToolbarZoomInTrigger
+
+A button that zooms the chart in.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomInTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarZoomOutTrigger
+
+A button that zooms the chart out.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomOutTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsTooltip
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                                                                                                                |
+| :-------- | :--------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                                                                                                                    |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                                                                                                                  |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                                                                                                                    |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                                                                                                               |
+| sort      | `'none' \| 'asc' \| 'desc'`              | `'none'`    | Defines the sort order in which series items are displayed in the axis tooltip.&#xA;When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.&#xA;Only applies when `trigger='axis'`. |
+| trigger   | `'axis' \| 'none' \| 'item'`             | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip.                                                                                         |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                                                                                                          |
+
+### ChartsTooltipContainer
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltipContainer Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                        |
+| :-------- | :--------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                            |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                          |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                            |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                       |
+| trigger   | `TriggerOptions`                         | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip. |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                  |
+| children  | `React.ReactNode`                        | -           | -                                                                                                                                                                                  |
+
+### ChartsWrapper
+
+Wrapper for the charts components.
+Its main purpose is to position the HTML legend in the correct place.
+
+**ChartsWrapper Props:**
+
+| Prop             | Type              | Default                                                          | Description                                      |
+| :--------------- | :---------------- | :--------------------------------------------------------------- | :----------------------------------------------- |
+| extendVertically | `boolean`         | `` `false` if the `height` prop is set. And `true` otherwise. `` | If `true`, the chart wrapper set `height: 100%`. |
+| hideLegend       | `boolean`         | `false`                                                          | If `true`, the legend is not rendered.           |
+| legendDirection  | `Direction`       | `'horizontal'`                                                   | The direction of the legend.                     |
+| legendPosition   | `Position`        | `{ horizontal: 'center', vertical: 'bottom' }`                   | The position of the legend.                      |
+| sx               | `SxProps<Theme>`  | -                                                                | -                                                |
+| children\*       | `React.ReactNode` | -                                                                | -                                                |
+
+### ChartsXAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
+
+**ChartsXAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'x'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelMinGap    | `number`                                                      | `4`             | The minimum gap in pixels between two tick labels.&#xA;If two tick labels are closer than this minimum gap, one of them will be hidden.                                                                                                                                                                                         |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsYAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+
+**ChartsYAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'y'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsZoomSlider
+
+Renders the zoom slider for all x and y axes that have it enabled.
+
+### ChartZoomSlider
+
+### cheerfulFiestaPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ContinuousColorLegend
+
+**ContinuousColorLegend Props:**
+
+| Prop          | Type                                    | Default                | Description                                                                                                                                                                          |
+| :------------ | :-------------------------------------- | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisDirection | `'x' \| 'y' \| 'z'`                     | `'z'`                  | The axis direction containing the color configuration to represent.                                                                                                                  |
+| axisId        | `AxisId`                                | `The first axis item.` | The id of the axis item with the color configuration to represent.                                                                                                                   |
+| classes       | `Partial<ContinuousColorLegendClasses>` | -                      | Override or extend the styles applied to the component.                                                                                                                              |
+| direction     | `Direction`                             | `'horizontal'`         | The direction of the legend layout.                                                                                                                                                  |
+| gradientId    | `string`                                | `auto-generated id`    | The id for the gradient to use.&#xA;If not provided, it will use the generated gradient from the axis configuration.&#xA;The `gradientId` will be used as `fill="url(#gradientId)"`. |
+| labelPosition | `'start' \| 'end' \| 'extremes'`        | `'end'`                | Where to position the labels relative to the gradient.                                                                                                                               |
+| maxLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the maximum side of the gradient.&#xA;Can either be a string, or a function.&#xA;If not defined, the formatted maximal value is display.                     |
+| minLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the minimum side of the gradient.&#xA;Can either be a string, or a function.                                                                                 |
+| reverse       | `boolean`                               | `false`                | If `true`, the gradient and labels will be reversed.                                                                                                                                 |
+| slotProps     | `ChartsLegendSlotProps`                 | `{}`                   | The props used for each component slot.                                                                                                                                              |
+| slots         | `ChartsLegendSlots`                     | `{}`                   | Overridable component slots.                                                                                                                                                         |
+| sx            | `SxProps<Theme>`                        | -                      | -                                                                                                                                                                                    |
+| tabIndex      | `number`                                | -                      | -                                                                                                                                                                                    |
+| thickness     | `number`                                | `12`                   | The thickness of the gradient                                                                                                                                                        |
+| className     | `string`                                | -                      | -                                                                                                                                                                                    |
+
+### cyanPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### defaultOnBeforeExport
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| iframe    | `HTMLIFrameElement` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void;
+```
+
+### FocusedBar
+
+### FocusedFunnelSection
+
+### FocusedHeatmapCell
+
+### FocusedLineMark
+
+### FocusedPieArc
+
+**FocusedPieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color           | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius    | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| outerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle    | `number`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+
+### FocusedRadarMark
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### FocusedScatterMark
+
+### FunnelChart
+
+**FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### FunnelPlot
+
+**FunnelPlot Props:**
+
+| Prop        | Type                                                                                                      | Default | Description                                   |
+| :---------- | :-------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------- |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)` | -       | Callback fired when a funnel item is clicked. |
+| slotProps   | `FunnelPlotSlotProps`                                                                                     | `{}`    | The props used for each component slot.       |
+| slots       | `FunnelPlotSlots`                                                                                         | `{}`    | Overridable component slots.                  |
+| className   | `string`                                                                                                  | -       | A CSS class name applied to the root element. |
+
+### Gauge
+
+**Gauge Props:**
+
+| Prop          | Type                                                           | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                                               | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| classes       | `Partial<GaugeClasses>`                                        | -        | -                                                                                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`                                             | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`                                             | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`                                             | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                                                       | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                                                       | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                                                       | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`                                             | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number`                               | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`                                             | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                                                      | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                                                       | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                                               | -        | -                                                                                                                                                                                                                                                                            |
+| text          | `string \| ((params: GaugeFormatterParams) => string \| null)` | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                                                       | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                                                       | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                                                       | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                                                       | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                                                       | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                                              | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                                                       | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeContainer
+
+**GaugeContainer Props:**
+
+| Prop          | Type                             | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                 | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`               | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`               | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`               | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                         | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                         | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                         | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`               | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number` | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`               | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                        | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                         | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                 | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                         | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                         | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                         | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                         | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                         | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                         | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeReferenceArc
+
+### GaugeValueArc
+
+**GaugeValueArc Props:**
+
+| Prop          | Type      | Default | Description |
+| :------------ | :-------- | :------ | :---------- |
+| skipAnimation | `boolean` | -       | -           |
+
+### GaugeValueText
+
+**GaugeValueText Props:**
+
+| Prop             | Type                                                           | Default | Description                            |
+| :--------------- | :------------------------------------------------------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`                                                       | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`                                                      | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`                                                          | -       | -                                      |
+| text             | `string \| ((params: GaugeFormatterParams) => string \| null)` | -       | -                                      |
+| style            | `ChartsTextStyle`                                              | -       | Style applied to text elements.        |
+
+### getPieCoordinates
+
+**Parameters:**
+
+| Parameter | Type                                                       | Default | Description |
+| :-------- | :--------------------------------------------------------- | :------ | :---------- |
+| series    | `LegendItemParams<DefaultizedPieSeriesType, 'cx' \| 'cy'>` | -       | -           |
+| drawing   | `LegendItemParams<ChartDrawingArea, 'width' \| 'height'>`  | -       | -           |
+
+**Return Value:**
+
+| Property          | Type     | Description |
+| :---------------- | :------- | :---------- |
+| `cx`              | `number` | -           |
+| `cy`              | `number` | -           |
+| `availableRadius` | `number` | -           |
+
+### getValueToPositionMapper
+
+For a given scale return a function that map value to their position.
+Useful when dealing with specific scale such as band.
+
+**Parameters:**
+
+| Parameter | Type                                                                  | Default | Description      |
+| :-------- | :-------------------------------------------------------------------- | :------ | :--------------- |
+| scale     | `D3Scale<{ toString: function toString() { [native code] } }, Range>` | -       | The scale to use |
+
+**Return Value:**
+
+A function that map value to their position
+
+```tsx
+type ReturnValue = (value: any) => number;
+```
+
+### greenPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Heatmap
+
+**Heatmap Props:**
+
+| Prop                      | Type                                                                                                                                                                                         | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                     | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                         | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                              | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                     | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                    | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                    | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                     | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                    | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`           | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                 | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                    | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                  | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                             | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                     | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                           | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                            | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                    | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapSlotProps`                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapSlots`                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                     | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                         | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                       | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| null`                                                                                                           | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                     | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                               | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                               | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                        | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                 | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                      | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                     | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                            | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+### HeatmapCell
+
+Demos:
+
+- [Heatmap](https://mui.com/x/react-charts/heatmap/)
+
+API:
+
+- [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+
+**HeatmapCell Props:**
+
+| Prop         | Type                    | Default | Description |
+| :----------- | :---------------------- | :------ | :---------- |
+| height\*     | `number`                | -       | -           |
+| ownerState\* | `HeatmapCellOwnerState` | -       | -           |
+| width\*      | `number`                | -       | -           |
+| x\*          | `number`                | -       | -           |
+| y\*          | `number`                | -       | -           |
+
+### HeatmapData
+
+**Constructor Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| data      | `HeatmapValueType[]` | -       | -           |
+
+**Methods:**
+
+```typescript
+function getValue(xIndex: number, yIndex: number): number | null;
+```
+
+### HeatmapPlot
+
+**HeatmapPlot Props:**
+
+| Prop         | Type                   | Default | Description                                       |
+| :----------- | :--------------------- | :------ | :------------------------------------------------ |
+| borderRadius | `number`               | -       | The border radius of the heatmap cells in pixels. |
+| slotProps    | `HeatmapPlotSlotProps` | `{}`    | The props used for each component slot.           |
+| slots        | `HeatmapPlotSlots`     | `{}`    | Overridable component slots.                      |
+| className    | `string`               | -       | A CSS class name applied to the root element.     |
+
+### HeatmapTooltip
+
+**HeatmapTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer'`                    | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### HeatmapTooltipContent
+
+**HeatmapTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineChartPro
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'line'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'line'>>, ChartPlugin<UseChartHighlightSignature<'line'>>, ChartPlugin<UseChartVisibilityManagerSignature<'line'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                       | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### mangoFusionPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+### orangePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### PieArc
+
+**PieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color\*         | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius\*  | `number`                                                          | -       | -                                                                                                                                        |
+| dataIndex\*     | `number`                                                          | -       | -                                                                                                                                        |
+| endAngle\*      | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| isFaded\*       | `boolean`                                                         | -       | -                                                                                                                                        |
+| isFocused\*     | `boolean`                                                         | -       | -                                                                                                                                        |
+| isHighlighted\* | `boolean`                                                         | -       | -                                                                                                                                        |
+| outerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle\*  | `number`                                                          | -       | -                                                                                                                                        |
+| seriesId\*      | `string`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+| startAngle\*    | `number`                                                          | -       | -                                                                                                                                        |
+
+### PieArcLabel
+
+**PieArcLabel Props:**
+
+| Prop              | Type                  | Default | Description |
+| :---------------- | :-------------------- | :------ | :---------- |
+| hidden            | `boolean`             | -       | -           |
+| arcLabelRadius\*  | `number`              | -       | -           |
+| classes           | `Partial<PieClasses>` | -       | -           |
+| color\*           | `string`              | -       | -           |
+| cornerRadius\*    | `number`              | -       | -           |
+| endAngle\*        | `number`              | -       | -           |
+| formattedArcLabel | `string \| null`      | -       | -           |
+| isFaded\*         | `boolean`             | -       | -           |
+| isHighlighted\*   | `boolean`             | -       | -           |
+| paddingAngle\*    | `number`              | -       | -           |
+| seriesId\*        | `string`              | -       | -           |
+| skipAnimation\*   | `boolean`             | -       | -           |
+| startAngle\*      | `number`              | -       | -           |
+
+### PieArcLabelPlot
+
+**PieArcLabelPlot Props:**
+
+| Prop             | Type                                                                                                                                                                                                           | Default                           | Description                                                    |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabel         | `'formattedValue' \| 'label' \| 'value' \| ((item: { id?: PieItemId; color: string; labelMarkType?: ChartsLabelMarkType; value: number; formattedValue: string; hidden: boolean; label?: string }) => string)` | -                                 | The label displayed into the arc.                              |
+| arcLabelMinAngle | `number`                                                                                                                                                                                                       | `0`                               | The minimal angle required to display the arc label.           |
+| arcLabelRadius   | `number`                                                                                                                                                                                                       | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius     | `number`                                                                                                                                                                                                       | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*           | `DefaultizedPieValueType[]`                                                                                                                                                                                    | -                                 | -                                                              |
+| faded            | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted      | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius      | `number`                                                                                                                                                                                                       | `0`                               | The radius between circle center and the beginning of the arc. |
+| outerRadius\*    | `number`                                                                                                                                                                                                       | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle     | `number`                                                                                                                                                                                                       | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*       | `string`                                                                                                                                                                                                       | -                                 | The id of this series.                                         |
+| skipAnimation    | `boolean`                                                                                                                                                                                                      | `false`                           | If `true`, animations are skipped.                             |
+| slotProps        | `PieArcLabelPlotSlotProps`                                                                                                                                                                                     | `{}`                              | The props used for each component slot.                        |
+| slots            | `PieArcLabelPlotSlots`                                                                                                                                                                                         | `{}`                              | Overridable component slots.                                   |
+
+### PieArcPlot
+
+**PieArcPlot Props:**
+
+| Prop           | Type                                                                                                                                                               | Default                           | Description                                                    |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabelRadius | `number`                                                                                                                                                           | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius   | `number`                                                                                                                                                           | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*         | `DefaultizedPieValueType[]`                                                                                                                                        | -                                 | -                                                              |
+| faded          | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted    | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius    | `number`                                                                                                                                                           | `0`                               | The radius between circle center and the beginning of the arc. |
+| onItemClick    | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                             | -                                 | Callback fired when a pie item is clicked.                     |
+| outerRadius\*  | `number`                                                                                                                                                           | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle   | `number`                                                                                                                                                           | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*     | `string`                                                                                                                                                           | -                                 | The id of this series.                                         |
+| skipAnimation  | `boolean`                                                                                                                                                          | `false`                           | If `true`, animations are skipped.                             |
+| slotProps      | `PieArcPlotSlotProps`                                                                                                                                              | `{}`                              | The props used for each component slot.                        |
+| slots          | `PieArcPlotSlots`                                                                                                                                                  | `{}`                              | Overridable component slots.                                   |
+
+### piecewiseColorDefaultLabelFormatter
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `PiecewiseLabelFormatterParams` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PiecewiseColorLegend
+
+**PiecewiseColorLegend Props:**
+
+| Prop           | Type                                                                                                                             | Default                | Description                                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :------------------------------------------------------------------ |
+| axisDirection  | `'x' \| 'y' \| 'z'`                                                                                                              | `'z'`                  | The axis direction containing the color configuration to represent. |
+| axisId         | `AxisId`                                                                                                                         | `The first axis item.` | The id of the axis item with the color configuration to represent.  |
+| classes        | `Partial<PiecewiseColorLegendClasses>`                                                                                           | -                      | Override or extend the styles applied to the component.             |
+| direction      | `Direction`                                                                                                                      | `'horizontal'`         | The direction of the legend layout.                                 |
+| labelFormatter | `((params: PiecewiseLabelFormatterParams) => string \| null)`                                                                    | -                      | Format the legend labels.                                           |
+| labelPosition  | `'start' \| 'end' \| 'extremes' \| 'inline-start' \| 'inline-end'`                                                               | `'extremes'`           | Where to position the labels relative to the color marks.           |
+| onItemClick    | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void)` | -                      | Callback fired when a legend item is clicked.                       |
+| slotProps      | `ChartsLegendSlotProps`                                                                                                          | `{}`                   | The props used for each component slot.                             |
+| slots          | `ChartsLegendSlots`                                                                                                              | `{}`                   | Overridable component slots.                                        |
+| sx             | `SxProps<Theme>`                                                                                                                 | -                      | -                                                                   |
+| tabIndex       | `number`                                                                                                                         | -                      | -                                                                   |
+| className      | `string`                                                                                                                         | -                      | -                                                                   |
+
+### PieChart
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+
+**PieChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PieChartPro
+
+**PieChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PiePlot
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+
+**PiePlot Props:**
+
+| Prop          | Type                                                                                                                                   | Default | Description                                |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)` | -       | Callback fired when a pie item is clicked. |
+| skipAnimation | `boolean`                                                                                                                              | `false` | If `true`, animations are skipped.         |
+| slotProps     | `PiePlotSlotProps`                                                                                                                     | `{}`    | The props used for each component slot.    |
+| slots         | `PiePlotSlots`                                                                                                                         | `{}`    | Overridable component slots.               |
+| className     | `string`                                                                                                                               | -       | -                                          |
+
+### pinkPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### purplePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### RadarAxis
+
+**RadarAxis Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default        | Description                                                                                                                                                                              |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| angle            | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The absolute rotation angle of the metrics (in degree)&#xA;If not defined the metric angle will be used.                                                                                 |
+| classes          | `Partial<LegendItemParams<RadarClasses, 'axisLine' \| 'axisLabel' \| 'axisRoot'>>`                                                                                                                                                                                                                                                                                                                                                                   | -              | Override or extend the styles applied to the component.                                                                                                                                  |
+| divisions        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `1`            | The number of divisions with label.                                                                                                                                                      |
+| dominantBaseline | `'auto' \| 'use-script' \| 'no-change' \| 'reset-size' \| 'ideographic' \| 'alphabetic' \| 'hanging' \| 'mathematical' \| 'central' \| 'middle' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| ((angle: number) => 'auto' \| 'middle' \| 'alphabetic' \| 'hanging' \| 'ideographic' \| 'mathematical' \| 'central' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| 'use-script' \| 'no-change' \| 'reset-size' \| undefined)` | -              | The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).                                                                           |
+| labelOrientation | `'horizontal' \| 'rotated'`                                                                                                                                                                                                                                                                                                                                                                                                                          | `'horizontal'` | Defines how label align with the axis. 'horizontal': labels stay horizontal and their placement change with the axis angle.'rotated': labels are rotated 90deg relatively to their axis. |
+| metric           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The metric to get.&#xA;If `undefined`, the hook returns `null`                                                                                                                           |
+| textAnchor       | `'start' \| 'middle' \| 'end' \| 'inherit' \| ((angle: number) => 'start' \| 'end' \| 'middle' \| 'inherit' \| undefined)`                                                                                                                                                                                                                                                                                                                           | -              | The labels text anchor or a function returning the text anchor for a given axis angle (in degree).                                                                                       |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | A CSS class name applied to the root element.                                                                                                                                            |
+
+### RadarAxisHighlight
+
+**RadarAxisHighlight Props:**
+
+| Prop      | Type                                                                                                        | Default | Description                                             |
+| :-------- | :---------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| classes   | `Partial<LegendItemParams<RadarClasses, 'axisHighlightRoot' \| 'axisHighlightLine' \| 'axisHighlightDot'>>` | -       | Override or extend the styles applied to the component. |
+| className | `string`                                                                                                    | -       | A CSS class name applied to the root element.           |
+
+### RadarChart
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarChartPro
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                          | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                 | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                                                                                                                                                                                                                      | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                                                                                                                                                                                                                | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                        | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                              | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                 | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                                                                                                                                                                                                                     | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                        | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'radar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartPolarAxisSignature>, ChartPlugin<UseChartHighlightSignature<'radar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>, ChartPlugin<UseChartProExportSignature>]` | -                                                                                      | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*                   | `RadarConfig`                                                                                                                                                                                                                                                                                                                                 | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                                                                                                                                                                                                                     | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                                                                                                                                                                                                                   | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                                                                                                                                                                                                       | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartProSlotProps`                                                                                                                                                                                                                                                                                                                      | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartProSlots`                                                                                                                                                                                                                                                                                                                          | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                                                                                                                                                                                                         | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                              | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                           | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                             | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarDataProvider
+
+**RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### RadarGrid
+
+**RadarGrid Props:**
+
+| Prop        | Type                                  | Default                                                                                | Description                                               |
+| :---------- | :------------------------------------ | :------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
+| divisions   | `number`                              | `5`                                                                                    | The number of divisions in the radar grid.                |
+| shape       | `'sharp' \| 'circular'`               | `'sharp'`                                                                              | The grid shape.                                           |
+| stripeColor | `((index: number) => string) \| null` | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes |
+
+### RadarMetricLabels
+
+### RadarSeriesArea
+
+**RadarSeriesArea Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesMarks
+
+**RadarSeriesMarks Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesPlot
+
+**RadarSeriesPlot Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onAreaClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| onMarkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### rainbowSurgePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### redPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Scatter
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [Scatter API](https://mui.com/x/api/charts/scatter/)
+
+**Scatter Props:**
+
+| Prop          | Type                                                                                                        | Default | Description                                                                                                                                                                                                                                    |
+| :------------ | :---------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes       | `Partial<ScatterClasses>`                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| color\*       | `string`                                                                                                    | -       | -                                                                                                                                                                                                                                              |
+| colorGetter\* | `((dataIndex?: number) => string)`                                                                          | -       | Function to get the color of a scatter item given its data index.&#xA;The data index argument is optional. If not provided, the color for the entire series is returned.&#xA;If provided, the color for the specific scatter item is returned. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -       | Callback fired when clicking on a scatter item.                                                                                                                                                                                                |
+| series\*      | `DefaultizedScatterSeriesType`                                                                              | -       | -                                                                                                                                                                                                                                              |
+| slotProps     | `ScatterSlotProps`                                                                                          | -       | -                                                                                                                                                                                                                                              |
+| slots         | `ScatterSlots`                                                                                              | -       | -                                                                                                                                                                                                                                              |
+| xScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| yScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+
+### ScatterChart
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterChartPro
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'scatter'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>, ChartPlugin<UseChartHighlightSignature<'scatter'>>, ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>, ChartPlugin<UseChartClosestPointSignature>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                               | -                          | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterMarker
+
+**ScatterMarker Props:**
+
+| Prop            | Type                                                          | Default | Description                                     |
+| :-------------- | :------------------------------------------------------------ | :------ | :---------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGElement, MouseEvent>) => void)` | -       | Callback fired when clicking on a scatter item. |
+| color\*         | `string`                                                      | -       | The fill color of the marker.                   |
+| dataIndex\*     | `number`                                                      | -       | The index of the data point.                    |
+| isFaded\*       | `boolean`                                                     | -       | If `true`, the marker is faded.                 |
+| isHighlighted\* | `boolean`                                                     | -       | If `true`, the marker is highlighted.           |
+| seriesId\*      | `string`                                                      | -       | The series ID.                                  |
+| size\*          | `number`                                                      | -       | The size of the marker.                         |
+| x\*             | `number`                                                      | -       | The x coordinate of the data point.             |
+| y\*             | `number`                                                      | -       | The y coordinate of the data point.             |
+
+### ScatterPlot
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+
+**ScatterPlot Props:**
+
+| Prop        | Type                                                                                                        | Default        | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------- | :---------------------------------------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classes     | `Partial<ScatterClasses>`                                                                                   | -              | -                                                                                                                                                                                                                                                                                                                                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -              | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| renderer    | `RendererType`                                                                                              | `'svg-single'` | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| slotProps   | `ScatterPlotSlotProps`                                                                                      | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots       | `ScatterPlotSlots`                                                                                          | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| className   | `string`                                                                                                    | -              | -                                                                                                                                                                                                                                                                                                                                     |
+
+### SparkLineChart
+
+Demos:
+
+- [SparkLine](https://mui.com/x/react-charts/sparkline/)
+
+API:
+
+- [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+
+**SparkLineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                                                               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| area                      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | Set to `true` to fill spark line area.&#xA;Has no effect if plotType='bar'.                                                                                                                                                                                                                                                           |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| baseline                  | `number \| 'min' \| 'max'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `0`                                                                   | The value of the line at the base of the series area. `'min'` the area will fill the space **under** the line.`'max'` the area will fill the space **above** the line.`number` the area will fill the space between this value and the line                                                                                           |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| clipAreaOffset            | `{ top?: number; right?: number; bottom?: number; left?: number }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{ top: 1, right: 1, bottom: 1, left: 1 }`                            | The clipped area offset in pixels. This prevents partial clipping of lines when they are drawn on the edge of the drawing area.                                                                                                                                                                                                       |
+| color                     | `ChartsColor`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `rainbowSurgePalette[0]`                                              | Color used to colorize the sparkline.                                                                                                                                                                                                                                                                                                 |
+| curve                     | `CurveType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'linear'`                                                            | -                                                                                                                                                                                                                                                                                                                                     |
+| data\*                    | `number[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | Data to plot.                                                                                                                                                                                                                                                                                                                         |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClipping           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.                                                                                                                                                                                                                        |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| { type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                                                                     | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `5`                                                                   | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| { type: 'bar'; seriesId: string; dataIndex?: number } \| { type: 'line'; seriesId: string; dataIndex?: number } \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| { type: 'pie'; seriesId: string; dataIndex?: number } \| { type: 'radar'; seriesId: string; dataIndex?: number } \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | Callback fired when clicking close to an item.&#xA;This is only available for scatter plot for now.                                                                                                                                                                                                                                   |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| LineItemIdentifier \| ScatterItemIdentifier \| PieItemIdentifier \| RadarItemIdentifier \| HeatmapItemIdentifier \| FunnelItemIdentifier \| SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| plotType                  | `'bar' \| 'line'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'line'`                                                              | Type of plot used.                                                                                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'>; line: ChartSeriesTypeConfig<'line'>; scatter: ChartSeriesTypeConfig<'scatter'>; pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> }; radar: ChartSeriesTypeConfig<'radar'>; heatmap: ChartSeriesTypeConfig<'heatmap'>; funnel: ChartSeriesTypeConfig<'funnel'>; sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                                                                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showHighlight             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | Set to `true` to highlight the value.&#xA;With line, it shows a point.&#xA;With bar, it shows a highlight band.                                                                                                                                                                                                                       |
+| showTooltip               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | Set to `true` to enable the tooltip in the sparkline.                                                                                                                                                                                                                                                                                 |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `SparkLineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                                                                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `SparkLineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `{}`                                                                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| valueFormatter            | `((value: number \| null) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `(value: number \| null) => (value === null ? '' : value.toString())` | Formatter used by the tooltip.                                                                                                                                                                                                                                                                                                        |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `XAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | The xAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| yAxis                     | `YAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | The yAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### strawberrySkyPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Unstable_FunnelChart
+
+**Unstable_FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarChart
+
+**Unstable_RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarDataProvider
+
+**Unstable_RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useAnimate
+
+Hook to customize the animation of an element.
+Animates a ref from `initialProps` to `props`.
+
+**useAnimate Parameters:**
+
+| Parameter | Type                                | Default | Description              |
+| :-------- | :---------------------------------- | :------ | :----------------------- |
+| props     | `{}`                                | -       | The props to animate to. |
+| \_\_1     | `UseAnimateParams<{}, Element, {}>` | -       | -                        |
+
+**useAnimate Return Value:**
+
+an object containing a ref that should be passed to the element to animate and the transformed props.
+If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+`initialProps`.
+
+The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+
+When an animation starts, an interpolator is created using `createInterpolator`.
+On every animation frame:
+
+1. The interpolator is called to get the interpolated props;
+2. `transformProps` is called to transform the interpolated props;
+3. `applyProps` is called to apply the transformed props to the element.
+
+If `props` change while an animation is progress, the animation will continue towards the new `props`.
+
+The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+started and `applyProps` will not be called.
+
+```tsx
+type ReturnValue = UseAnimateReturn<Element, {}>;
+```
+
+### useAnimateArea
+
+Animates an area of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateArea Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateAreaParams` | -       | -           |
+
+**useAnimateArea Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedAreaReturn;
+```
+
+### useAnimateBar
+
+Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+final position.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBar Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| props     | `UseAnimateBarParams` | -       | -           |
+
+**useAnimateBar Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarReturnValue;
+```
+
+### useAnimateBarLabel
+
+Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+center of the bar it belongs to.
+The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+horizontally.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBarLabel Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| props     | `UseAnimateBarLabelParams` | -       | -           |
+
+**useAnimateBarLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarLabelReturn;
+```
+
+### useAnimateLine
+
+Animates a line of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateLine Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateLineParams` | -       | -           |
+
+**useAnimateLine Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedReturnValue;
+```
+
+### useAnimatePieArc
+
+Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArc Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcParams` | -       | -           |
+
+**useAnimatePieArc Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcReturnValue;
+```
+
+### useAnimatePieArcLabel
+
+Animates the label of pie slice from its middle point to the centroid of the slice.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArcLabel Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcLabelParams` | -       | -           |
+
+**useAnimatePieArcLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcLabelReturn;
+```
+
+### useAxesTooltip
+
+Returns the axes to display in the tooltip and the series item related to them.
+
+**useAxesTooltip Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| params    | `UseAxesTooltipParams` | -       | -           |
+
+**useAxesTooltip Return Value:**
+
+```tsx
+type ReturnValue =
+  | UseAxesTooltipReturnValue<
+      'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel',
+      string | number | Date
+    >[]
+  | null;
+```
+
+### useBarSeries
+
+Get access to the internal state of bar series.
+
+**useBarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useBarSeries Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'bar';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      stackOffset?: StackOffsetType;
+      barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+      barLabelPlacement?: 'center' | 'outside';
+      stack?: string;
+      stackOrder?: StackOrderType;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      layout: 'horizontal' | 'vertical';
+      minBarSize: number;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useBarSeriesContext
+
+Get access to the internal state of bar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useBarSeriesContext Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'bar'> | undefined;
+```
+
+### useBrush
+
+Get the current brush state.
+
+- `start` is the starting point of the brush selection.
+- `current` is the current point of the brush selection.
+
+**useBrush Return Value:**
+
+`{ start, current }` - The brush state.
+
+```tsx
+type ReturnValue = { start: { x: number; y: number }; current: { x: number; y: number } } | null;
+```
+
+### useChartApiContext
+
+The `useChartApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProvider` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<Partial<{}>>;
+```
+
+### useChartCartesianAxis
+
+**useChartCartesianAxis Parameters:**
+
+| Parameter | Type                                                      | Default | Description |
+| :-------- | :-------------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartCartesianAxisSignature<any>>` | -       | -           |
+
+**useChartCartesianAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartCartesianAxisSignature<any>>;
+```
+
+### useChartClosestPoint
+
+**useChartClosestPoint Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartClosestPointSignature>` | -       | -           |
+
+**useChartClosestPoint Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartClosestPointSignature>;
+```
+
+### useChartGradientId
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+
+**useChartGradientId Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientId Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartGradientIdObjectBound
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+
+**useChartGradientIdObjectBound Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientIdObjectBound Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartHighlight
+
+**useChartHighlight Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartHighlightSignature<any>>` | -       | -           |
+
+**useChartHighlight Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartHighlightSignature<any>>;
+```
+
+### useChartId
+
+Get the unique identifier of the chart.
+
+**useChartId Return Value:**
+
+chartId if it exists.
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### useChartInteraction
+
+**useChartInteraction Parameters:**
+
+| Parameter | Type                                               | Default | Description |
+| :-------- | :------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartInteractionSignature>` | -       | -           |
+
+**useChartInteraction Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartInteractionSignature>;
+```
+
+### useChartPolarAxis
+
+**useChartPolarAxis Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartPolarAxisSignature<any>>` | -       | -           |
+
+**useChartPolarAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartPolarAxisSignature<any>>;
+```
+
+### useChartProApiContext
+
+The `useChartProApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProviderPro` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartProApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<ChartProApi>;
+```
+
+### useChartProApiRef
+
+Hook that instantiates a \[\[ChartProApiRef]].
+The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+
+**useChartProApiRef Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<
+  | ChartProApi<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'composition',
+      ChartAnyPluginSignature[]
+    >
+  | undefined
+>;
+```
+
+### useChartProExport
+
+**useChartProExport Parameters:**
+
+| Parameter | Type                                             | Default | Description |
+| :-------- | :----------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProExportSignature>` | -       | -           |
+
+**useChartProExport Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProExportSignature>;
+```
+
+### useChartProZoom
+
+**useChartProZoom Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProZoomSignature>` | -       | -           |
+
+**useChartProZoom Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProZoomSignature>;
+```
+
+### useChartRootRef
+
+Get the ref for the root chart element.
+
+**useChartRootRef Return Value:**
+
+The root chart element ref.
+
+```tsx
+type ReturnValue = React.RefObject<Element | null>;
+```
+
+### useChartsLayerContainerRef
+
+Get the ref for the chart surface element.
+
+**useChartsLayerContainerRef Return Value:**
+
+The chart surface ref.
+
+```tsx
+type ReturnValue = React.RefObject<HTMLDivElement | null>;
+```
+
+### useChartsLocalization
+
+**useChartsLocalization Return Value:**
+
+```tsx
+type ReturnValue = ChartsLocalizationContextValue;
+```
+
+### useChartTooltip
+
+**useChartTooltip Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartTooltipSignature<any>>` | -       | -           |
+
+**useChartTooltip Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartTooltipSignature<any>>;
+```
+
+### useChartVisibilityManager
+
+**useChartVisibilityManager Parameters:**
+
+| Parameter | Type                                                          | Default | Description |
+| :-------- | :------------------------------------------------------------ | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartVisibilityManagerSignature<any>>` | -       | -           |
+
+**useChartVisibilityManager Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartVisibilityManagerSignature<any>>;
+```
+
+### useChartZAxis
+
+**useChartZAxis Parameters:**
+
+| Parameter | Type                                         | Default | Description |
+| :-------- | :------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartZAxisSignature>` | -       | -           |
+
+**useChartZAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartZAxisSignature>;
+```
+
+### useDataset
+
+Get access to the dataset used to populate series and axes data.
+
+**useDataset Return Value:**
+
+The dataset array if provided, otherwise undefined.
+
+```tsx
+type ReturnValue = Readonly<DatasetElementType<unknown>[]> | undefined;
+```
+
+### useDrawingArea
+
+Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
+
+It includes the left, top, width, height, bottom, and right dimensions.
+
+**useDrawingArea Return Value:**
+
+The drawing area dimensions.
+
+```tsx
+type ReturnValue = ChartDrawingArea;
+```
+
+### useFocusedItem
+
+Get the focused item from keyboard navigation.
+
+**useFocusedItem Return Value:**
+
+```tsx
+type ReturnValue = FocusedItemIdentifier | null;
+```
+
+### useFunnelSeries
+
+Get access to the internal state of funnel series.
+
+**useFunnelSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useFunnelSeries Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue = DefaultizedFunnelSeriesType | undefined;
+```
+
+### useFunnelSeriesContext
+
+Get access to the internal state of funnel series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useFunnelSeriesContext Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useGaugeState
+
+**useGaugeState Return Value:**
+
+```tsx
+type ReturnValue = {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  cx: number;
+  cy: number;
+  maxRadius: number;
+  valueAngle: number | null;
+};
+```
+
+### useHeatmapSeries
+
+Get access to the internal state of heatmap series.
+
+**useHeatmapSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useHeatmapSeries Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue = DefaultizedHeatmapSeriesType | undefined;
+```
+
+### useHeatmapSeriesContext
+
+Get access to the internal state of heatmap series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useHeatmapSeriesContext Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useIsZoomInteracting
+
+Get access to the zoom state.
+
+**useIsZoomInteracting Return Value:**
+
+Inform the zoom is interacting.
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### useItemHighlightState
+
+A hook to check the highlighted state of the item.
+This function already calculates that an item is not faded if it is highlighted.
+
+If you need fine control over the state, use the `useItemHighlightStateGetter` hook instead.
+
+**useItemHighlightState Parameters:**
+
+| Parameter | Type                                                                                                              | Default | Description          |
+| :-------- | :---------------------------------------------------------------------------------------------------------------- | :------ | :------------------- |
+| item      | `UseItemHighlightedParams<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>` | -       | is the item to check |
+
+**useItemHighlightState Return Value:**
+
+the state of the item
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useItemHighlightStateGetter
+
+A hook to get a callback that returns the highlight state of an item.
+
+If you're interested by a single item, consider using `useItemHighlightState`.
+
+**useItemHighlightStateGetter Return Value:**
+
+callback to get the highlight state of an item.
+
+```tsx
+type ReturnValue = (item: any | null) => HighlightState;
+```
+
+### useItemTooltip
+
+Returns a config object when the tooltip contains a single item to display.
+Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+
+**useItemTooltip Return Value:**
+
+The tooltip item config
+
+```tsx
+type ReturnValue = UseItemTooltipReturnValue<
+  'bar' | 'line' | 'scatter' | 'pie' | 'heatmap' | 'funnel' | 'sankey'
+> | null;
+```
+
+### useLegend
+
+Get the legend items to display.
+
+This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+
+An alternative is to use the `useSeries` hook and format the legend items yourself.
+
+**useLegend Return Value:**
+
+legend data
+
+| Property | Type                       | Description |
+| :------- | :------------------------- | :---------- |
+| items    | `SeriesLegendItemParams[]` | -           |
+
+### useLineSeries
+
+Get access to the internal state of line series.
+
+**useLineSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useLineSeries Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'line';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      baseline?: number | 'min' | 'max';
+      stackOffset?: StackOffsetType;
+      stack?: string;
+      stackOrder?: StackOrderType;
+      area?: boolean;
+      curve?: CurveType;
+      strictStepCurve?: boolean;
+      showMark?: boolean | ((params: ShowMarkParams) => boolean);
+      shape?: MarkShape;
+      disableHighlight?: boolean;
+      connectNulls?: boolean;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useLineSeriesContext
+
+Get access to the internal state of line series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useLineSeriesContext Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'line'> | undefined;
+```
+
+### usePieSeries
+
+Get access to the internal state of pie series.
+
+**usePieSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**usePieSeries Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue = DefaultizedPieSeriesType | undefined;
+```
+
+### usePieSeriesContext
+
+Get access to the internal state of pie series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**usePieSeriesContext Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadarAxis
+
+Returns an array with one item per metric with the different points to label.
+
+**useRadarAxis Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| params    | `UseRadarAxisParams` | -       | -           |
+
+**useRadarAxis Return Value:**
+
+```tsx
+type ReturnValue = {
+  metric: string;
+  angle: number;
+  center: { x: number; y: number };
+  labels: { x: number; y: number; value: number | Date; formattedValue: string }[];
+} | null;
+```
+
+### useRadarItemTooltip
+
+Contains an object per value with their content and the label of the associated metric.
+
+**useRadarItemTooltip Return Value:**
+
+The tooltip item configs
+
+```tsx
+type ReturnValue = UseRadarItemTooltipReturnValue | null;
+```
+
+### useRadarSeries
+
+Get access to the internal state of radar series.
+
+**useRadarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useRadarSeries Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue = DefaultizedRadarSeriesType | undefined;
+```
+
+### useRadarSeriesContext
+
+Get access to the internal state of radar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useRadarSeriesContext Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadiusAxes
+
+Get all the radius axes for polar charts.
+
+Returns all radial axes configured in polar charts along with their IDs.
+Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+
+**useRadiusAxes Return Value:**
+
+An object containing:
+
+- `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `radiusAxisIds`: An array of all radius axis IDs in the chart
+
+| Property      | Type                                           | Description |
+| :------------ | :--------------------------------------------- | :---------- |
+| radiusAxis    | `DefaultizedAxisConfig<ChartsRadiusAxisProps>` | -           |
+| radiusAxisIds | `string[]`                                     | -           |
+
+### useRadiusAxis
+
+Get a specific radius axis or the default radius axis for polar charts.
+
+Returns the configuration and scale for a radial axis in polar charts.
+The radius axis controls the radial distance of data points from the center of the circle.
+
+**useRadiusAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                           |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's radius axis configurationUndefined to get the default (first) radius axis |
+
+**useRadiusAxis Return Value:**
+
+The radius axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRadiusAxisProps
+    >
+  | undefined;
+```
+
+### useRadiusScale
+
+Get the radius scale.
+
+**useRadiusScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                           |
+| :-------- | :----------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `radiusAxis` propUndefined to get the default radius axis |
+
+**useRadiusScale Return Value:**
+
+The radius axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useRotationAxes
+
+Get all the rotation axes for polar charts.
+
+Returns all rotation axes configured in polar charts along with their IDs.
+Rotation axes are used in charts like `RadarChart` to define angular positioning.
+
+**useRotationAxes Return Value:**
+
+An object containing:
+
+- `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `rotationAxisIds`: An array of all rotation axis IDs in the chart
+
+| Property        | Type                                             | Description |
+| :-------------- | :----------------------------------------------- | :---------- |
+| rotationAxis    | `DefaultizedAxisConfig<ChartsRotationAxisProps>` | -           |
+| rotationAxisIds | `string[]`                                       | -           |
+
+### useRotationAxis
+
+Get a specific rotation axis or the default rotation axis for polar charts.
+
+Returns the configuration and scale for a rotation axis in polar charts.
+The rotation axis controls the angular positioning of data points around the circle.
+
+**useRotationAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                               |
+| :-------- | :------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's rotation axis configurationUndefined to get the default (first) rotation axis |
+
+**useRotationAxis Return Value:**
+
+The rotation axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRotationAxisProps
+    >
+  | undefined;
+```
+
+### useRotationScale
+
+Get the rotation scale.
+
+**useRotationScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                               |
+| :-------- | :----------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `rotationAxis` propUndefined to get the default rotation axis |
+
+**useRotationScale Return Value:**
+
+The rotation axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useScatterSeries
+
+Get access to the internal state of scatter series.
+
+**useScatterSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useScatterSeries Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue = DefaultizedScatterSeriesType | undefined;
+```
+
+### useScatterSeriesContext
+
+Get access to the internal state of scatter series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useScatterSeriesContext Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useSeries
+
+Get access to the internal state of series.
+Structured by type of series:
+{ seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: \[id1, ...] } }
+
+**useSeries Return Value:**
+
+FormattedSeries series
+
+```tsx
+type ReturnValue = ProcessedSeries;
+```
+
+### useXAxes
+
+Get all the x-axes.
+
+Returns all X axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useXAxes Return Value:**
+
+An object containing:
+
+- `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `xAxisIds`: An array of all X axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| xAxis    | `ComputedAxisConfig<ChartsXAxisProps>` | -           |
+| xAxisIds | `AxisId[]`                             | -           |
+
+### useXAxis
+
+Get a specific X axis or the default X axis.
+
+**useXAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXAxis Return Value:**
+
+The configuration for a single X axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsXAxisProps
+>;
+```
+
+### useXAxisCoordinates
+
+Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+
+**useXAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisCoordinates Return Value:**
+
+The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useXAxisTicks
+
+Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useXAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useXColorScale
+
+Get the X axis color scale.
+
+**useXColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useXColorScale Return Value:**
+
+The color scale for the specified X axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useXScale
+
+Get the X scale.
+
+**useXScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXScale Return Value:**
+
+The X axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useYAxes
+
+Get all the y-axes.
+
+Returns all Y axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useYAxes Return Value:**
+
+An object containing:
+
+- `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `yAxisIds`: An array of all Y axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| yAxis    | `ComputedAxisConfig<ChartsYAxisProps>` | -           |
+| yAxisIds | `AxisId[]`                             | -           |
+
+### useYAxis
+
+Get a specific Y axis or the default Y axis.
+
+**useYAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYAxis Return Value:**
+
+The configuration for a single Y axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsYAxisProps
+>;
+```
+
+### useYAxisCoordinates
+
+Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+
+**useYAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisCoordinates Return Value:**
+
+The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useYAxisTicks
+
+Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useYAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useYColorScale
+
+Get the Y axis color scale.
+
+**useYColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useYColorScale Return Value:**
+
+The color scale for the specified Y axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useYScale
+
+Get the Y scale.
+
+**useYScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYScale Return Value:**
+
+The Y axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useZAxes
+
+**useZAxes Return Value:**
+
+| Property | Type                     | Description |
+| :------- | :----------------------- | :---------- |
+| zAxis    | `DefaultizedZAxisConfig` | -           |
+| zAxisIds | `AxisId[]`               | -           |
+
+### useZAxis
+
+**useZAxis Parameters:**
+
+| Parameter  | Type               | Default | Description |
+| :--------- | :----------------- | :------ | :---------- |
+| identifier | `number \| string` | -       | -           |
+
+**useZAxis Return Value:**
+
+```tsx
+type ReturnValue = ZAxisDefaultized;
+```
+
+### useZColorScale
+
+Get the Z axis color scale.
+
+**useZColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useZColorScale Return Value:**
+
+The color scale for the specified Z axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### yellowPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+## Additional Types
+
+### AllSeriesType
+
+```typescript
+type AllSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | MakeOptional<PieValueType, 'id'>[]
+    | number[]
+    | FunnelValueType[]
+    | SankeyData;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<MakeOptional<PieValueType, 'id'>>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null);
+  /** The id of this series. */
+  id?: SeriesId;
+};
+```
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AXIS_LABEL_DEFAULT_HEIGHT
+
+```typescript
+type AXIS_LABEL_DEFAULT_HEIGHT = 20;
+```
+
+### axisClasses
+
+```typescript
+type axisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### AxisConfig
+
+Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
+
+```typescript
+type AxisConfig<S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear', V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = { offset?: number } & CommonAxisConfig<S, V> & { min?: NumberValue; max?: NumberValue } | {} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<{ scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear'; scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>; colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig }, 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension
+```
+
+### AxisCoordinates
+
+```typescript
+type AxisCoordinates = { left: number; top: number; right: number; bottom: number };
+```
+
+### AxisItemIdentifier
+
+Identifies a data point within an axis.
+
+```typescript
+type AxisItemIdentifier = {
+  /** The axis id. */
+  axisId: AxisId;
+  /** The data index. */
+  dataIndex: number;
+};
+```
+
+### AxisValueFormatterContext
+
+```typescript
+type AxisValueFormatterContext<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+> =
+  | { location: 'legend' }
+  | {
+      location: 'tooltip' | 'zoom-slider-tooltip';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+    }
+  | {
+      location: 'tick';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+      defaultTickLabel: string;
+      tickNumber?: number;
+    };
+```
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BAR_CHART_PRO_PLUGINS
+
+```typescript
+type BAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartProPluginSignatures
+
+```typescript
+type BarChartProPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartProProps
+
+````typescript
+type BarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartProSlotProps
+
+```typescript
+type BarChartProSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartProSlots
+
+```typescript
+type BarChartProSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'label' | 'root' | 'series' | 'element' | 'seriesLabels' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  classes?: Partial<BarClasses>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarItemIdentifier
+
+An object that allows to identify a single bar.
+Used for item interaction
+
+```typescript
+type BarItemIdentifier = { type: 'bar'; seriesId: string; dataIndex: number };
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+### BarSeriesType
+
+```typescript
+type BarSeriesType = {
+  type: 'bar';
+  /** Data associated to each bar. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize?: number;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### BarValueType
+
+```typescript
+type BarValueType = number;
+```
+
+### blueberryTwilightPaletteDark
+
+```typescript
+type blueberryTwilightPaletteDark = string[];
+```
+
+### blueberryTwilightPaletteLight
+
+```typescript
+type blueberryTwilightPaletteLight = string[];
+```
+
+### bluePaletteDark
+
+```typescript
+type bluePaletteDark = string[];
+```
+
+### bluePaletteLight
+
+```typescript
+type bluePaletteLight = string[];
+```
+
+### brushOverlayClasses
+
+```typescript
+type brushOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+};
+```
+
+### BrushOverlayClasses
+
+```typescript
+type BrushOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+};
+```
+
+### BrushOverlayClassKey
+
+```typescript
+type BrushOverlayClassKey = 'x' | 'y' | 'root' | 'rect';
+```
+
+### CartesianChartSeriesType
+
+```typescript
+type CartesianChartSeriesType = 'bar' | 'line' | 'scatter' | 'heatmap' | 'funnel';
+```
+
+### CategoryAxis
+
+```typescript
+type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = {
+  /**
+   * The categories to be displayed on the axis.
+   * The order of the categories is the order in which they are displayed.
+   */
+  categories?: string[];
+  /**
+   * The position of the axis.
+   * - 'left' - The axis is positioned on the left side of the chart.
+   * - 'right' - The axis is positioned on the right side of the chart.
+   * - 'top' - The axis is positioned on the top side of the chart.
+   * - 'bottom' - The axis is positioned on the bottom side of the chart.
+   * - 'none' - The axis is not displayed.
+   */
+  position?: 'left' | 'right' | 'top' | 'bottom' | 'none';
+  /**
+   * The size of the axis.
+   * - If the axis is horizontal, the size is the height of the axis.
+   * - If the axis is vertical, the size is the width of the axis.
+   * - If set to `'auto'`, the size is automatically calculated based on tick label measurements.
+   */
+  size?: number | 'auto';
+  scaleType?: 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### ChartApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartApi<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'composition' | undefined = undefined,
+  TSignatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### chartAxisZoomSliderThumbClasses
+
+```typescript
+type chartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClasses
+
+```typescript
+type ChartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartAxisZoomSliderTrackClasses
+
+```typescript
+type chartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClasses
+
+```typescript
+type ChartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartBaseButtonProps
+
+```typescript
+type ChartBaseButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+```
+
+### ChartBaseCommonProps
+
+```typescript
+type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+```
+
+### ChartBaseIconButtonProps
+
+```typescript
+type ChartBaseIconButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
+};
+```
+
+### ChartBaseIconProps
+
+```typescript
+type ChartBaseIconProps = React.DOMAttributes<SVGSVGElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+```
+
+### ChartDrawingArea
+
+```typescript
+type ChartDrawingArea = {
+  /** The gap between the left border of the SVG and the drawing area. */
+  left: number;
+  /** The gap between the top border of the SVG and the drawing area. */
+  top: number;
+  /** The gap between the bottom border of the SVG and the drawing area. */
+  bottom: number;
+  /** The gap between the right border of the SVG and the drawing area. */
+  right: number;
+  /** The width of the drawing area. */
+  width: number;
+  /** The height of the drawing area. */
+  height: number;
+};
+```
+
+### ChartImageExportOptions
+
+The options to apply on the image export.
+
+```typescript
+type ChartImageExportOptions = {
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
+   * @default 'image/png'
+   */
+  type?: string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartPrintExportOptions
+
+The options to apply on the Print export.
+
+```typescript
+type ChartPrintExportOptions = {
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartProApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartProApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### ChartsAxisClasses
+
+```typescript
+type ChartsAxisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### ChartsAxisClassKey
+
+```typescript
+type ChartsAxisClassKey =
+  | 'line'
+  | 'label'
+  | 'tick'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'root'
+  | 'tickContainer'
+  | 'tickLabel'
+  | 'directionX'
+  | 'directionY';
+```
+
+### ChartsAxisData
+
+The data format returned by onAxisClick.
+
+```typescript
+type ChartsAxisData = {
+  /** The index in the axis' data property. */
+  dataIndex: number;
+  /** Tha value associated to the axis item. */
+  axisValue: number | Date | string;
+  /** The mapping of series ids to their value for this particular axis index. */
+  seriesValues: Record<string, number | null | undefined>;
+};
+```
+
+### chartsAxisHighlightClasses
+
+```typescript
+type chartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClasses
+
+```typescript
+type ChartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClassKey
+
+```typescript
+type ChartsAxisHighlightClassKey = 'root';
+```
+
+### ChartsAxisHighlightPath
+
+```typescript
+type ChartsAxisHighlightPath = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: { axisHighlight: ChartsAxisHighlightType } },
+  Pick<
+    React.SVGProps<SVGPathElement>,
+    | 'string'
+    | 'id'
+    | 'min'
+    | 'max'
+    | 'type'
+    | 'color'
+    | 'scale'
+    | 'className'
+    | 'offset'
+    | 'end'
+    | 'height'
+    | 'x'
+    | 'style'
+    | 'width'
+    | 'ref'
+    | 'dominantBaseline'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'media'
+    | 'method'
+    | 'name'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'target'
+    | 'role'
+    | 'tabIndex'
+    | 'crossOrigin'
+    | 'accentHeight'
+    | 'accumulate'
+    | 'additive'
+    | 'alignmentBaseline'
+    | 'allowReorder'
+    | 'alphabetic'
+    | 'amplitude'
+    | 'arabicForm'
+    | 'ascent'
+    | 'attributeName'
+    | 'attributeType'
+    | 'autoReverse'
+    | 'azimuth'
+    | 'baseFrequency'
+    | 'baselineShift'
+    | 'baseProfile'
+    | 'bbox'
+    | 'begin'
+    | 'bias'
+    | 'by'
+    | 'calcMode'
+    | 'capHeight'
+    | 'clip'
+    | 'clipPath'
+    | 'clipPathUnits'
+    | 'clipRule'
+    | 'colorInterpolation'
+    | 'colorInterpolationFilters'
+    | 'colorProfile'
+    | 'colorRendering'
+    | 'contentScriptType'
+    | 'contentStyleType'
+    | 'cursor'
+    | 'cx'
+    | 'cy'
+    | 'd'
+    | 'decelerate'
+    | 'descent'
+    | 'diffuseConstant'
+    | 'direction'
+    | 'display'
+    | 'divisor'
+    | 'dur'
+    | 'dx'
+    | 'dy'
+    | 'edgeMode'
+    | 'elevation'
+    | 'enableBackground'
+    | 'exponent'
+    | 'externalResourcesRequired'
+    | 'fill'
+    | 'fillOpacity'
+    | 'fillRule'
+    | 'filter'
+    | 'filterRes'
+    | 'filterUnits'
+    | 'floodColor'
+    | 'floodOpacity'
+    | 'focusable'
+    | 'fontFamily'
+    | 'fontSize'
+    | 'fontSizeAdjust'
+    | 'fontStretch'
+    | 'fontStyle'
+    | 'fontVariant'
+    | 'fontWeight'
+    | 'format'
+    | 'fr'
+    | 'from'
+    | 'fx'
+    | 'fy'
+    | 'g1'
+    | 'g2'
+    | 'glyphName'
+    | 'glyphOrientationHorizontal'
+    | 'glyphOrientationVertical'
+    | 'glyphRef'
+    | 'gradientTransform'
+    | 'gradientUnits'
+    | 'hanging'
+    | 'horizAdvX'
+    | 'horizOriginX'
+    | 'href'
+    | 'ideographic'
+    | 'imageRendering'
+    | 'in2'
+    | 'in'
+    | 'intercept'
+    | 'k1'
+    | 'k2'
+    | 'k3'
+    | 'k4'
+    | 'k'
+    | 'kernelMatrix'
+    | 'kernelUnitLength'
+    | 'kerning'
+    | 'keyPoints'
+    | 'keySplines'
+    | 'keyTimes'
+    | 'lengthAdjust'
+    | 'letterSpacing'
+    | 'lightingColor'
+    | 'limitingConeAngle'
+    | 'local'
+    | 'markerEnd'
+    | 'markerHeight'
+    | 'markerMid'
+    | 'markerStart'
+    | 'markerUnits'
+    | 'markerWidth'
+    | 'mask'
+    | 'maskContentUnits'
+    | 'maskUnits'
+    | 'mathematical'
+    | 'mode'
+    | 'numOctaves'
+    | 'opacity'
+    | 'operator'
+    | 'order'
+    | 'orient'
+    | 'orientation'
+    | 'origin'
+    | 'overflow'
+    | 'overlinePosition'
+    | 'overlineThickness'
+    | 'paintOrder'
+    | 'panose1'
+    | 'path'
+    | 'pathLength'
+    | 'patternContentUnits'
+    | 'patternTransform'
+    | 'patternUnits'
+    | 'pointerEvents'
+    | 'points'
+    | 'pointsAtX'
+    | 'pointsAtY'
+    | 'pointsAtZ'
+    | 'preserveAlpha'
+    | 'preserveAspectRatio'
+    | 'primitiveUnits'
+    | 'r'
+    | 'radius'
+    | 'refX'
+    | 'refY'
+    | 'renderingIntent'
+    | 'repeatCount'
+    | 'repeatDur'
+    | 'requiredExtensions'
+    | 'requiredFeatures'
+    | 'restart'
+    | 'result'
+    | 'rotate'
+    | 'rx'
+    | 'ry'
+    | 'seed'
+    | 'shapeRendering'
+    | 'slope'
+    | 'spacing'
+    | 'specularConstant'
+    | 'specularExponent'
+    | 'speed'
+    | 'spreadMethod'
+    | 'startOffset'
+    | 'stdDeviation'
+    | 'stemh'
+    | 'stemv'
+    | 'stitchTiles'
+    | 'stopColor'
+    | 'stopOpacity'
+    | 'strikethroughPosition'
+    | 'strikethroughThickness'
+    | 'stroke'
+    | 'strokeDasharray'
+    | 'strokeDashoffset'
+    | 'strokeLinecap'
+    | 'strokeLinejoin'
+    | 'strokeMiterlimit'
+    | 'strokeOpacity'
+    | 'strokeWidth'
+    | 'surfaceScale'
+    | 'systemLanguage'
+    | 'tableValues'
+    | 'targetX'
+    | 'targetY'
+    | 'textAnchor'
+    | 'textDecoration'
+    | 'textLength'
+    | 'textRendering'
+    | 'to'
+    | 'transform'
+    | 'u1'
+    | 'u2'
+    | 'underlinePosition'
+    | 'underlineThickness'
+    | 'unicode'
+    | 'unicodeBidi'
+    | 'unicodeRange'
+    | 'unitsPerEm'
+    | 'vAlphabetic'
+    | 'values'
+    | 'vectorEffect'
+    | 'version'
+    | 'vertAdvY'
+    | 'vertOriginX'
+    | 'vertOriginY'
+    | 'vHanging'
+    | 'vIdeographic'
+    | 'viewBox'
+    | 'viewTarget'
+    | 'visibility'
+    | 'vMathematical'
+    | 'widths'
+    | 'wordSpacing'
+    | 'writingMode'
+    | 'x1'
+    | 'x2'
+    | 'xChannelSelector'
+    | 'xHeight'
+    | 'xlinkActuate'
+    | 'xlinkArcrole'
+    | 'xlinkHref'
+    | 'xlinkRole'
+    | 'xlinkShow'
+    | 'xlinkTitle'
+    | 'xlinkType'
+    | 'xmlBase'
+    | 'xmlLang'
+    | 'xmlns'
+    | 'xmlnsXlink'
+    | 'xmlSpace'
+    | 'y1'
+    | 'y2'
+    | 'y'
+    | 'yChannelSelector'
+    | 'z'
+    | 'zoomAndPan'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### ChartsAxisHighlightProps
+
+```typescript
+type ChartsAxisHighlightProps = { x?: ChartsAxisHighlightType; y?: ChartsAxisHighlightType };
+```
+
+### ChartsAxisHighlightType
+
+```typescript
+type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+```
+
+### ChartsAxisProps
+
+```typescript
+type ChartsAxisProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsAxisSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsAxisSlotProps;
+};
+```
+
+### ChartsAxisSlotProps
+
+```typescript
+type ChartsAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisSlots
+
+```typescript
+type ChartsAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisTooltipContentClasses
+
+```typescript
+type ChartsAxisTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsAxisTooltipContentProps
+
+```typescript
+type ChartsAxisTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### chartsAxisZoomSliderThumbClasses
+
+```typescript
+type chartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClasses
+
+```typescript
+type ChartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartsAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartsAxisZoomSliderTrackClasses
+
+```typescript
+type chartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClasses
+
+```typescript
+type ChartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartsAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartsBaseSlots
+
+```typescript
+type ChartsBaseSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### ChartsBrushOverlayProps
+
+```typescript
+type ChartsBrushOverlayProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+};
+```
+
+### ChartsClipPathProps
+
+```typescript
+type ChartsClipPathProps = {
+  /** The id of the clip path. */
+  id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
+  offset?: { top?: number; right?: number; bottom?: number; left?: number };
+};
+```
+
+### ChartsColor
+
+```typescript
+type ChartsColor = string | ChartsColorCallback;
+```
+
+### ChartsColorPalette
+
+```typescript
+type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+```
+
+### ChartsContainerProProps
+
+```typescript
+type ChartsContainerProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsContainerProSlotProps
+
+```typescript
+type ChartsContainerProSlotProps = {};
+```
+
+### ChartsContainerProSlots
+
+```typescript
+type ChartsContainerProSlots = {};
+```
+
+### ChartsDataProviderProProps
+
+```typescript
+type ChartsDataProviderProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  };
+```
+
+### ChartsDataProviderProps
+
+```typescript
+type ChartsDataProviderProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartClosestPointSignature,
+    UseChartKeyboardNavigationSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  };
+```
+
+### ChartsDataProviderProSlotProps
+
+```typescript
+type ChartsDataProviderProSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderProSlots
+
+```typescript
+type ChartsDataProviderProSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ChartsDataProviderSlotProps
+
+```typescript
+type ChartsDataProviderSlotProps = {
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ChartsDataProviderSlots
+
+```typescript
+type ChartsDataProviderSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### chartsGridClasses
+
+```typescript
+type chartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClasses
+
+```typescript
+type ChartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClassKey
+
+```typescript
+type ChartsGridClassKey = 'line' | 'root' | 'horizontalLine' | 'verticalLine';
+```
+
+### ChartsGridProps
+
+```typescript
+type ChartsGridProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Displays vertical grid. */
+  vertical?: boolean;
+  /** Displays horizontal grid. */
+  horizontal?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsGridClasses>;
+};
+```
+
+### ChartsIconSlots
+
+```typescript
+type ChartsIconSlots = {};
+```
+
+### ChartsItemTooltipContentClasses
+
+```typescript
+type ChartsItemTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsItemTooltipContentProps
+
+```typescript
+type ChartsItemTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabel
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabel = unknown;
+```
+
+### ChartsLabelClasses
+
+```typescript
+type ChartsLabelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsLabelCustomMarkProps
+
+```typescript
+type ChartsLabelCustomMarkProps = {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+};
+```
+
+### ChartsLabelGradientClasses
+
+```typescript
+type ChartsLabelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### ChartsLabelMark
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabelMark = unknown;
+```
+
+### ChartsLabelMarkClasses
+
+```typescript
+type ChartsLabelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### ChartsLabelMarkProps
+
+```typescript
+type ChartsLabelMarkProps = {
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type?: ChartsLabelMarkType;
+  /**
+   * The mark will be rendered as a combination of a line and the specified mark type.
+   * The line will be rendered first, followed by the mark.
+   * Only used if `type='line+mark'`.
+   */
+  markShape?: MarkShape;
+  /** The color of the mark. */
+  color?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelMarkClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabelProps
+
+```typescript
+type ChartsLabelProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLegendClasses
+
+```typescript
+type ChartsLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### ChartsLegendPosition
+
+```typescript
+type ChartsLegendPosition = {
+  /**
+   * The position of the legend in relation to the chart.
+   * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+   * If customization is needed, simply use the composition pattern.
+   */
+  position?: Position;
+};
+```
+
+### ChartsLegendProps
+
+```typescript
+type ChartsLegendProps = {
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: SeriesLegendItemContext,
+    index: number,
+  ) => void;
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction?: Direction;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLegendClasses>;
+  /**
+   * If `true`, clicking on a legend item will toggle the visibility of the corresponding series.
+   * @default false
+   */
+  toggleVisibilityOnClick?: boolean;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+};
+```
+
+### ChartsLegendSlotExtension
+
+```typescript
+type ChartsLegendSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsLegendSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsLegendSlotProps;
+};
+```
+
+### ChartsLegendSlotProps
+
+```typescript
+type ChartsLegendSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+};
+```
+
+### ChartsLegendSlots
+
+```typescript
+type ChartsLegendSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+};
+```
+
+### ChartsLocalizationProviderProps
+
+```typescript
+type ChartsLocalizationProviderProps = {
+  children?: React.ReactNode;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+};
+```
+
+### ChartsOverlayProps
+
+```typescript
+type ChartsOverlayProps = {
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsOverlaySlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsOverlaySlotProps;
+};
+```
+
+### ChartsOverlaySlotProps
+
+```typescript
+type ChartsOverlaySlotProps = {
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+};
+```
+
+### ChartsOverlaySlots
+
+```typescript
+type ChartsOverlaySlots = {
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsPieSorting
+
+```typescript
+type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
+```
+
+### ChartsReferenceLineClasses
+
+```typescript
+type ChartsReferenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### ChartsReferenceLineClassKey
+
+```typescript
+type ChartsReferenceLineClassKey = 'line' | 'label' | 'root' | 'horizontal' | 'vertical';
+```
+
+### ChartsReferenceLineProps
+
+```typescript
+type ChartsReferenceLineProps = (
+  | { x?: undefined; y: string | number | Date }
+  | { y?: undefined; x: string | number | Date }
+) & {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+};
+```
+
+### chartsSurfaceClasses
+
+```typescript
+type chartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceClasses
+
+```typescript
+type ChartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceProps
+
+```typescript
+type ChartsSurfaceProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+};
+```
+
+### ChartsTextProps
+
+```typescript
+type ChartsTextProps = {
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /** Text displayed. */
+  text: string;
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### ChartsTextStyle
+
+```typescript
+type ChartsTextStyle = {
+  angle?: number;
+  /**
+   * The text baseline
+   * @default 'central'
+   */
+  dominantBaseline?: ChartsTextBaseline;
+  /**
+   * The text anchor
+   * @default 'middle'
+   */
+  textAnchor?: ChartsTextAnchor;
+};
+```
+
+### ChartsToolbarImageExportOptions
+
+```typescript
+type ChartsToolbarImageExportOptions = {
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
+   * @default 'image/png'
+   */
+  type: string;
+};
+```
+
+### ChartsToolbarImageExportTriggerProps
+
+```typescript
+type ChartsToolbarImageExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartsToolbarImageExportOptions;
+};
+```
+
+### ChartsToolbarPrintExportOptions
+
+```typescript
+type ChartsToolbarPrintExportOptions = {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartsToolbarPrintExportTriggerProps
+
+```typescript
+type ChartsToolbarPrintExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartPrintExportOptions;
+};
+```
+
+### ChartsToolbarProProps
+
+```typescript
+type ChartsToolbarProProps = {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+};
+```
+
+### ChartsToolbarProSlotProps
+
+```typescript
+type ChartsToolbarProSlotProps = {
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+};
+```
+
+### ChartsToolbarProSlots
+
+```typescript
+type ChartsToolbarProSlots = {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipCell
+
+```typescript
+type ChartsTooltipCell = StyledComponent<
+  Pick<
+    TypographyOwnProps &
+      CommonProps &
+      Omit<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+        | 'color'
+        | 'className'
+        | 'classes'
+        | 'sx'
+        | 'style'
+        | 'children'
+        | 'variant'
+        | 'align'
+        | 'gutterBottom'
+        | 'noWrap'
+        | 'variantMapping'
+      >,
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'classes'
+    | 'sx'
+    | 'style'
+    | 'ref'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'variant'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'gutterBottom'
+    | 'noWrap'
+    | 'variantMapping'
+  > &
+    MUIStyledCommonProps<Theme> & { component?: React.ElementType },
+  {},
+  {}
+>;
+```
+
+### chartsTooltipClasses
+
+```typescript
+type chartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClasses
+
+```typescript
+type ChartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClassKey
+
+```typescript
+type ChartsTooltipClassKey = 'root' | 'paper' | 'table' | 'row' | 'cell' | 'mark' | 'axisValueCell';
+```
+
+### ChartsTooltipContainerClasses
+
+```typescript
+type ChartsTooltipContainerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipContainerProps
+
+```typescript
+type ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  children?: React.ReactNode;
+};
+```
+
+### ChartsTooltipContainerSlotProps
+
+```typescript
+type ChartsTooltipContainerSlotProps = {};
+```
+
+### ChartsTooltipContainerSlots
+
+```typescript
+type ChartsTooltipContainerSlots = {};
+```
+
+### ChartsTooltipPaper
+
+```typescript
+type ChartsTooltipPaper = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipProps
+
+```typescript
+type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'axis' | 'none' | 'item';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### ChartsTooltipRow
+
+```typescript
+type ChartsTooltipRow = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipSlotProps
+
+```typescript
+type ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<ChartsTooltipProps<T>>;
+};
+```
+
+### ChartsTooltipSlots
+
+```typescript
+type ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    ChartsTooltipProps<T>,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipTable
+
+```typescript
+type ChartsTooltipTable = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'width'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'border'
+    | 'bgcolor'
+    | 'hidden'
+    | 'title'
+    | 'summary'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'frame'
+    | 'rules'
+  >,
+  {}
+>;
+```
+
+### ChartsTypeFeatureFlags
+
+```typescript
+type ChartsTypeFeatureFlags = {};
+```
+
+### ChartsWrapperOwnerState
+
+```typescript
+type ChartsWrapperOwnerState = {
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection?: Direction;
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition?: Position;
+};
+```
+
+### ChartsWrapperProps
+
+```typescript
+type ChartsWrapperProps = {
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition?: Position;
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection?: Direction;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically?: boolean;
+  children: React.ReactNode;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsXAxisProps
+
+```typescript
+type ChartsXAxisProps = {
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsXAxisSlotProps
+
+```typescript
+type ChartsXAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsXAxisSlots
+
+```typescript
+type ChartsXAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsXReferenceLineProps
+
+```typescript
+type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: TValue;
+};
+```
+
+### ChartsYAxisProps
+
+```typescript
+type ChartsYAxisProps = {
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsYAxisSlotProps
+
+```typescript
+type ChartsYAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsYAxisSlots
+
+```typescript
+type ChartsYAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsYReferenceLineProps
+
+```typescript
+type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: TValue;
+};
+```
+
+### cheerfulFiestaPaletteDark
+
+```typescript
+type cheerfulFiestaPaletteDark = string[];
+```
+
+### cheerfulFiestaPaletteLight
+
+```typescript
+type cheerfulFiestaPaletteLight = string[];
+```
+
+### ColorLegendSelector
+
+```typescript
+type ColorLegendSelector = {
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### ComputedPieRadius
+
+Props received when the parent components has done the percentage conversion.
+
+```typescript
+type ComputedPieRadius = {
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### continuousColorLegendClasses
+
+```typescript
+type continuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendClasses
+
+```typescript
+type ContinuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendProps
+
+```typescript
+type ContinuousColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness?: number;
+};
+```
+
+### ContinuousScaleName
+
+```typescript
+type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
+```
+
+### CurveType
+
+The type of curve to use for the line.
+Read more about curves at
+[line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+
+```typescript
+type CurveType =
+  | 'catmullRom'
+  | 'linear'
+  | 'monotoneX'
+  | 'monotoneY'
+  | 'natural'
+  | 'step'
+  | 'stepBefore'
+  | 'stepAfter'
+  | 'bumpY'
+  | 'bumpX';
+```
+
+### cyanPaletteDark
+
+```typescript
+type cyanPaletteDark = string[];
+```
+
+### cyanPaletteLight
+
+```typescript
+type cyanPaletteLight = string[];
+```
+
+### DEFAULT_AXIS_SIZE_HEIGHT
+
+```typescript
+type DEFAULT_AXIS_SIZE_HEIGHT = 25;
+```
+
+### DEFAULT_AXIS_SIZE_WIDTH
+
+```typescript
+type DEFAULT_AXIS_SIZE_WIDTH = 45;
+```
+
+### DEFAULT_MARGINS
+
+```typescript
+type DEFAULT_MARGINS = { top: number; bottom: number; left: number; right: number };
+```
+
+### DEFAULT_RADIUS_AXIS_KEY
+
+```typescript
+type DEFAULT_RADIUS_AXIS_KEY = 'DEFAULT_RADIUS_AXIS_KEY';
+```
+
+### DEFAULT_ROTATION_AXIS_KEY
+
+```typescript
+type DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
+```
+
+### DEFAULT_X_AXIS_KEY
+
+```typescript
+type DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
+```
+
+### DEFAULT_Y_AXIS_KEY
+
+```typescript
+type DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+```
+
+### DefaultizedBarSeriesType
+
+```typescript
+type DefaultizedBarSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+};
+```
+
+### DefaultizedFunnelSeriesType
+
+```typescript
+type DefaultizedFunnelSeriesType = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### DefaultizedHeatmapSeriesType
+
+```typescript
+type DefaultizedHeatmapSeriesType = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### DefaultizedLineSeriesType
+
+```typescript
+type DefaultizedLineSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedPieSeriesType
+
+```typescript
+type DefaultizedPieSeriesType = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### DefaultizedPieValueType
+
+```typescript
+type DefaultizedPieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  color: string;
+  formattedValue: string;
+  hidden: boolean;
+};
+```
+
+### DefaultizedRadarSeriesType
+
+```typescript
+type DefaultizedRadarSeriesType = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### DefaultizedScatterSeriesType
+
+```typescript
+type DefaultizedScatterSeriesType = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### DefaultizedSeriesType
+
+```typescript
+type DefaultizedSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: CommonHighlightScope | SankeyHighlightScope;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | number[]
+    | DefaultizedPieValueType[]
+    | MakeRequired<FunnelValueType, 'id' | 'color'>[]
+    | SankeyLayout<false>;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null)
+    | SeriesValueFormatter<PieValueType>;
+};
+```
+
+### defaultSeriesConfigPro
+
+```typescript
+type defaultSeriesConfigPro = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+};
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### FadeOptions
+
+```typescript
+type FadeOptions = 'none' | 'series' | 'global';
+```
+
+### FocusedItemIdentifier
+
+```typescript
+type FocusedItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### FUNNEL_CHART_PLUGINS
+
+```typescript
+type FUNNEL_CHART_PLUGINS = [
+  ChartPlugin<UseChartFunnelAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'funnel'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'funnel'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'funnel'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### FunnelChartPluginSignatures
+
+```typescript
+type FunnelChartPluginSignatures = FunnelChartPluginSignatures;
+```
+
+### FunnelChartProps
+
+````typescript
+type FunnelChartProps = {
+  /**
+   * The series to display in the funnel chart.
+   * An array of [[FunnelSeries]] objects.
+   */
+  series: FunnelSeries[];
+  /**
+   * The configuration of the category axis.
+   * @default { position: 'none' }
+   */
+  categoryAxis?: CategoryAxis;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: FunnelItemIdentifier | Omit<FunnelItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: FunnelItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { funnel: ChartSeriesTypeConfig<'funnel'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all funnel elements at the current position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'funnel';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'funnel';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+````
+
+### FunnelChartSlotExtension
+
+```typescript
+type FunnelChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+```
+
+### FunnelChartSlotProps
+
+```typescript
+type FunnelChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### FunnelChartSlots
+
+```typescript
+type FunnelChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### funnelClasses
+
+```typescript
+type funnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClasses
+
+```typescript
+type FunnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClassKey
+
+```typescript
+type FunnelClassKey = 'root' | 'section' | 'sectionLabel' | 'sectionFilled' | 'sectionOutlined';
+```
+
+### FunnelCurveType
+
+```typescript
+type FunnelCurveType = 'linear' | 'linear-sharp' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+```
+
+### FunnelDataPoints
+
+```typescript
+type FunnelDataPoints = Record<'x' | 'y', number> & { useBandWidth: boolean; stackOffset: number };
+```
+
+### FunnelItem
+
+```typescript
+type FunnelItem = {
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number;
+};
+```
+
+### FunnelItemId
+
+```typescript
+type FunnelItemId = string | number;
+```
+
+### FunnelItemIdentifier
+
+An object that allows to identify a funnel item.
+Used for item interaction
+
+```typescript
+type FunnelItemIdentifier = {
+  type: 'funnel';
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+};
+```
+
+### FunnelLabelOptions
+
+```typescript
+type FunnelLabelOptions = {
+  /**
+   * The position of the label.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  position?: Position;
+  /**
+   * The text anchor of the label. Affects the horizontal alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  textAnchor?: 'start' | 'middle' | 'end';
+  /**
+   * The dominant baseline of the label. Affects the vertical alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  dominantBaseline?:
+    | 'auto'
+    | 'baseline'
+    | 'hanging'
+    | 'middle'
+    | 'central'
+    | 'text-after-edge'
+    | 'text-before-edge';
+  /**
+   * The offset of the label from the anchor point.
+   * If a single number is provided, the offset will be applied in both directions.
+   * @default 0
+   */
+  offset?: number | { x?: number; y?: number };
+};
+```
+
+### FunnelPlotProps
+
+```typescript
+type FunnelPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotExtension
+
+```typescript
+type FunnelPlotSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotProps
+
+```typescript
+type FunnelPlotSlotProps = {
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+};
+```
+
+### FunnelPlotSlots
+
+```typescript
+type FunnelPlotSlots = {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### FunnelScaleName
+
+```typescript
+type FunnelScaleName = Exclude<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  'point'
+>;
+```
+
+### FunnelSection
+
+```typescript
+type FunnelSection = unknown;
+```
+
+### FunnelSectionLabel
+
+```typescript
+type FunnelSectionLabel = unknown;
+```
+
+### FunnelSeries
+
+```typescript
+type FunnelSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  type?: 'funnel';
+};
+```
+
+### FunnelSeriesType
+
+```typescript
+type FunnelSeriesType = {
+  type: 'funnel';
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### FunnelValueType
+
+```typescript
+type FunnelValueType = {
+  /** A unique identifier of the funnel section. */
+  id?: FunnelItemId;
+  /** The value of the funnel section. */
+  value: number;
+  /** The label to display on the tooltip, funnel section, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
+  /** The color of the funnel section */
+  color?: string;
+  /**
+   * Defines the mark type for the funnel item.
+   * @default 'square'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### gaugeClasses
+
+```typescript
+type gaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClasses
+
+```typescript
+type GaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClassKey
+
+```typescript
+type GaugeClassKey = 'root' | 'valueArc' | 'referenceArc' | 'valueText';
+```
+
+### GaugeContainerProps
+
+```typescript
+type GaugeContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+};
+```
+
+### GaugeFormatterParams
+
+```typescript
+type GaugeFormatterParams = { value: number | null; valueMin: number; valueMax: number };
+```
+
+### GaugeProps
+
+```typescript
+type GaugeProps = {
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+};
+```
+
+### GaugeValueTextProps
+
+```typescript
+type GaugeValueTextProps = {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### greenPaletteDark
+
+```typescript
+type greenPaletteDark = string[];
+```
+
+### greenPaletteLight
+
+```typescript
+type greenPaletteLight = string[];
+```
+
+### HEATMAP_PLUGINS
+
+```typescript
+type HEATMAP_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'heatmap'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'heatmap'>>,
+  ChartPlugin<UseChartHighlightSignature<'heatmap'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartItemClickSignature<'heatmap'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### HeatmapCellOwnerState
+
+```typescript
+type HeatmapCellOwnerState = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+  value: number;
+};
+```
+
+### HeatmapCellProps
+
+```typescript
+type HeatmapCellProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapCellOwnerState;
+};
+```
+
+### heatmapClasses
+
+```typescript
+type heatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClasses
+
+```typescript
+type HeatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClassKey
+
+```typescript
+type HeatmapClassKey = 'root' | 'series' | 'highlighted' | 'faded' | 'cell';
+```
+
+### HeatmapItemIdentifier
+
+An object that allows to identify a single cell.
+Used for item interaction
+
+```typescript
+type HeatmapItemIdentifier = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+};
+```
+
+### HeatmapItemIdentifierWithData
+
+The cell identifier with the associated data value.
+
+```typescript
+type HeatmapItemIdentifierWithData = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+  /** The value of the cell. Null if there is no data associated. */
+  value: number | null;
+};
+```
+
+### HeatmapPlotProps
+
+```typescript
+type HeatmapPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapPlotSlotProps;
+};
+```
+
+### HeatmapPlotSlotProps
+
+```typescript
+type HeatmapPlotSlotProps = { cell?: Partial<HeatmapCellProps> };
+```
+
+### HeatmapPlotSlots
+
+```typescript
+type HeatmapPlotSlots = {
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+};
+```
+
+### HeatmapPluginSignatures
+
+```typescript
+type HeatmapPluginSignatures = HeatmapPluginSignatures;
+```
+
+### HeatmapProps
+
+```typescript
+type HeatmapProps = {
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapSeries
+
+```typescript
+type HeatmapSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  type?: 'heatmap';
+};
+```
+
+### HeatmapSeriesType
+
+```typescript
+type HeatmapSeriesType = {
+  type: 'heatmap';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The id of this series. */
+  id?: SeriesId;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### HeatmapSlotProps
+
+```typescript
+type HeatmapSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapSlots
+
+```typescript
+type HeatmapSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### HeatmapTooltipClasses
+
+```typescript
+type HeatmapTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentClasses
+
+```typescript
+type HeatmapTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentProps
+
+```typescript
+type HeatmapTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+};
+```
+
+### HeatmapTooltipProps
+
+```typescript
+type HeatmapTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer';
+};
+```
+
+### HeatmapTooltipSlotProps
+
+```typescript
+type HeatmapTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<HeatmapTooltipProps>;
+};
+```
+
+### HeatmapTooltipSlots
+
+```typescript
+type HeatmapTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### HeatmapValueType
+
+```typescript
+type HeatmapValueType = HeatmapValueType;
+```
+
+### HighlightItemIdentifier
+
+Identifies an highlighted item or series.
+
+```typescript
+type HighlightItemIdentifier<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightItemIdentifierWithType
+
+```typescript
+type HighlightItemIdentifierWithType<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightOptions
+
+```typescript
+type HighlightOptions = 'none' | 'item' | 'series';
+```
+
+### HighlightScope
+
+```typescript
+type HighlightScope = CommonHighlightScope | SankeyHighlightScope;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
+
+### ItemTooltip
+
+```typescript
+type ItemTooltip<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### labelClasses
+
+```typescript
+type labelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### labelGradientClasses
+
+```typescript
+type labelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### labelMarkClasses
+
+```typescript
+type labelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### legendClasses
+
+```typescript
+type legendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### LegendItemContext
+
+```typescript
+type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+```
+
+### LegendItemParams
+
+```typescript
+type LegendItemParams = {
+  /** The type of the series */
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  markType: ChartsLabelMarkType | undefined;
+  /** The identifier of the series */
+  seriesId?: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The minimum value of the category */
+  minValue?: number | Date | null;
+  /** The maximum value of the category */
+  maxValue?: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LINE_CHART_PRO_PLUGINS
+
+```typescript
+type LINE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProPluginSignatures
+
+```typescript
+type LineChartProPluginSignatures = LineChartProPluginSignatures;
+```
+
+### LineChartProProps
+
+````typescript
+type LineChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'line'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+    ChartPlugin<UseChartHighlightSignature<'line'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartProSlotProps
+
+```typescript
+type LineChartProSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### LineChartProSlots
+
+```typescript
+type LineChartProSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'line'
+  | 'area'
+  | 'mark'
+  | 'highlight'
+  | 'markAnimate'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LineItemIdentifier
+
+An object that allows to identify a single line.
+Used for item interaction
+
+```typescript
+type LineItemIdentifier = {
+  type: 'line';
+  seriesId: string;
+  /** `dataIndex` can be `undefined` if the mouse is over the area and not a specific item. */
+  dataIndex?: number;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### LineSeriesType
+
+```typescript
+type LineSeriesType = {
+  type: 'line';
+  /** Data associated to the line. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### mangoFusionPaletteDark
+
+```typescript
+type mangoFusionPaletteDark = string[];
+```
+
+### mangoFusionPaletteLight
+
+```typescript
+type mangoFusionPaletteLight = string[];
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  seriesId: string;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
+
+### NumberValue
+
+```typescript
+type NumberValue = NumberValue;
+```
+
+### orangePaletteDark
+
+```typescript
+type orangePaletteDark = string[];
+```
+
+### orangePaletteLight
+
+```typescript
+type orangePaletteLight = string[];
+```
+
+### OrdinalTimeTicks
+
+```typescript
+type OrdinalTimeTicks = (TickFrequencyDefinition | TickFrequency)[];
+```
+
+### PIE_CHART_PLUGINS
+
+```typescript
+type PIE_CHART_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### PIE_CHART_PRO_PLUGINS
+
+```typescript
+type PIE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### PieArcLabelPlotProps
+
+```typescript
+type PieArcLabelPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcLabelPlotSlotProps
+
+```typescript
+type PieArcLabelPlotSlotProps = { pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PieArcLabelPlotSlots
+
+```typescript
+type PieArcLabelPlotSlots = { pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps> };
+```
+
+### PieArcLabelProps
+
+```typescript
+type PieArcLabelProps = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  classes?: Partial<PieClasses>;
+  startAngle: number;
+  endAngle: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+  hidden?: boolean;
+};
+```
+
+### PieArcOwnerState
+
+```typescript
+type PieArcOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+};
+```
+
+### PieArcPlotProps
+
+```typescript
+type PieArcPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcPlotSlotProps
+
+```typescript
+type PieArcPlotSlotProps = { pieArc?: Partial<PieArcProps> };
+```
+
+### PieArcPlotSlots
+
+```typescript
+type PieArcPlotSlots = { pieArc?: React.JSXElementConstructor<PieArcProps> };
+```
+
+### PieArcProps
+
+```typescript
+type PieArcProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** If `true`, the animation is disabled. */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
+};
+```
+
+### piecewiseColorLegendClasses
+
+```typescript
+type piecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendClasses
+
+```typescript
+type PiecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendItemContext
+
+```typescript
+type PiecewiseColorLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'piecewiseColor';
+  /** The minimum value of the category */
+  minValue: number | Date | null;
+  /** The maximum value of the category */
+  maxValue: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendProps
+
+```typescript
+type PiecewiseColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @returns The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the color marks.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: PiecewiseColorLegendItemContext,
+    index: number,
+  ) => void;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### PiecewiseLabelFormatterParams
+
+```typescript
+type PiecewiseLabelFormatterParams = {
+  /** The index of the entry. */
+  index: number;
+  /** The length of the entries array. */
+  length: number;
+  /** The min value of the piece. `null` is infinite. */
+  min: number | Date | null;
+  /** The max value of the piece. `null` is infinite. */
+  max: number | Date | null;
+  /** The formatted min value of the piece. `null` is infinite. */
+  formattedMin: string | null;
+  /** The formatted max value of the piece. `null` is infinite. */
+  formattedMax: string | null;
+};
+```
+
+### PieChartPluginSignatures
+
+```typescript
+type PieChartPluginSignatures = PieChartPluginSignatures;
+```
+
+### PieChartProPluginSignatures
+
+```typescript
+type PieChartProPluginSignatures = PieChartProPluginSignatures;
+```
+
+### PieChartProProps
+
+````typescript
+type PieChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+};
+````
+
+### PieChartProps
+
+````typescript
+type PieChartProps = {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### PieChartProSlotProps
+
+```typescript
+type PieChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### PieChartProSlots
+
+```typescript
+type PieChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### PieChartSlotProps
+
+```typescript
+type PieChartSlotProps = {
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### PieChartSlots
+
+```typescript
+type PieChartSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### pieClasses
+
+```typescript
+type pieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClasses
+
+```typescript
+type PieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClassKey
+
+```typescript
+type PieClassKey =
+  | 'root'
+  | 'arc'
+  | 'series'
+  | 'arcLabel'
+  | 'animate'
+  | 'seriesLabels'
+  | 'focusIndicator';
+```
+
+### PieItemId
+
+```typescript
+type PieItemId = string | number;
+```
+
+### PieItemIdentifier
+
+An object that allows to identify a single pie slice.
+Used for item interaction
+
+```typescript
+type PieItemIdentifier = { type: 'pie'; seriesId: string; dataIndex: number };
+```
+
+### PiePlotProps
+
+```typescript
+type PiePlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+};
+```
+
+### PiePlotSlotProps
+
+```typescript
+type PiePlotSlotProps = { pieArc?: Partial<PieArcProps>; pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PiePlotSlots
+
+```typescript
+type PiePlotSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+};
+```
+
+### PieSeries
+
+```typescript
+type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
+```
+
+### PieSeriesLayout
+
+Layout information computed from the pie series and the drawing area.
+
+```typescript
+type PieSeriesLayout = {
+  /** The pie center coordinate in px. */
+  center: { x: number; y: number };
+  /**
+   * The pie radius in px.
+   * Computed based on the drawing area and the center placement.
+   */
+  radius: {
+    /**
+     * The maximum available radius in px.
+     * Correspond to radius='100%'.
+     */
+    available: number;
+    /** The pie inner radius in px, except if overridden by item state (highlight/faded). */
+    inner: number;
+    /** The pie outer radius in px, except if overridden by item state (highlight/faded). */
+    outer: number;
+    /** The pie label radius in px, except if overridden by item state (highlight/faded). */
+    label: number;
+  };
+};
+```
+
+### PieSeriesType
+
+```typescript
+type PieSeriesType<TData = PieValueType> = {
+  type: 'pie';
+  data: TData[];
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<TData>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<SeriesType>;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<TData>) => string;
+};
+```
+
+### PieValueType
+
+```typescript
+type PieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### pinkPaletteDark
+
+```typescript
+type pinkPaletteDark = string[];
+```
+
+### pinkPaletteLight
+
+```typescript
+type pinkPaletteLight = string[];
+```
+
+### Position
+
+```typescript
+type Position = {
+  /** The vertical position. */
+  vertical?: 'top' | 'middle' | 'bottom';
+  /** The horizontal position. */
+  horizontal?: 'start' | 'center' | 'end';
+};
+```
+
+### PropsFromSlot
+
+```typescript
+type PropsFromSlot =
+  | P
+  | React.ComponentProps<
+      NonNullable<React.JSXElementConstructor<any> | React.ElementType | null | undefined>
+    >;
+```
+
+### purplePaletteDark
+
+```typescript
+type purplePaletteDark = string[];
+```
+
+### purplePaletteLight
+
+```typescript
+type purplePaletteLight = string[];
+```
+
+### RADAR_CHART_PRO_PLUGINS
+
+```typescript
+type RADAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'radar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature>,
+  ChartPlugin<UseChartHighlightSignature<'radar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### RADAR_PLUGINS
+
+```typescript
+type RADAR_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<any>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature<any>>,
+  ChartPlugin<UseChartHighlightSignature<any>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<any>>,
+];
+```
+
+### RadarAxisHighlightProps
+
+```typescript
+type RadarAxisHighlightProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<
+    Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>
+  >;
+};
+```
+
+### RadarAxisProps
+
+```typescript
+type RadarAxisProps = {
+  /**
+   * Defines how label align with the axis.
+   * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
+   * - 'rotated': labels are rotated 90deg relatively to their axis.
+   * @default 'horizontal'
+   */
+  labelOrientation?: 'horizontal' | 'rotated';
+  /** The labels text anchor or a function returning the text anchor for a given axis angle (in degree). */
+  textAnchor?:
+    | 'start'
+    | 'middle'
+    | 'end'
+    | 'inherit'
+    | ((angle: number) => 'start' | 'end' | 'middle' | 'inherit' | undefined);
+  /** The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree). */
+  dominantBaseline?:
+    | 'auto'
+    | 'use-script'
+    | 'no-change'
+    | 'reset-size'
+    | 'ideographic'
+    | 'alphabetic'
+    | 'hanging'
+    | 'mathematical'
+    | 'central'
+    | 'middle'
+    | 'text-after-edge'
+    | 'text-before-edge'
+    | 'inherit'
+    | ((
+        angle: number,
+      ) =>
+        | 'auto'
+        | 'middle'
+        | 'alphabetic'
+        | 'hanging'
+        | 'ideographic'
+        | 'mathematical'
+        | 'central'
+        | 'text-after-edge'
+        | 'text-before-edge'
+        | 'inherit'
+        | 'use-script'
+        | 'no-change'
+        | 'reset-size'
+        | undefined);
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<Pick<RadarClasses, 'axisLine' | 'axisLabel' | 'axisRoot'>>;
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### RadarChartPluginSignatures
+
+```typescript
+type RadarChartPluginSignatures = RadarChartPluginSignatures;
+```
+
+### RadarChartProPluginSignatures
+
+```typescript
+type RadarChartProPluginSignatures = RadarChartProPluginSignatures;
+```
+
+### RadarChartProProps
+
+````typescript
+type RadarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'radar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartPolarAxisSignature>,
+    ChartPlugin<UseChartHighlightSignature<'radar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+};
+````
+
+### RadarChartProps
+
+````typescript
+type RadarChartProps = {
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+};
+````
+
+### RadarChartProSlotProps
+
+```typescript
+type RadarChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### RadarChartProSlots
+
+```typescript
+type RadarChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### RadarChartSlotProps
+
+```typescript
+type RadarChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### RadarChartSlots
+
+```typescript
+type RadarChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### radarClasses
+
+```typescript
+type radarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClasses
+
+```typescript
+type RadarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClassKey
+
+```typescript
+type RadarClassKey =
+  | 'axisLine'
+  | 'axisLabel'
+  | 'axisRoot'
+  | 'gridRadial'
+  | 'gridDivider'
+  | 'gridStripe'
+  | 'seriesRoot'
+  | 'seriesArea'
+  | 'seriesMark'
+  | 'axisHighlightRoot'
+  | 'axisHighlightLine'
+  | 'axisHighlightDot';
+```
+
+### RadarDataProviderProps
+
+```typescript
+type RadarDataProviderProps<
+  TSignatures extends ChartAnyPluginSignature[] = RadarChartPluginSignatures,
+> = {
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [] | [ChartPlugin<ChartAnyPluginSignature>];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** Slots to customize charts' components. */
+  slots?: Partial<ChartsDataProviderSlots>;
+  /** The props for the slots. */
+  slotProps?: Partial<ChartsDataProviderSlotProps>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?:
+    | string
+    | number
+    | bigint
+    | boolean
+    | ReactElement
+    | Iterable<React.ReactNode, any, any>
+    | React.ReactPortal
+    | Promise<AwaitedReactNode>
+    | null;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: number | Partial<ChartMargin>;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: {};
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+};
+```
+
+### RadarGridProps
+
+```typescript
+type RadarGridProps = {
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+};
+```
+
+### RadarItemIdentifier
+
+An object that allows to identify either a radar series or a radar point (if dataIndex is defined).
+Used for item interaction
+
+```typescript
+type RadarItemIdentifier = { type: 'radar'; seriesId: string; dataIndex?: number };
+```
+
+### RadarSeries
+
+```typescript
+type RadarSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  type?: 'radar';
+};
+```
+
+### RadarSeriesAreaProps
+
+```typescript
+type RadarSeriesAreaProps = {
+  /** Callback fired when an area is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesMarksProps
+
+```typescript
+type RadarSeriesMarksProps = {
+  /** Callback fired when a mark is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesPlotProps
+
+```typescript
+type RadarSeriesPlotProps = {
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesType
+
+```typescript
+type RadarSeriesType = {
+  type: 'radar';
+  data: number[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+};
+```
+
+### RadiusAxis
+
+```typescript
+type RadiusAxis<S extends 'linear' = 'linear', V = any> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * The minimal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  min?: number;
+  /**
+   * The maximal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  max?: number;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The minimal radius. */
+  minRadius?: number;
+  /** The maximal radius. */
+  maxRadius?: number;
+  colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### rainbowSurgePaletteDark
+
+```typescript
+type rainbowSurgePaletteDark = string[];
+```
+
+### rainbowSurgePaletteLight
+
+```typescript
+type rainbowSurgePaletteLight = string[];
+```
+
+### redPaletteDark
+
+```typescript
+type redPaletteDark = string[];
+```
+
+### redPaletteLight
+
+```typescript
+type redPaletteLight = string[];
+```
+
+### referenceLineClasses
+
+```typescript
+type referenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### RotationAxis
+
+```typescript
+type RotationAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The start angle (in deg). */
+  startAngle?: number;
+  /** The end angle (in deg). */
+  endAngle?: number;
+  /** The gap between the axis and the label. */
+  labelGap?: number;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'node'
+  | 'link'
+  | 'root'
+  | 'nodes'
+  | 'links'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### ScaleName
+
+```typescript
+type ScaleName = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### SCATTER_CHART_PLUGINS
+
+```typescript
+type SCATTER_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### SCATTER_CHART_PRO_PLUGINS
+
+```typescript
+type SCATTER_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### ScatterChartPluginSignatures
+
+```typescript
+type ScatterChartPluginSignatures = ScatterChartPluginSignatures;
+```
+
+### ScatterChartProPluginSignatures
+
+```typescript
+type ScatterChartProPluginSignatures = ScatterChartProPluginSignatures;
+```
+
+### ScatterChartProProps
+
+````typescript
+type ScatterChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+    ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+    ChartPlugin<UseChartClosestPointSignature>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### ScatterChartProps
+
+````typescript
+type ScatterChartProps = {
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartSlotProps;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+};
+````
+
+### ScatterChartProSlotProps
+
+```typescript
+type ScatterChartProSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ScatterChartProSlots
+
+```typescript
+type ScatterChartProSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ScatterChartSlotProps
+
+```typescript
+type ScatterChartSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ScatterChartSlots
+
+```typescript
+type ScatterChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### scatterClasses
+
+```typescript
+type scatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClasses
+
+```typescript
+type ScatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClassKey
+
+```typescript
+type ScatterClassKey = 'marker' | 'root' | 'series' | 'focusedMark';
+```
+
+### ScatterItemIdentifier
+
+An object that allows to identify a single scatter item.
+Used for item interaction
+
+```typescript
+type ScatterItemIdentifier = { type: 'scatter'; seriesId: string; dataIndex: number };
+```
+
+### ScatterMarkerProps
+
+```typescript
+type ScatterMarkerProps = {
+  /** The series ID. */
+  seriesId: string;
+  /** The index of the data point. */
+  dataIndex: number;
+  /** The x coordinate of the data point. */
+  x: number;
+  /** The y coordinate of the data point. */
+  y: number;
+  /** The fill color of the marker. */
+  color: string;
+  /** The size of the marker. */
+  size: number;
+  /** If `true`, the marker is highlighted. */
+  isHighlighted: boolean;
+  /** If `true`, the marker is faded. */
+  isFaded: boolean;
+  /** Callback fired when clicking on a scatter item. */
+  onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+};
+```
+
+### ScatterMarkerSlotExtension
+
+```typescript
+type ScatterMarkerSlotExtension = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterMarkerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterMarkerSlots;
+};
+```
+
+### ScatterMarkerSlotProps
+
+```typescript
+type ScatterMarkerSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterMarkerSlots
+
+```typescript
+type ScatterMarkerSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterPlotProps
+
+```typescript
+type ScatterPlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  classes?: Partial<ScatterClasses>;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+};
+```
+
+### ScatterPlotSlotProps
+
+```typescript
+type ScatterPlotSlotProps = { scatter?: Partial<ScatterProps>; marker?: ScatterMarkerProps };
+```
+
+### ScatterPlotSlots
+
+```typescript
+type ScatterPlotSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterProps
+
+```typescript
+type ScatterProps = {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: (dataIndex?: number) => string;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+  classes?: Partial<ScatterClasses>;
+  slots?: ScatterSlots;
+  slotProps?: ScatterSlotProps;
+};
+```
+
+### ScatterSeries
+
+```typescript
+type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
+```
+
+### ScatterSeriesType
+
+```typescript
+type ScatterSeriesType = {
+  type: 'scatter';
+  data?: ScatterValueType[];
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize?: number;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  preview?: { markerSize?: number };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<ScatterValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### ScatterSlotProps
+
+```typescript
+type ScatterSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterSlots
+
+```typescript
+type ScatterSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterValueType
+
+```typescript
+type ScatterValueType = {
+  x: number;
+  y: number;
+  z?: any;
+  /** A unique identifier for the scatter point */
+  id?: string | number;
+};
+```
+
+### SeriesId
+
+The unique identifier of a series.
+
+```typescript
+type SeriesId = string;
+```
+
+### SeriesItem
+
+```typescript
+type SeriesItem<T extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel'> = {
+  seriesId: string;
+  color: string;
+  value:
+    | { open: number; high: number; low: number; close: number }
+    | number
+    | HeatmapValueType
+    | ScatterValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkType | undefined;
+  markShape: MarkShape | undefined;
+};
+```
+
+### SeriesItemIdentifier
+
+```typescript
+type SeriesItemIdentifier<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = { seriesId: string };
+```
+
+### SeriesItemIdentifierWithData
+
+```typescript
+type SeriesItemIdentifierWithData<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### SeriesItemIdentifierWithType
+
+```typescript
+type SeriesItemIdentifierWithType<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### SeriesLegendItemContext
+
+```typescript
+type SeriesLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'series';
+  /** The identifier of the series */
+  seriesId: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### SeriesLegendItemParams
+
+```typescript
+type SeriesLegendItemParams = {
+  /** The identifier of the series */
+  seriesId: string;
+  /** The type of the series */
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  markType: ChartsLabelMarkType | undefined;
+  markShape?: MarkShape;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### ShowMarkParams
+
+```typescript
+type ShowMarkParams<AxisValue = number | Date> = {
+  /** The item index. */
+  index: number;
+  /** The x coordinate in the SVG. */
+  x: number;
+  /** The y coordinate in the SVG. */
+  y: number;
+  /** The item position value. It likely comes from the axis `data` property. */
+  position: AxisValue;
+  /** The item value. It comes from the series `data` property. */
+  value: number;
+};
+```
+
+### SparkLineChartProps
+
+````typescript
+type SparkLineChartProps<PlotType extends 'bar' | 'line' = 'bar' | 'line'> = {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: XAxis;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: YAxis;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: 'bar' | 'line';
+  /** Data to plot. */
+  data: number[];
+  /**
+   * Formatter used by the tooltip.
+   * @default (value: number | null) => (value === null ? '' : value.toString())
+   * @returns the formatted value.
+   */
+  valueFormatter?: (value: number | null) => string;
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip?: boolean;
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area?: boolean;
+  /** @default 'linear' */
+  curve?: CurveType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SparkLineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SparkLineChartSlotProps;
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: { top?: number; right?: number; bottom?: number; left?: number };
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | BarItemIdentifier
+    | Omit<BarItemIdentifier, 'type'>
+    | LineItemIdentifier
+    | Omit<LineItemIdentifier, 'type'>
+    | ScatterItemIdentifier
+    | Omit<ScatterItemIdentifier, 'type'>
+    | PieItemIdentifier
+    | Omit<PieItemIdentifier, 'type'>
+    | RadarItemIdentifier
+    | Omit<RadarItemIdentifier, 'type'>
+    | HeatmapItemIdentifier
+    | Omit<HeatmapItemIdentifier, 'type'>
+    | FunnelItemIdentifier
+    | Omit<FunnelItemIdentifier, 'type'>
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (
+    tooltipItem:
+      | BarItemIdentifier
+      | LineItemIdentifier
+      | ScatterItemIdentifier
+      | PieItemIdentifier
+      | RadarItemIdentifier
+      | HeatmapItemIdentifier
+      | FunnelItemIdentifier
+      | SankeyItemIdentifier
+      | null,
+  ) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem:
+      | SankeyItemIdentifier
+      | { type: 'bar'; seriesId: string; dataIndex?: number }
+      | { type: 'line'; seriesId: string; dataIndex?: number }
+      | { type: 'scatter'; seriesId: string; dataIndex?: number }
+      | { type: 'pie'; seriesId: string; dataIndex?: number }
+      | { type: 'radar'; seriesId: string; dataIndex?: number }
+      | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+      | { type: 'funnel'; seriesId: string; dataIndex?: number }
+      | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   */
+  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    bar: ChartSeriesTypeConfig<'bar'>;
+    line: ChartSeriesTypeConfig<'line'>;
+    scatter: ChartSeriesTypeConfig<'scatter'>;
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+    radar: ChartSeriesTypeConfig<'radar'>;
+    heatmap: ChartSeriesTypeConfig<'heatmap'>;
+    funnel: ChartSeriesTypeConfig<'funnel'>;
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: (
+      | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+      | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+      | {
+          type?: 'scatter';
+          seriesId?: string;
+          dataIndex?: number;
+          seriesId: string;
+          type: 'scatter';
+        }
+      | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+      | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+      | {
+          type?: 'heatmap';
+          seriesId?: string;
+          xIndex?: number;
+          yIndex?: number;
+          seriesId: string;
+          type: 'heatmap';
+        }
+      | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'node';
+          nodeId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'link';
+          sourceId?: SankeyNodeId;
+          targetId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+    )[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | VisibilityIdentifier
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | VisibilityIdentifier
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /** If true, the hit area interaction is disabled and falls back to hover events. */
+  disableHitArea?: boolean;
+};
+````
+
+### SparkLineChartSlotProps
+
+```typescript
+type SparkLineChartSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SparkLineChartSlots
+
+```typescript
+type SparkLineChartSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### StackableChartSeriesType
+
+```typescript
+type StackableChartSeriesType = 'bar' | 'line';
+```
+
+### StackOffsetType
+
+```typescript
+type StackOffsetType = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';
+```
+
+### StackOrderType
+
+```typescript
+type StackOrderType = 'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';
+```
+
+### strawberrySkyPaletteDark
+
+```typescript
+type strawberrySkyPaletteDark = string[];
+```
+
+### strawberrySkyPaletteLight
+
+```typescript
+type strawberrySkyPaletteLight = string[];
+```
+
+### TickFrequency
+
+The predefined tick frequencies for time ordinal axes.
+
+- 'years': displays the year, placing ticks at the start of each year
+- 'quarterly': displays the month, placing ticks at the start of each quarter
+- 'months': displays the month, placing ticks at the start of each month
+- 'biweekly': displays the day, placing ticks every two weeks
+- 'weeks': displays the day, placing ticks at the start of each week
+- 'days': displays the day, placing ticks at the start of each day
+- 'hours': displays the hour and minutes, placing ticks at the start of each hour
+
+```typescript
+type TickFrequency = 'years' | 'quarterly' | 'months' | 'biweekly' | 'weeks' | 'days' | 'hours';
+```
+
+### TickFrequencyDefinition
+
+Definition of a tick frequency for time ordinal axes.
+
+```typescript
+type TickFrequencyDefinition = {
+  /**
+   * Returns the number of ticks in the given date range for this tick frequency.
+   * @returns The number of ticks in the [from, to] range.
+   */
+  getTickNumber: (from: Date, to: Date) => number;
+  /**
+   * Decides if the current date should be shown as a tick.
+   * @returns Whether the current date is a tick or not.
+   */
+  isTick: (prev: Date, value: Date) => boolean;
+  /**
+   * Format the tick value for display.
+   * @returns The formatted date string.
+   */
+  format: (date: Date) => string;
+};
+```
+
+### TickItem
+
+```typescript
+type TickItem = {
+  /**
+   * The value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  value?: any;
+  /**
+   * The formatted value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  formattedValue?: string;
+  /**
+   * The offset in pixels relative to the SVG origin.
+   * For an x-axis, it is relative to the left side of the SVG.
+   * For a y-axis, it is relative to the top side of the SVG.
+   */
+  offset: number;
+  /**
+   * The offset in pixels relative to the tick position.
+   * For an x-axis, a positive value means the label is shifted to the right of the tick.
+   * For a y-axis, a positive value means the label is shifted downwards from the tick.
+   */
+  labelOffset: number;
+};
+```
+
+### UseAnimateParams
+
+```typescript
+type UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = {}> = {
+  /**
+   * Function that returns the interpolation function for animating props.
+   * @returns
+   * Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   * @returns The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /** If `true`, the animation will be skipped and the final props will be applied immediately. */
+  skip?: boolean;
+  /** Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`. */
+  initialProps?: Props;
+  /** Optional ref to merge with the ref returned from this hook. */
+  ref?: React.Ref<Elem>;
+};
+```
+
+### UseAnimateReturn
+
+```typescript
+type UseAnimateReturn<Elem extends Element, T extends {}> = {
+  /** Ref to be passed to the element to animate. */
+  ref: React.Ref<Elem>;
+};
+```
+
+### UseAxesTooltipParams
+
+```typescript
+type UseAxesTooltipParams = {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+};
+```
+
+### UseAxesTooltipReturnValue
+
+```typescript
+type UseAxesTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' = 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel', AxisValueT extends string | number | Date = string | number | Date> = { axisDirection: 'x' | 'y' | 'radius' | 'rotation';
+mainAxis: { /**
+ * ID used to identify the axis.
+ *
+ * The ID must be unique across all axes in this chart.
+ */
+id: AxisId;
+/** The data used by `'band'` and `'point'` scales. */
+data?: any[];
+/** The key used to retrieve `data` from the `dataset` prop. */
+dataKey?: string;
+/**
+ * A function to extract and transform the value from the `dataset` item.
+ * It receives the full dataset item and should return the axis value.
+ * Can be used as an alternative to `dataKey`.
+ * @returns The transformed value.
+ */
+valueGetter?: ((item: DatasetElementType<unknown>) => any);
+colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string); type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'piecewise'; thresholds: (number | Date)[]; colors: string[]; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) };
+/**
+ * Formats the axis value.
+ * @returns The string to display.
+ */
+valueFormatter?: (<TScaleName extends S>(value: any, context: AxisValueFormatterContext<TScaleName>) => string);
+/** The label of the axis. */
+label?: string;
+/** A CSS class name applied to the root element. */
+className?: string;
+/**
+ * If true, the axis line is disabled.
+ * @default false
+ */
+disableLine?: boolean;
+/**
+ * If true, the ticks are disabled.
+ * @default false
+ */
+disableTicks?: boolean;
+/** The style applied to ticks text. */
+tickLabelStyle?: ChartsTextStyle;
+/** The style applied to the axis label. */
+labelStyle?: ChartsTextStyle;
+/**
+ * Defines which ticks get its label displayed. Its value can be:
+ * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+ * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+ * @default 'auto'
+ */
+tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+/**
+ * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+ * @default 0
+ */
+tickSpacing?: number;
+/**
+ * The size of the ticks.
+ * @default 6
+ */
+tickSize?: number;
+/** Override or extend the styles applied to the component. */
+classes?: Partial<ChartsAxisClasses>;
+/**
+ * Overridable component slots.
+ * @default {}
+ */
+slots?: Partial<ChartsAxisSlots>;
+/**
+ * The props used for each component slot.
+ * @default {}
+ */
+slotProps?: Partial<ChartsAxisSlotProps>;
+sx?: SxProps;
+/**
+ * Maximal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMaxStep?: number;
+/**
+ * Minimal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMinStep?: number;
+/**
+ * The number of ticks. This number is not guaranteed.
+ * Not supported by categorical axis (band, points).
+ */
+tickNumber?: number;
+/**
+ * Defines which ticks are displayed.
+ * Its value can be:
+ * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+ * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+ * - an array containing the values where ticks should be displayed.
+ * @default 'auto'
+ * @see
+ */
+tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+/**
+ * The placement of ticks in regard to the band interval.
+ * Only used if scale is 'band'.
+ * @default 'extremities'
+ */
+tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+/**
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
+ * Only used if scale is 'band'.
+ * @default 'middle'
+ */
+tickLabelPlacement?: 'middle' | 'tick';
+/** If `true`, hide this value in the tooltip */
+hideTooltip?: boolean;
+/** If `true`, Reverse the axis scaleBand. */
+reverse?: boolean;
+/**
+ * Defines the axis scale domain based on the min/max values of series linked to it.
+ * - 'nice': Rounds the domain at human friendly values.
+ * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+ * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+ */
+domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+/** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+ignoreTooltip?: boolean;
+zoom?: boolean | ZoomOptions | false & DefaultizedZoomOptions | true & DefaultizedZoomOptions | { minStart?: number; maxEnd?: number; step?: number; minSpan?: number; maxSpan?: number; panning?: boolean; filterMode?: ZoomFilterMode; slider?: ZoomSliderOptions; axisId: AxisId; axisDirection: 'x' | 'y'; slider: DefaultedZoomSliderOptions; reverse: boolean; minStart: number; maxEnd: number; step: number; minSpan: number; maxSpan: number; panning: boolean; filterMode: ZoomFilterMode };
+/**
+ * The offset of the axis in pixels. It can be used to move the axis from its default position.
+ * X-axis: A top axis will move up, and a bottom axis will move down.
+ * Y-axis: A left axis will move left, and a right axis will move right.
+ * @default 0
+ */
+offset?: number;
+scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>;
+colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null, never> | ScaleThreshold<number, string | null, never>;
+/** Indicate if the axis should be consider by a tooltip with `trigger='axis'`. */
+triggerTooltip?: boolean };
+axisId: AxisId;
+axisValue: AxisValueT;
+axisFormattedValue: string;
+dataIndex: number;
+seriesItems: SeriesItem<SeriesType>[] }
+```
+
+### UseBarSeriesContextReturnValue
+
+```typescript
+type UseBarSeriesContextReturnValue = SeriesProcessorResult<'bar'>;
+```
+
+### UseBarSeriesReturnValue
+
+```typescript
+type UseBarSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UseChartCartesianAxisSignature
+
+```typescript
+type UseChartCartesianAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartCartesianAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartCartesianAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
+};
+```
+
+### UseChartClosestPointSignature
+
+```typescript
+type UseChartClosestPointSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVoronoiParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVoronoiDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartVoronoiInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVoronoiState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<SeriesType>,
+    UseChartTooltipSignature,
+  ];
+};
+```
+
+### UseChartHighlightSignature
+
+```typescript
+type UseChartHighlightSignature<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartHighlightParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartHighlightDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartHighlightInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartHighlightState<SeriesType>;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartInteractionSignature
+
+```typescript
+type UseChartInteractionSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: {};
+  /** The params after being processed with the default values. */
+  defaultizedParams: {};
+  /** An imperative api available for internal use. */
+  instance: UseChartInteractionInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartInteractionState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartPolarAxisSignature
+
+```typescript
+type UseChartPolarAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartPolarAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartPolarAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartPolarAxisInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartPolarAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature];
+};
+```
+
+### UseChartProExportSignature
+
+```typescript
+type UseChartProExportSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProExportParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProExportParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProExportInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProExportState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProExportPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartProZoomSignature
+
+```typescript
+type UseChartProZoomSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProZoomParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProZoomDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProZoomInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProZoomState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProZoomPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartTooltipSignature
+
+```typescript
+type UseChartTooltipSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartTooltipParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartTooltipDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartTooltipInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartTooltipState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartVisibilityManagerInstance
+
+```typescript
+type UseChartVisibilityManagerInstance<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** Hide an item by its identifier. */
+  hideItem: hideItem;
+  /** Show an item by its identifier. */
+  showItem: showItem;
+  /** Toggle the visibility of an item by its identifier. */
+  toggleItemVisibility: toggleItemVisibility;
+};
+```
+
+### UseChartVisibilityManagerParameters
+
+````typescript
+type UseChartVisibilityManagerParameters<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifierWithType<SeriesType>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (VisibilityIdentifierWithType<SeriesType> | VisibilityIdentifier<SeriesType>)[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | VisibilityIdentifierWithType<SeriesType>
+    | VisibilityIdentifier<SeriesType>
+  )[];
+};
+````
+
+### UseChartVisibilityManagerSignature
+
+```typescript
+type UseChartVisibilityManagerSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVisibilityManagerParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartVisibilityManagerInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVisibilityManagerState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartZAxisSignature
+
+```typescript
+type UseChartZAxisSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartZAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartZAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartZAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseFunnelSeriesContextReturnValue
+
+```typescript
+type UseFunnelSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseFunnelSeriesReturnValue
+
+```typescript
+type UseFunnelSeriesReturnValue = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### UseHeatmapSeriesContextReturnValue
+
+```typescript
+type UseHeatmapSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseHeatmapSeriesReturnValue
+
+```typescript
+type UseHeatmapSeriesReturnValue = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### UseItemTooltipReturnValue
+
+```typescript
+type UseItemTooltipReturnValue<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### UseLineSeriesContextReturnValue
+
+```typescript
+type UseLineSeriesContextReturnValue = SeriesProcessorResult<'line'>;
+```
+
+### UseLineSeriesReturnValue
+
+```typescript
+type UseLineSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UsePieSeriesContextReturnValue
+
+```typescript
+type UsePieSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UsePieSeriesReturnValue
+
+```typescript
+type UsePieSeriesReturnValue = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### UseRadarAxisParams
+
+```typescript
+type UseRadarAxisParams = {
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### UseRadarItemTooltipReturnValue
+
+```typescript
+type UseRadarItemTooltipReturnValue = {
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+  values: ItemTooltipValue<'radar'>[];
+};
+```
+
+### UseRadarSeriesContextReturnValue
+
+```typescript
+type UseRadarSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseRadarSeriesReturnValue
+
+```typescript
+type UseRadarSeriesReturnValue = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### UseScatterSeriesContextReturnValue
+
+```typescript
+type UseScatterSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseScatterSeriesReturnValue
+
+```typescript
+type UseScatterSeriesReturnValue = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### VisibilityIdentifier
+
+```typescript
+type VisibilityIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type?: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId?: string;
+  seriesId: string;
+};
+```
+
+### VisibilityIdentifierWithType
+
+```typescript
+type VisibilityIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### XAxis
+
+```typescript
+type XAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### YAxis
+
+```typescript
+type YAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'left' | 'right' | 'none';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * The width of the axis.
+   * Set to `'auto'` to automatically calculate the width based on tick label measurements.
+   * @default 65 if an axis label is provided, 45 otherwise.
+   */
+  width?: number | 'auto';
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### yellowPaletteDark
+
+```typescript
+type yellowPaletteDark = string[];
+```
+
+### yellowPaletteLight
+
+```typescript
+type yellowPaletteLight = string[];
+```
+
+### ZoomData
+
+```typescript
+type ZoomData = {
+  /** The id of the zoomed axis. */
+  axisId: AxisId;
+  /** The starting percentage of the zoom range. In the range of 0 to 100. */
+  start: number;
+  /** The ending percentage of the zoom range. In the range of 0 to 100. */
+  end: number;
+};
+```
+
+### ZoomFilterMode
+
+```typescript
+type ZoomFilterMode = 'keep' | 'discard';
+```
+
+### ZoomOptions
+
+```typescript
+type ZoomOptions = {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   * @default 0
+   */
+  minStart?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   * @default 100
+   */
+  maxEnd?: number;
+  /**
+   * The step size of the zooming function. Defines the granularity of the zoom.
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimum span size in the range of 0 to 100.
+   *
+   * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximum span size in the range of 0 to 100.
+   *
+   * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   * @default true
+   */
+  panning?: boolean;
+  /**
+   * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+   *
+   * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+   * - `discard`: The data outside the zoomed range is discarded for the other axes.
+   *    The other axes will be adjusted to fit the zoomed range.
+   * @default 'keep'
+   */
+  filterMode?: ZoomFilterMode;
+  /** Configures the zoom slider. The slider is an element that shows the zoomed range and allows its manipulation. */
+  slider?: ZoomSliderOptions;
+};
+```
+
+### ZoomSliderOptions
+
+```typescript
+type ZoomSliderOptions = {
+  /** If `true`, the slider will be shown. */
+  enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   * @default 48 if preview is enabled, 28 otherwise.
+   */
+  size?: number;
+  /**
+   * Defines when the tooltip with the zoom values should be shown.
+   * - 'always': The tooltip is always shown.
+   * - 'hover': The tooltip is shown when hovering over the track or thumb.
+   * - 'never': The tooltip is never shown.
+   * @default 'hover'
+   */
+  showTooltip?: ZoomSliderShowTooltip;
+  /**
+   * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
+   */
+  preview?: boolean | ZoomSliderPreviewOptions;
+};
+```
+
+### ZoomSliderShowTooltip
+
+```typescript
+type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
+```
+
+## External Types
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (value: number, context: { dataIndex: number }) => string | null;
+```
+
+### hideItem
+
+```typescript
+type hideItem = (identifier: unknown) => void;
+```
+
+### showItem
+
+```typescript
+type showItem = (identifier: unknown) => void;
+```
+
+### toggleItemVisibility
+
+```typescript
+type toggleItemVisibility = (
+  identifier:
+    | unknown
+    | {
+        type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+        seriesId: string;
+      },
+) => void;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### Exclude
+
+```typescript
+type Exclude = 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### TriggerOptions
+
+```typescript
+type TriggerOptions = 'item' | 'axis' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.chart-image-export-options.ts b/docs/pages/x/api/charts/types.chart-image-export-options.ts
new file mode 100644
index 0000000000000..f71c83ae8019a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.chart-image-export-options.ts
@@ -0,0 +1,4 @@
+import { ChartImageExportOptions } from '@mui/x-charts-pro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartImageExportOptions = createTypes(import.meta.url, ChartImageExportOptions);
diff --git a/docs/pages/x/api/charts/types.chart-print-export-options.md b/docs/pages/x/api/charts/types.chart-print-export-options.md
new file mode 100644
index 0000000000000..843b2dc61d90a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.chart-print-export-options.md
@@ -0,0 +1,35002 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.chart-print-export-options.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### BarChart
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarChartPro
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                                            |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `BarSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] objects.                                                                                                                                                                                                                                                      |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### BarElement
+
+**BarElement Props:**
+
+| Prop            | Type                         | Default | Description                             |
+| :-------------- | :--------------------------- | :------ | :-------------------------------------- |
+| hidden          | `boolean`                    | -       | -                                       |
+| classes         | `Partial<BarClasses>`        | -       | -                                       |
+| color\*         | `string`                     | -       | -                                       |
+| dataIndex\*     | `number`                     | -       | -                                       |
+| height\*        | `number`                     | -       | -                                       |
+| layout\*        | `'horizontal' \| 'vertical'` | -       | -                                       |
+| seriesId\*      | `string`                     | -       | -                                       |
+| skipAnimation\* | `boolean`                    | -       | -                                       |
+| slotProps       | `BarElementSlotProps`        | `{}`    | The props used for each component slot. |
+| slots           | `BarElementSlots`            | `{}`    | Overridable component slots.            |
+| width\*         | `number`                     | -       | -                                       |
+| x\*             | `number`                     | -       | -                                       |
+| xOrigin\*       | `number`                     | -       | -                                       |
+| y\*             | `number`                     | -       | -                                       |
+| yOrigin\*       | `number`                     | -       | -                                       |
+
+### BarLabel
+
+**BarLabel Props:**
+
+| Prop            | Type                         | Default    | Description                                                                                                     |
+| :-------------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------- |
+| hidden          | `boolean`                    | -          | If true, the bar label is hidden.                                                                               |
+| classes         | `Partial<BarClasses>`        | -          | -                                                                                                               |
+| color\*         | `string`                     | -          | -                                                                                                               |
+| dataIndex\*     | `number`                     | -          | -                                                                                                               |
+| height\*        | `number`                     | -          | Height of the bar this label belongs to.                                                                        |
+| isFaded\*       | `boolean`                    | -          | -                                                                                                               |
+| isHighlighted\* | `boolean`                    | -          | -                                                                                                               |
+| layout\*        | `'vertical' \| 'horizontal'` | -          | -                                                                                                               |
+| placement       | `'center' \| 'outside'`      | `'center'` | The placement of the bar label.&#xA;It controls whether the label is rendered in the center or outside the bar. |
+| seriesId\*      | `string`                     | -          | -                                                                                                               |
+| skipAnimation\* | `boolean`                    | -          | -                                                                                                               |
+| width\*         | `number`                     | -          | Width of the bar this label belongs to.                                                                         |
+| x\*             | `number`                     | -          | Position in the x-axis of the bar this label belongs to.                                                        |
+| xOrigin\*       | `number`                     | -          | The x-coordinate of the stack this bar label belongs to.                                                        |
+| y\*             | `number`                     | -          | Position in the y-axis of the bar this label belongs to.                                                        |
+| yOrigin\*       | `number`                     | -          | The y-coordinate of the stack this bar label belongs to.                                                        |
+
+### BarPlot
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+
+**BarPlot Props:**
+
+| Prop          | Type               | Default        | Description                                                                                                                                                                                                                                                                                                |
+| :------------ | :----------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| borderRadius  | `number`           | -              | Defines the border radius of the bar element.                                                                                                                                                                                                                                                              |
+| onItemClick   | `onItemClick`      | -              | Callback fired when a bar item is clicked.                                                                                                                                                                                                                                                                 |
+| renderer      | `RendererType`     | `'svg-single'` | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance |
+| skipAnimation | `boolean`          | `undefined`    | If `true`, animations are skipped.                                                                                                                                                                                                                                                                         |
+| slotProps     | `BarPlotSlotProps` | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                    |
+| slots         | `BarPlotSlots`     | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                               |
+| className     | `string`           | -              | A CSS class name applied to the root element.                                                                                                                                                                                                                                                              |
+
+### blueberryTwilightPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### bluePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsAxis Props:**
+
+| Prop      | Type                  | Default | Description                             |
+| :-------- | :-------------------- | :------ | :-------------------------------------- |
+| slotProps | `ChartsAxisSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `ChartsAxisSlots`     | `{}`    | Overridable component slots.            |
+
+### ChartsAxisHighlight
+
+Demos:
+
+- [Custom components](https://mui.com/x/react-charts/components/)
+
+API:
+
+- [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+
+**ChartsAxisHighlight Props:**
+
+| Prop | Type                      | Default | Description |
+| :--- | :------------------------ | :------ | :---------- |
+| x    | `ChartsAxisHighlightType` | -       | -           |
+| y    | `ChartsAxisHighlightType` | -       | -           |
+
+### ChartsAxisTooltipContent
+
+**ChartsAxisTooltipContent Props:**
+
+| Prop    | Type                            | Default  | Description                                                                                                                                                                                   |
+| :------ | :------------------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes | `Partial<ChartsTooltipClasses>` | -        | Override or extend the styles applied to the component.                                                                                                                                       |
+| sort    | `'none' \| 'asc' \| 'desc'`     | `'none'` | The sort in which series items are displayed in the tooltip.&#xA;When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value. |
+| sx      | `SxProps<Theme>`                | -        | -                                                                                                                                                                                             |
+
+### ChartsBrushOverlay
+
+Component that renders visual feedback during brush interaction
+
+**ChartsBrushOverlay Props:**
+
+| Prop      | Type     | Default | Description                                   |
+| :-------- | :------- | :------ | :-------------------------------------------- |
+| className | `string` | -       | A CSS class name applied to the root element. |
+
+### ChartsClipPath
+
+API:
+
+- [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+
+**ChartsClipPath Props:**
+
+| Prop   | Type                                                               | Default | Description                                                                                                                             |
+| :----- | :----------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| offset | `{ top?: number; right?: number; bottom?: number; left?: number }` | -       | Offset, in pixels, of the clip path rectangle from the drawing area. A positive value will move the rectangle outside the drawing area. |
+| id\*   | `string`                                                           | -       | The id of the clip path.                                                                                                                |
+
+### ChartsColorCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### ChartsColorPaletteCallback
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ChartsContainerPro
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPro` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+
+**ChartsContainerPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProvider
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/react-charts/composition/)
+
+API:
+
+- [ChartsDataProvider API](https://mui.com/x/api/charts/charts-data-provider/)
+
+**ChartsDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                              | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                     | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]` | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                           | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                                                        | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                                                            | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsDataProviderPro
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPro API](https://mui.com/x/api/charts/charts-data-provider-pro/)
+
+**ChartsDataProviderPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+
+### ChartsGrid
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsGrid Props:**
+
+| Prop       | Type                         | Default | Description                                             |
+| :--------- | :--------------------------- | :------ | :------------------------------------------------------ |
+| classes    | `Partial<ChartsGridClasses>` | -       | Override or extend the styles applied to the component. |
+| horizontal | `boolean`                    | -       | Displays horizontal grid.                               |
+| vertical   | `boolean`                    | -       | Displays vertical grid.                                 |
+| className  | `string`                     | -       | A CSS class name applied to the root element.           |
+
+### ChartsItemTooltipContent
+
+**ChartsItemTooltipContent Props:**
+
+| Prop    | Type                            | Default | Description                                             |
+| :------ | :------------------------------ | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipClasses>` | -       | Override or extend the styles applied to the component. |
+| sx      | `SxProps<Theme>`                | -       | -                                                       |
+
+### ChartsLegend
+
+**ChartsLegend Props:**
+
+| Prop                    | Type                                                                                                                     | Default | Description                                                                                  |
+| :---------------------- | :----------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------- |
+| classes                 | `Partial<ChartsLegendClasses>`                                                                                           | -       | Override or extend the styles applied to the component.                                      |
+| direction               | `Direction`                                                                                                              | -       | The direction of the legend layout.&#xA;The default depends on the chart.                    |
+| onItemClick             | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void)` | -       | Callback fired when a legend item is clicked.                                                |
+| slotProps               | `ChartsLegendSlotProps`                                                                                                  | `{}`    | The props used for each component slot.                                                      |
+| slots                   | `ChartsLegendSlots`                                                                                                      | `{}`    | Overridable component slots.                                                                 |
+| sx                      | `SxProps<Theme>`                                                                                                         | -       | -                                                                                            |
+| tabIndex                | `number`                                                                                                                 | -       | -                                                                                            |
+| toggleVisibilityOnClick | `boolean`                                                                                                                | `false` | If `true`, clicking on a legend item will toggle the visibility of the corresponding series. |
+| className               | `string`                                                                                                                 | -       | -                                                                                            |
+
+### ChartsLoadingOverlay
+
+**ChartsLoadingOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### ChartsLocalizationProvider
+
+Demos:
+
+- [localization](https://mui.com/x/react-charts/localization/)
+
+API:
+
+- [ChartsLocalizationProvider API](https://mui.com/x/api/charts/charts-localization-provider/)
+
+**ChartsLocalizationProvider Props:**
+
+| Prop       | Type                        | Default | Description                          |
+| :--------- | :-------------------------- | :------ | :----------------------------------- |
+| localeText | `Partial<ChartsLocaleText>` | -       | Localized text for chart components. |
+| children   | `React.ReactNode`           | -       | -                                    |
+
+### ChartsNoDataOverlay
+
+**ChartsNoDataOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### ChartsOverlay
+
+**ChartsOverlay Props:**
+
+| Prop      | Type                     | Default | Description                                |
+| :-------- | :----------------------- | :------ | :----------------------------------------- |
+| loading   | `boolean`                | `false` | If `true`, a loading overlay is displayed. |
+| slotProps | `ChartsOverlaySlotProps` | `{}`    | The props used for each component slot.    |
+| slots     | `ChartsOverlaySlots`     | `{}`    | Overridable component slots.               |
+
+### ChartsReferenceLine
+
+**ChartsReferenceLine Props:**
+
+| Prop       | Type                                   | Default                                                                      | Description                                                                                                                                            |
+| :--------- | :------------------------------------- | :--------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label      | `string`                               | -                                                                            | The label to display along the reference line.                                                                                                         |
+| axisId     | `AxisId`                               | ``The `id` of the first defined axis.``                                      | The id of the axis used for the reference value.                                                                                                       |
+| classes    | `Partial<ChartsReferenceLineClasses>`  | -                                                                            | Override or extend the styles applied to the component.                                                                                                |
+| labelAlign | `'start' \| 'middle' \| 'end'`         | `'middle'`                                                                   | The alignment if the label is in the chart drawing area.                                                                                               |
+| labelStyle | `ChartsTextStyle`                      | -                                                                            | The style applied to the label.                                                                                                                        |
+| lineStyle  | `React.CSSProperties`                  | -                                                                            | The style applied to the line.                                                                                                                         |
+| spacing    | `number \| { x?: number; y?: number }` | `{ x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.` | Additional space around the label in px.&#xA;Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes. |
+| x          | `string \| number \| Date`             | -                                                                            | The x value associated with the reference line.&#xA;If defined the reference line will be vertical.                                                    |
+| y          | `string \| number \| Date`             | -                                                                            | The y value associated with the reference line.&#xA;If defined the reference line will be horizontal.                                                  |
+
+### ChartsSurface
+
+A helper component that combines `<ChartsLayerContainer>` and `<ChartsSvgLayer>` to provide a surface for drawing charts.
+If you need more control over the layers, you can use `<ChartsLayerContainer>` and `<ChartsSvgLayer>` separately.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+
+**ChartsSurface Props:**
+
+| Prop      | Type              | Default | Description                                                                                |
+| :-------- | :---------------- | :------ | :----------------------------------------------------------------------------------------- |
+| desc      | `string`          | -       | The description of the chart.&#xA;Used to provide an accessible description for the chart. |
+| sx        | `SxProps<Theme>`  | -       | -                                                                                          |
+| title     | `string`          | -       | The title of the chart.&#xA;Used to provide an accessible label for the chart.             |
+| children  | `React.ReactNode` | -       | -                                                                                          |
+| className | `string`          | -       | -                                                                                          |
+
+### ChartsText
+
+Helper component to manage multiline text in SVG
+
+**ChartsText Props:**
+
+| Prop             | Type              | Default | Description                            |
+| :--------------- | :---------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`          | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`         | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`             | -       | -                                      |
+| text\*           | `string`          | -       | Text displayed.                        |
+| style            | `ChartsTextStyle` | -       | Style applied to text elements.        |
+
+### ChartsToolbarImageExportTrigger
+
+A button that triggers an image export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarImageExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartsToolbarImageExportOptions`                                                                                                                                                                 | -       | The options to apply on the image export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPrintExportTrigger
+
+A button that triggers a print export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-charts/export/)
+
+**ChartsToolbarPrintExportTrigger Props:**
+
+| Prop      | Type                                                                                                                                                                                              | Default | Description                                             |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| options   | `ChartPrintExportOptions`                                                                                                                                                                         | -       | The options to apply on the Print export.               |
+| tabIndex  | `number`                                                                                                                                                                                          | -       | -                                                       |
+| disabled  | `boolean`                                                                                                                                                                                         | -       | -                                                       |
+| id        | `string`                                                                                                                                                                                          | -       | -                                                       |
+| className | `string`                                                                                                                                                                                          | -       | -                                                       |
+| style     | `React.CSSProperties`                                                                                                                                                                             | -       | -                                                       |
+| render    | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarPro
+
+The chart toolbar component for the pro package.
+
+**ChartsToolbarPro Props:**
+
+| Prop               | Type                                | Default | Description |
+| :----------------- | :---------------------------------- | :------ | :---------- |
+| imageExportOptions | `ChartsToolbarImageExportOptions[]` | -       | -           |
+| printOptions       | `ChartsToolbarPrintExportOptions`   | -       | -           |
+
+### ChartsToolbarZoomInTrigger
+
+A button that zooms the chart in.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomInTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsToolbarZoomOutTrigger
+
+A button that zooms the chart out.
+It renders the `baseButton` slot.
+
+**ChartsToolbarZoomOutTrigger Props:**
+
+| Prop   | Type                                                                                                                                                                                              | Default | Description                                             |
+| :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :------------------------------------------------------ |
+| render | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }>` | -       | A function to customize the rendering of the component. |
+
+### ChartsTooltip
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                                                                                                                |
+| :-------- | :--------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                                                                                                                    |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                                                                                                                  |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                                                                                                                    |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                                                                                                               |
+| sort      | `'none' \| 'asc' \| 'desc'`              | `'none'`    | Defines the sort order in which series items are displayed in the axis tooltip.&#xA;When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.&#xA;Only applies when `trigger='axis'`. |
+| trigger   | `'axis' \| 'none' \| 'item'`             | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip.                                                                                         |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                                                                                                          |
+
+### ChartsTooltipContainer
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltipContainer Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                        |
+| :-------- | :--------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                            |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                          |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                            |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                       |
+| trigger   | `TriggerOptions`                         | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip. |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                  |
+| children  | `React.ReactNode`                        | -           | -                                                                                                                                                                                  |
+
+### ChartsWrapper
+
+Wrapper for the charts components.
+Its main purpose is to position the HTML legend in the correct place.
+
+**ChartsWrapper Props:**
+
+| Prop             | Type              | Default                                                          | Description                                      |
+| :--------------- | :---------------- | :--------------------------------------------------------------- | :----------------------------------------------- |
+| extendVertically | `boolean`         | `` `false` if the `height` prop is set. And `true` otherwise. `` | If `true`, the chart wrapper set `height: 100%`. |
+| hideLegend       | `boolean`         | `false`                                                          | If `true`, the legend is not rendered.           |
+| legendDirection  | `Direction`       | `'horizontal'`                                                   | The direction of the legend.                     |
+| legendPosition   | `Position`        | `{ horizontal: 'center', vertical: 'bottom' }`                   | The position of the legend.                      |
+| sx               | `SxProps<Theme>`  | -                                                                | -                                                |
+| children\*       | `React.ReactNode` | -                                                                | -                                                |
+
+### ChartsXAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
+
+**ChartsXAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'x'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelMinGap    | `number`                                                      | `4`             | The minimum gap in pixels between two tick labels.&#xA;If two tick labels are closer than this minimum gap, one of them will be hidden.                                                                                                                                                                                         |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsYAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+
+**ChartsYAxis Props:**
+
+| Prop               | Type                                                          | Default         | Description                                                                                                                                                                                                                                                                                                                     |
+| :----------------- | :------------------------------------------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label              | `string`                                                      | -               | The label of the axis.                                                                                                                                                                                                                                                                                                          |
+| axis               | `'y'`                                                         | -               | -                                                                                                                                                                                                                                                                                                                               |
+| axisId             | `AxisId`                                                      | -               | The id of the axis to render.&#xA;If undefined, it will be the first defined axis.                                                                                                                                                                                                                                              |
+| classes            | `Partial<ChartsAxisClasses>`                                  | -               | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                         |
+| disableLine        | `boolean`                                                     | `false`         | If true, the axis line is disabled.                                                                                                                                                                                                                                                                                             |
+| disableTicks       | `boolean`                                                     | `false`         | If true, the ticks are disabled.                                                                                                                                                                                                                                                                                                |
+| labelStyle         | `ChartsTextStyle`                                             | -               | The style applied to the axis label.                                                                                                                                                                                                                                                                                            |
+| slotProps          | `Partial<ChartsAxisSlotProps>`                                | `{}`            | The props used for each component slot.                                                                                                                                                                                                                                                                                         |
+| slots              | `Partial<ChartsAxisSlots>`                                    | `{}`            | Overridable component slots.                                                                                                                                                                                                                                                                                                    |
+| sx                 | `SxProps`                                                     | -               | -                                                                                                                                                                                                                                                                                                                               |
+| tickInterval       | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'`        | Defines which ticks are displayed.&#xA;Its value can be: 'auto' In such case the ticks are computed based on axis scale and other parameters.a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.an array containing the values where ticks should be displayed. |
+| tickLabelInterval  | `'auto' \| ((value: any, index: number) => boolean)`          | `'auto'`        | Defines which ticks get its label displayed. Its value can be: 'auto' In such case, labels are displayed if they do not overlap with the previous one.a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.                                                              |
+| tickLabelPlacement | `'middle' \| 'tick'`                                          | `'middle'`      | The placement of ticks label. Can be the middle of the band, or the tick position.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                            |
+| tickLabelStyle     | `ChartsTextStyle`                                             | -               | The style applied to ticks text.                                                                                                                                                                                                                                                                                                |
+| tickMaxStep        | `number`                                                      | -               | Maximal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickMinStep        | `number`                                                      | -               | Minimal step between two ticks.&#xA;When using time data, the value is assumed to be in ms.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                               |
+| tickNumber         | `number`                                                      | -               | The number of ticks. This number is not guaranteed.&#xA;Not supported by categorical axis (band, points).                                                                                                                                                                                                                       |
+| tickPlacement      | `'start' \| 'end' \| 'middle' \| 'extremities'`               | `'extremities'` | The placement of ticks in regard to the band interval.&#xA;Only used if scale is 'band'.                                                                                                                                                                                                                                        |
+| tickSize           | `number`                                                      | `6`             | The size of the ticks.                                                                                                                                                                                                                                                                                                          |
+| tickSpacing        | `number`                                                      | `0`             | The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.                                                                                                                                                                                                       |
+| className          | `string`                                                      | -               | A CSS class name applied to the root element.                                                                                                                                                                                                                                                                                   |
+
+### ChartsZoomSlider
+
+Renders the zoom slider for all x and y axes that have it enabled.
+
+### ChartZoomSlider
+
+### cheerfulFiestaPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### ContinuousColorLegend
+
+**ContinuousColorLegend Props:**
+
+| Prop          | Type                                    | Default                | Description                                                                                                                                                                          |
+| :------------ | :-------------------------------------- | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisDirection | `'x' \| 'y' \| 'z'`                     | `'z'`                  | The axis direction containing the color configuration to represent.                                                                                                                  |
+| axisId        | `AxisId`                                | `The first axis item.` | The id of the axis item with the color configuration to represent.                                                                                                                   |
+| classes       | `Partial<ContinuousColorLegendClasses>` | -                      | Override or extend the styles applied to the component.                                                                                                                              |
+| direction     | `Direction`                             | `'horizontal'`         | The direction of the legend layout.                                                                                                                                                  |
+| gradientId    | `string`                                | `auto-generated id`    | The id for the gradient to use.&#xA;If not provided, it will use the generated gradient from the axis configuration.&#xA;The `gradientId` will be used as `fill="url(#gradientId)"`. |
+| labelPosition | `'start' \| 'end' \| 'extremes'`        | `'end'`                | Where to position the labels relative to the gradient.                                                                                                                               |
+| maxLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the maximum side of the gradient.&#xA;Can either be a string, or a function.&#xA;If not defined, the formatted maximal value is display.                     |
+| minLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the minimum side of the gradient.&#xA;Can either be a string, or a function.                                                                                 |
+| reverse       | `boolean`                               | `false`                | If `true`, the gradient and labels will be reversed.                                                                                                                                 |
+| slotProps     | `ChartsLegendSlotProps`                 | `{}`                   | The props used for each component slot.                                                                                                                                              |
+| slots         | `ChartsLegendSlots`                     | `{}`                   | Overridable component slots.                                                                                                                                                         |
+| sx            | `SxProps<Theme>`                        | -                      | -                                                                                                                                                                                    |
+| tabIndex      | `number`                                | -                      | -                                                                                                                                                                                    |
+| thickness     | `number`                                | `12`                   | The thickness of the gradient                                                                                                                                                        |
+| className     | `string`                                | -                      | -                                                                                                                                                                                    |
+
+### cyanPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### defaultOnBeforeExport
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| iframe    | `HTMLIFrameElement` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void;
+```
+
+### FocusedBar
+
+### FocusedFunnelSection
+
+### FocusedHeatmapCell
+
+### FocusedLineMark
+
+### FocusedPieArc
+
+**FocusedPieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color           | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius    | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| outerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle    | `number`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+
+### FocusedRadarMark
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### FocusedScatterMark
+
+### FunnelChart
+
+**FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### FunnelPlot
+
+**FunnelPlot Props:**
+
+| Prop        | Type                                                                                                      | Default | Description                                   |
+| :---------- | :-------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------- |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)` | -       | Callback fired when a funnel item is clicked. |
+| slotProps   | `FunnelPlotSlotProps`                                                                                     | `{}`    | The props used for each component slot.       |
+| slots       | `FunnelPlotSlots`                                                                                         | `{}`    | Overridable component slots.                  |
+| className   | `string`                                                                                                  | -       | A CSS class name applied to the root element. |
+
+### Gauge
+
+**Gauge Props:**
+
+| Prop          | Type                                                           | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                                               | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| classes       | `Partial<GaugeClasses>`                                        | -        | -                                                                                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`                                             | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`                                             | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`                                             | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                                                       | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                                                       | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                                                       | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`                                             | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number`                               | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`                                             | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                                                      | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                                                       | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                                               | -        | -                                                                                                                                                                                                                                                                            |
+| text          | `string \| ((params: GaugeFormatterParams) => string \| null)` | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                                                       | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                                                       | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                                                       | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                                                       | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                                                       | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                                              | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                                                       | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeContainer
+
+**GaugeContainer Props:**
+
+| Prop          | Type                             | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                 | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`               | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`               | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`               | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                         | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                         | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                         | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`               | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number` | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`               | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                        | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                         | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                 | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                         | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                         | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                         | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                         | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                         | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                         | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeReferenceArc
+
+### GaugeValueArc
+
+**GaugeValueArc Props:**
+
+| Prop          | Type      | Default | Description |
+| :------------ | :-------- | :------ | :---------- |
+| skipAnimation | `boolean` | -       | -           |
+
+### GaugeValueText
+
+**GaugeValueText Props:**
+
+| Prop             | Type                                                           | Default | Description                            |
+| :--------------- | :------------------------------------------------------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`                                                       | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`                                                      | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`                                                          | -       | -                                      |
+| text             | `string \| ((params: GaugeFormatterParams) => string \| null)` | -       | -                                      |
+| style            | `ChartsTextStyle`                                              | -       | Style applied to text elements.        |
+
+### getPieCoordinates
+
+**Parameters:**
+
+| Parameter | Type                                                       | Default | Description |
+| :-------- | :--------------------------------------------------------- | :------ | :---------- |
+| series    | `LegendItemParams<DefaultizedPieSeriesType, 'cx' \| 'cy'>` | -       | -           |
+| drawing   | `LegendItemParams<ChartDrawingArea, 'width' \| 'height'>`  | -       | -           |
+
+**Return Value:**
+
+| Property          | Type     | Description |
+| :---------------- | :------- | :---------- |
+| `cx`              | `number` | -           |
+| `cy`              | `number` | -           |
+| `availableRadius` | `number` | -           |
+
+### getValueToPositionMapper
+
+For a given scale return a function that map value to their position.
+Useful when dealing with specific scale such as band.
+
+**Parameters:**
+
+| Parameter | Type                                                                  | Default | Description      |
+| :-------- | :-------------------------------------------------------------------- | :------ | :--------------- |
+| scale     | `D3Scale<{ toString: function toString() { [native code] } }, Range>` | -       | The scale to use |
+
+**Return Value:**
+
+A function that map value to their position
+
+```tsx
+type ReturnValue = (value: any) => number;
+```
+
+### greenPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Heatmap
+
+**Heatmap Props:**
+
+| Prop                      | Type                                                                                                                                                                                         | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                     | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                         | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                              | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                     | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                    | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                    | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                     | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                    | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`           | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                 | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                    | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                  | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                             | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                     | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                           | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                            | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                    | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapSlotProps`                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapSlots`                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                     | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                         | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                       | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| null`                                                                                                           | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                     | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                               | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                               | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                        | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                 | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                      | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                     | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                            | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+### HeatmapCell
+
+Demos:
+
+- [Heatmap](https://mui.com/x/react-charts/heatmap/)
+
+API:
+
+- [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+
+**HeatmapCell Props:**
+
+| Prop         | Type                    | Default | Description |
+| :----------- | :---------------------- | :------ | :---------- |
+| height\*     | `number`                | -       | -           |
+| ownerState\* | `HeatmapCellOwnerState` | -       | -           |
+| width\*      | `number`                | -       | -           |
+| x\*          | `number`                | -       | -           |
+| y\*          | `number`                | -       | -           |
+
+### HeatmapData
+
+**Constructor Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| data      | `HeatmapValueType[]` | -       | -           |
+
+**Methods:**
+
+```typescript
+function getValue(xIndex: number, yIndex: number): number | null;
+```
+
+### HeatmapPlot
+
+**HeatmapPlot Props:**
+
+| Prop         | Type                   | Default | Description                                       |
+| :----------- | :--------------------- | :------ | :------------------------------------------------ |
+| borderRadius | `number`               | -       | The border radius of the heatmap cells in pixels. |
+| slotProps    | `HeatmapPlotSlotProps` | `{}`    | The props used for each component slot.           |
+| slots        | `HeatmapPlotSlots`     | `{}`    | Overridable component slots.                      |
+| className    | `string`               | -       | A CSS class name applied to the root element.     |
+
+### HeatmapTooltip
+
+**HeatmapTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer'`                    | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### HeatmapTooltipContent
+
+**HeatmapTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineChartPro
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'line'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'line'>>, ChartPlugin<UseChartHighlightSignature<'line'>>, ChartPlugin<UseChartVisibilityManagerSignature<'line'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                       | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### mangoFusionPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+### orangePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### PieArc
+
+**PieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color\*         | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius\*  | `number`                                                          | -       | -                                                                                                                                        |
+| dataIndex\*     | `number`                                                          | -       | -                                                                                                                                        |
+| endAngle\*      | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| isFaded\*       | `boolean`                                                         | -       | -                                                                                                                                        |
+| isFocused\*     | `boolean`                                                         | -       | -                                                                                                                                        |
+| isHighlighted\* | `boolean`                                                         | -       | -                                                                                                                                        |
+| outerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle\*  | `number`                                                          | -       | -                                                                                                                                        |
+| seriesId\*      | `string`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+| startAngle\*    | `number`                                                          | -       | -                                                                                                                                        |
+
+### PieArcLabel
+
+**PieArcLabel Props:**
+
+| Prop              | Type                  | Default | Description |
+| :---------------- | :-------------------- | :------ | :---------- |
+| hidden            | `boolean`             | -       | -           |
+| arcLabelRadius\*  | `number`              | -       | -           |
+| classes           | `Partial<PieClasses>` | -       | -           |
+| color\*           | `string`              | -       | -           |
+| cornerRadius\*    | `number`              | -       | -           |
+| endAngle\*        | `number`              | -       | -           |
+| formattedArcLabel | `string \| null`      | -       | -           |
+| isFaded\*         | `boolean`             | -       | -           |
+| isHighlighted\*   | `boolean`             | -       | -           |
+| paddingAngle\*    | `number`              | -       | -           |
+| seriesId\*        | `string`              | -       | -           |
+| skipAnimation\*   | `boolean`             | -       | -           |
+| startAngle\*      | `number`              | -       | -           |
+
+### PieArcLabelPlot
+
+**PieArcLabelPlot Props:**
+
+| Prop             | Type                                                                                                                                                                                                           | Default                           | Description                                                    |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabel         | `'formattedValue' \| 'label' \| 'value' \| ((item: { id?: PieItemId; color: string; labelMarkType?: ChartsLabelMarkType; value: number; formattedValue: string; hidden: boolean; label?: string }) => string)` | -                                 | The label displayed into the arc.                              |
+| arcLabelMinAngle | `number`                                                                                                                                                                                                       | `0`                               | The minimal angle required to display the arc label.           |
+| arcLabelRadius   | `number`                                                                                                                                                                                                       | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius     | `number`                                                                                                                                                                                                       | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*           | `DefaultizedPieValueType[]`                                                                                                                                                                                    | -                                 | -                                                              |
+| faded            | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted      | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius      | `number`                                                                                                                                                                                                       | `0`                               | The radius between circle center and the beginning of the arc. |
+| outerRadius\*    | `number`                                                                                                                                                                                                       | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle     | `number`                                                                                                                                                                                                       | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*       | `string`                                                                                                                                                                                                       | -                                 | The id of this series.                                         |
+| skipAnimation    | `boolean`                                                                                                                                                                                                      | `false`                           | If `true`, animations are skipped.                             |
+| slotProps        | `PieArcLabelPlotSlotProps`                                                                                                                                                                                     | `{}`                              | The props used for each component slot.                        |
+| slots            | `PieArcLabelPlotSlots`                                                                                                                                                                                         | `{}`                              | Overridable component slots.                                   |
+
+### PieArcPlot
+
+**PieArcPlot Props:**
+
+| Prop           | Type                                                                                                                                                               | Default                           | Description                                                    |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabelRadius | `number`                                                                                                                                                           | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius   | `number`                                                                                                                                                           | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*         | `DefaultizedPieValueType[]`                                                                                                                                        | -                                 | -                                                              |
+| faded          | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted    | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius    | `number`                                                                                                                                                           | `0`                               | The radius between circle center and the beginning of the arc. |
+| onItemClick    | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                             | -                                 | Callback fired when a pie item is clicked.                     |
+| outerRadius\*  | `number`                                                                                                                                                           | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle   | `number`                                                                                                                                                           | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*     | `string`                                                                                                                                                           | -                                 | The id of this series.                                         |
+| skipAnimation  | `boolean`                                                                                                                                                          | `false`                           | If `true`, animations are skipped.                             |
+| slotProps      | `PieArcPlotSlotProps`                                                                                                                                              | `{}`                              | The props used for each component slot.                        |
+| slots          | `PieArcPlotSlots`                                                                                                                                                  | `{}`                              | Overridable component slots.                                   |
+
+### piecewiseColorDefaultLabelFormatter
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `PiecewiseLabelFormatterParams` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PiecewiseColorLegend
+
+**PiecewiseColorLegend Props:**
+
+| Prop           | Type                                                                                                                             | Default                | Description                                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :------------------------------------------------------------------ |
+| axisDirection  | `'x' \| 'y' \| 'z'`                                                                                                              | `'z'`                  | The axis direction containing the color configuration to represent. |
+| axisId         | `AxisId`                                                                                                                         | `The first axis item.` | The id of the axis item with the color configuration to represent.  |
+| classes        | `Partial<PiecewiseColorLegendClasses>`                                                                                           | -                      | Override or extend the styles applied to the component.             |
+| direction      | `Direction`                                                                                                                      | `'horizontal'`         | The direction of the legend layout.                                 |
+| labelFormatter | `((params: PiecewiseLabelFormatterParams) => string \| null)`                                                                    | -                      | Format the legend labels.                                           |
+| labelPosition  | `'start' \| 'end' \| 'extremes' \| 'inline-start' \| 'inline-end'`                                                               | `'extremes'`           | Where to position the labels relative to the color marks.           |
+| onItemClick    | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void)` | -                      | Callback fired when a legend item is clicked.                       |
+| slotProps      | `ChartsLegendSlotProps`                                                                                                          | `{}`                   | The props used for each component slot.                             |
+| slots          | `ChartsLegendSlots`                                                                                                              | `{}`                   | Overridable component slots.                                        |
+| sx             | `SxProps<Theme>`                                                                                                                 | -                      | -                                                                   |
+| tabIndex       | `number`                                                                                                                         | -                      | -                                                                   |
+| className      | `string`                                                                                                                         | -                      | -                                                                   |
+
+### PieChart
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+
+**PieChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PieChartPro
+
+**PieChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PiePlot
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+
+**PiePlot Props:**
+
+| Prop          | Type                                                                                                                                   | Default | Description                                |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)` | -       | Callback fired when a pie item is clicked. |
+| skipAnimation | `boolean`                                                                                                                              | `false` | If `true`, animations are skipped.         |
+| slotProps     | `PiePlotSlotProps`                                                                                                                     | `{}`    | The props used for each component slot.    |
+| slots         | `PiePlotSlots`                                                                                                                         | `{}`    | Overridable component slots.               |
+| className     | `string`                                                                                                                               | -       | -                                          |
+
+### pinkPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### purplePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### RadarAxis
+
+**RadarAxis Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default        | Description                                                                                                                                                                              |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| angle            | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The absolute rotation angle of the metrics (in degree)&#xA;If not defined the metric angle will be used.                                                                                 |
+| classes          | `Partial<LegendItemParams<RadarClasses, 'axisLine' \| 'axisLabel' \| 'axisRoot'>>`                                                                                                                                                                                                                                                                                                                                                                   | -              | Override or extend the styles applied to the component.                                                                                                                                  |
+| divisions        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `1`            | The number of divisions with label.                                                                                                                                                      |
+| dominantBaseline | `'auto' \| 'use-script' \| 'no-change' \| 'reset-size' \| 'ideographic' \| 'alphabetic' \| 'hanging' \| 'mathematical' \| 'central' \| 'middle' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| ((angle: number) => 'auto' \| 'middle' \| 'alphabetic' \| 'hanging' \| 'ideographic' \| 'mathematical' \| 'central' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| 'use-script' \| 'no-change' \| 'reset-size' \| undefined)` | -              | The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).                                                                           |
+| labelOrientation | `'horizontal' \| 'rotated'`                                                                                                                                                                                                                                                                                                                                                                                                                          | `'horizontal'` | Defines how label align with the axis. 'horizontal': labels stay horizontal and their placement change with the axis angle.'rotated': labels are rotated 90deg relatively to their axis. |
+| metric           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The metric to get.&#xA;If `undefined`, the hook returns `null`                                                                                                                           |
+| textAnchor       | `'start' \| 'middle' \| 'end' \| 'inherit' \| ((angle: number) => 'start' \| 'end' \| 'middle' \| 'inherit' \| undefined)`                                                                                                                                                                                                                                                                                                                           | -              | The labels text anchor or a function returning the text anchor for a given axis angle (in degree).                                                                                       |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | A CSS class name applied to the root element.                                                                                                                                            |
+
+### RadarAxisHighlight
+
+**RadarAxisHighlight Props:**
+
+| Prop      | Type                                                                                                        | Default | Description                                             |
+| :-------- | :---------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| classes   | `Partial<LegendItemParams<RadarClasses, 'axisHighlightRoot' \| 'axisHighlightLine' \| 'axisHighlightDot'>>` | -       | Override or extend the styles applied to the component. |
+| className | `string`                                                                                                    | -       | A CSS class name applied to the root element.           |
+
+### RadarChart
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarChartPro
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                          | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                 | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                                                                                                                                                                                                                      | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                                                                                                                                                                                                                | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                        | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                                                                                                                                                                                                             | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                   | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                              | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                 | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                                                                                                                                                                                                                     | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                                                                                                                                                                                                                      | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                        | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'radar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartPolarAxisSignature>, ChartPlugin<UseChartHighlightSignature<'radar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>, ChartPlugin<UseChartProExportSignature>]` | -                                                                                      | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*                   | `RadarConfig`                                                                                                                                                                                                                                                                                                                                 | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                                                                                                                                                                                                                     | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                                                                                                                                                                                                                   | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                                                                                                                                                                                                       | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                     | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                     | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartProSlotProps`                                                                                                                                                                                                                                                                                                                      | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartProSlots`                                                                                                                                                                                                                                                                                                                          | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                                                                                                                                                                                                         | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                              | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                           | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                             | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                      | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarDataProvider
+
+**RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### RadarGrid
+
+**RadarGrid Props:**
+
+| Prop        | Type                                  | Default                                                                                | Description                                               |
+| :---------- | :------------------------------------ | :------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
+| divisions   | `number`                              | `5`                                                                                    | The number of divisions in the radar grid.                |
+| shape       | `'sharp' \| 'circular'`               | `'sharp'`                                                                              | The grid shape.                                           |
+| stripeColor | `((index: number) => string) \| null` | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes |
+
+### RadarMetricLabels
+
+### RadarSeriesArea
+
+**RadarSeriesArea Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesMarks
+
+**RadarSeriesMarks Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesPlot
+
+**RadarSeriesPlot Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onAreaClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| onMarkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### rainbowSurgePalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### redPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Scatter
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [Scatter API](https://mui.com/x/api/charts/scatter/)
+
+**Scatter Props:**
+
+| Prop          | Type                                                                                                        | Default | Description                                                                                                                                                                                                                                    |
+| :------------ | :---------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes       | `Partial<ScatterClasses>`                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| color\*       | `string`                                                                                                    | -       | -                                                                                                                                                                                                                                              |
+| colorGetter\* | `((dataIndex?: number) => string)`                                                                          | -       | Function to get the color of a scatter item given its data index.&#xA;The data index argument is optional. If not provided, the color for the entire series is returned.&#xA;If provided, the color for the specific scatter item is returned. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -       | Callback fired when clicking on a scatter item.                                                                                                                                                                                                |
+| series\*      | `DefaultizedScatterSeriesType`                                                                              | -       | -                                                                                                                                                                                                                                              |
+| slotProps     | `ScatterSlotProps`                                                                                          | -       | -                                                                                                                                                                                                                                              |
+| slots         | `ScatterSlots`                                                                                              | -       | -                                                                                                                                                                                                                                              |
+| xScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| yScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+
+### ScatterChart
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterChartPro
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChartPro Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `LegendItemParams<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'scatter'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>, ChartPlugin<UseChartHighlightSignature<'scatter'>>, ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>, ChartPlugin<UseChartClosestPointSignature>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                               | -                          | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartProSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartProSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                          | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterMarker
+
+**ScatterMarker Props:**
+
+| Prop            | Type                                                          | Default | Description                                     |
+| :-------------- | :------------------------------------------------------------ | :------ | :---------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGElement, MouseEvent>) => void)` | -       | Callback fired when clicking on a scatter item. |
+| color\*         | `string`                                                      | -       | The fill color of the marker.                   |
+| dataIndex\*     | `number`                                                      | -       | The index of the data point.                    |
+| isFaded\*       | `boolean`                                                     | -       | If `true`, the marker is faded.                 |
+| isHighlighted\* | `boolean`                                                     | -       | If `true`, the marker is highlighted.           |
+| seriesId\*      | `string`                                                      | -       | The series ID.                                  |
+| size\*          | `number`                                                      | -       | The size of the marker.                         |
+| x\*             | `number`                                                      | -       | The x coordinate of the data point.             |
+| y\*             | `number`                                                      | -       | The y coordinate of the data point.             |
+
+### ScatterPlot
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+
+**ScatterPlot Props:**
+
+| Prop        | Type                                                                                                        | Default        | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------- | :---------------------------------------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classes     | `Partial<ScatterClasses>`                                                                                   | -              | -                                                                                                                                                                                                                                                                                                                                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -              | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| renderer    | `RendererType`                                                                                              | `'svg-single'` | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| slotProps   | `ScatterPlotSlotProps`                                                                                      | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots       | `ScatterPlotSlots`                                                                                          | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| className   | `string`                                                                                                    | -              | -                                                                                                                                                                                                                                                                                                                                     |
+
+### SparkLineChart
+
+Demos:
+
+- [SparkLine](https://mui.com/x/react-charts/sparkline/)
+
+API:
+
+- [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+
+**SparkLineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                                                               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| area                      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | Set to `true` to fill spark line area.&#xA;Has no effect if plotType='bar'.                                                                                                                                                                                                                                                           |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| baseline                  | `number \| 'min' \| 'max'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `0`                                                                   | The value of the line at the base of the series area. `'min'` the area will fill the space **under** the line.`'max'` the area will fill the space **above** the line.`number` the area will fill the space between this value and the line                                                                                           |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| clipAreaOffset            | `{ top?: number; right?: number; bottom?: number; left?: number }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `{ top: 1, right: 1, bottom: 1, left: 1 }`                            | The clipped area offset in pixels. This prevents partial clipping of lines when they are drawn on the edge of the drawing area.                                                                                                                                                                                                       |
+| color                     | `ChartsColor`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `rainbowSurgePalette[0]`                                              | Color used to colorize the sparkline.                                                                                                                                                                                                                                                                                                 |
+| curve                     | `CurveType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'linear'`                                                            | -                                                                                                                                                                                                                                                                                                                                     |
+| data\*                    | `number[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | Data to plot.                                                                                                                                                                                                                                                                                                                         |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClipping           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.                                                                                                                                                                                                                        |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| { type: 'bar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'line'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'pie'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| LegendItemParams<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                                                                     | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| VisibilityIdentifier)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `5`                                                                   | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| { type?: 'heatmap'; seriesId?: string; xIndex?: number; yIndex?: number; seriesId: string; type: 'heatmap' } \| { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| { type?: 'sankey'; seriesId?: string; subType?: 'node'; nodeId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' } \| { type?: 'sankey'; seriesId?: string; subType?: 'link'; sourceId?: SankeyNodeId; targetId?: SankeyNodeId; subType: 'node' \| 'link'; seriesId: string; type: 'sankey' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| { type: 'bar'; seriesId: string; dataIndex?: number } \| { type: 'line'; seriesId: string; dataIndex?: number } \| { type: 'scatter'; seriesId: string; dataIndex?: number } \| { type: 'pie'; seriesId: string; dataIndex?: number } \| { type: 'radar'; seriesId: string; dataIndex?: number } \| { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | Callback fired when clicking close to an item.&#xA;This is only available for scatter plot for now.                                                                                                                                                                                                                                   |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| LineItemIdentifier \| ScatterItemIdentifier \| PieItemIdentifier \| RadarItemIdentifier \| HeatmapItemIdentifier \| FunnelItemIdentifier \| SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| plotType                  | `'bar' \| 'line'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'line'`                                                              | Type of plot used.                                                                                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'>; line: ChartSeriesTypeConfig<'line'>; scatter: ChartSeriesTypeConfig<'scatter'>; pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> }; radar: ChartSeriesTypeConfig<'radar'>; heatmap: ChartSeriesTypeConfig<'heatmap'>; funnel: ChartSeriesTypeConfig<'funnel'>; sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                                                                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showHighlight             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | Set to `true` to highlight the value.&#xA;With line, it shows a point.&#xA;With bar, it shows a highlight band.                                                                                                                                                                                                                       |
+| showTooltip               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                                               | Set to `true` to enable the tooltip in the sparkline.                                                                                                                                                                                                                                                                                 |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `SparkLineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                                                                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `SparkLineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `{}`                                                                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| LegendItemParams<BarItemIdentifier, 'type'> \| LineItemIdentifier \| LegendItemParams<LineItemIdentifier, 'type'> \| ScatterItemIdentifier \| LegendItemParams<ScatterItemIdentifier, 'type'> \| PieItemIdentifier \| LegendItemParams<PieItemIdentifier, 'type'> \| RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| HeatmapItemIdentifier \| LegendItemParams<HeatmapItemIdentifier, 'type'> \| FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| valueFormatter            | `((value: number \| null) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `(value: number \| null) => (value === null ? '' : value.toString())` | Formatter used by the tooltip.                                                                                                                                                                                                                                                                                                        |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `XAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | The xAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| yAxis                     | `YAxis`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                                     | The yAxis configuration.&#xA;Notice it is a single \[\[AxisConfig]] object, not an array of configuration.                                                                                                                                                                                                                            |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### strawberrySkyPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### Unstable_FunnelChart
+
+**Unstable_FunnelChart Props:**
+
+| Prop                      | Type                                                                                                                                                     | Default                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> \| undefined>`                                                                              | -                      | -                                                                                                                                                                                                                                                                            |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                               | -                      | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                        |
+| categoryAxis              | `CategoryAxis`                                                                                                                                           | `{ position: 'none' }` | The configuration of the category axis.                                                                                                                                                                                                                                      |
+| colors                    | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette`  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                 | -                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                                | `false`                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                | -                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                              | -                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| gap                       | `number`                                                                                                                                                 | `0`                    | The gap, in pixels, between funnel sections.                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                 | -                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                | `false`                | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'funnel'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' } \| VisibilityIdentifier<'funnel'>)[]`                     | -                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                | `false`                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                              | -                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                         | -                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                            | -                      | The function called for onClick events.&#xA;The second argument contains information about all funnel elements at the current position.                                                                                                                                      |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' })[]) => void)`                              | -                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } \| null) => void)`                                                          | -                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void)`                                                | -                      | Callback fired when a funnel item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: FunnelItemIdentifier \| null) => void)`                                                                                                  | -                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `FunnelSeries[]`                                                                                                                                         | -                      | The series to display in the funnel chart.&#xA;An array of \[\[FunnelSeries]] objects.                                                                                                                                                                                       |
+| seriesConfig              | `{ funnel: ChartSeriesTypeConfig<'funnel'> }`                                                                                                            | -                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation             | `boolean`                                                                                                                                                | -                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `FunnelChartSlotProps`                                                                                                                                   | `{}`                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `FunnelChartSlots`                                                                                                                                       | `{}`                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                         | -                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                      | -                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                 | -                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `FunnelItemIdentifier \| LegendItemParams<FunnelItemIdentifier, 'type'> \| null`                                                                         | -                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                 | -                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                 | -                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                        | -                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                 | -                      | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarChart
+
+**Unstable_RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                                   | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                            | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                   | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                               | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                              | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                               | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                            | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                               | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                              | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                                         | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| LegendItemParams<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`                      | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                              | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                            | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                       | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                          | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                              | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                         | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                               | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                                 | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                                          | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                              | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                            | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                                | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                              | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                              | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                                  | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                                      | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                                  | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                                       | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                    | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                               | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| LegendItemParams<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                               | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                               | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                      | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                               | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarDataProvider
+
+**Unstable_RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| LegendItemParams<SankeyNodeIdentifier, 'type'> \| LegendItemParams<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useAnimate
+
+Hook to customize the animation of an element.
+Animates a ref from `initialProps` to `props`.
+
+**useAnimate Parameters:**
+
+| Parameter | Type                                | Default | Description              |
+| :-------- | :---------------------------------- | :------ | :----------------------- |
+| props     | `{}`                                | -       | The props to animate to. |
+| \_\_1     | `UseAnimateParams<{}, Element, {}>` | -       | -                        |
+
+**useAnimate Return Value:**
+
+an object containing a ref that should be passed to the element to animate and the transformed props.
+If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+`initialProps`.
+
+The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+
+When an animation starts, an interpolator is created using `createInterpolator`.
+On every animation frame:
+
+1. The interpolator is called to get the interpolated props;
+2. `transformProps` is called to transform the interpolated props;
+3. `applyProps` is called to apply the transformed props to the element.
+
+If `props` change while an animation is progress, the animation will continue towards the new `props`.
+
+The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+started and `applyProps` will not be called.
+
+```tsx
+type ReturnValue = UseAnimateReturn<Element, {}>;
+```
+
+### useAnimateArea
+
+Animates an area of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateArea Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateAreaParams` | -       | -           |
+
+**useAnimateArea Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedAreaReturn;
+```
+
+### useAnimateBar
+
+Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+final position.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBar Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| props     | `UseAnimateBarParams` | -       | -           |
+
+**useAnimateBar Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarReturnValue;
+```
+
+### useAnimateBarLabel
+
+Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+center of the bar it belongs to.
+The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+horizontally.
+
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateBarLabel Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| props     | `UseAnimateBarLabelParams` | -       | -           |
+
+**useAnimateBarLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimateBarLabelReturn;
+```
+
+### useAnimateLine
+
+Animates a line of a line chart using a `path` element.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimateLine Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| props     | `UseAnimateLineParams` | -       | -           |
+
+**useAnimateLine Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatedReturnValue;
+```
+
+### useAnimatePieArc
+
+Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArc Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcParams` | -       | -           |
+
+**useAnimatePieArc Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcReturnValue;
+```
+
+### useAnimatePieArcLabel
+
+Animates the label of pie slice from its middle point to the centroid of the slice.
+The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+
+**useAnimatePieArcLabel Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| props     | `UseAnimatePieArcLabelParams` | -       | -           |
+
+**useAnimatePieArcLabel Return Value:**
+
+```tsx
+type ReturnValue = UseAnimatePieArcLabelReturn;
+```
+
+### useAxesTooltip
+
+Returns the axes to display in the tooltip and the series item related to them.
+
+**useAxesTooltip Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| params    | `UseAxesTooltipParams` | -       | -           |
+
+**useAxesTooltip Return Value:**
+
+```tsx
+type ReturnValue =
+  | UseAxesTooltipReturnValue<
+      'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel',
+      string | number | Date
+    >[]
+  | null;
+```
+
+### useBarSeries
+
+Get access to the internal state of bar series.
+
+**useBarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useBarSeries Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'bar';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      stackOffset?: StackOffsetType;
+      barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+      barLabelPlacement?: 'center' | 'outside';
+      stack?: string;
+      stackOrder?: StackOrderType;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      layout: 'horizontal' | 'vertical';
+      minBarSize: number;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useBarSeriesContext
+
+Get access to the internal state of bar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useBarSeriesContext Return Value:**
+
+the bar series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'bar'> | undefined;
+```
+
+### useBrush
+
+Get the current brush state.
+
+- `start` is the starting point of the brush selection.
+- `current` is the current point of the brush selection.
+
+**useBrush Return Value:**
+
+`{ start, current }` - The brush state.
+
+```tsx
+type ReturnValue = { start: { x: number; y: number }; current: { x: number; y: number } } | null;
+```
+
+### useChartApiContext
+
+The `useChartApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProvider` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<Partial<{}>>;
+```
+
+### useChartCartesianAxis
+
+**useChartCartesianAxis Parameters:**
+
+| Parameter | Type                                                      | Default | Description |
+| :-------- | :-------------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartCartesianAxisSignature<any>>` | -       | -           |
+
+**useChartCartesianAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartCartesianAxisSignature<any>>;
+```
+
+### useChartClosestPoint
+
+**useChartClosestPoint Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartClosestPointSignature>` | -       | -           |
+
+**useChartClosestPoint Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartClosestPointSignature>;
+```
+
+### useChartGradientId
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+
+**useChartGradientId Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientId Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartGradientIdObjectBound
+
+Returns a gradient id for the given axis id.
+
+Can be useful when reusing the same gradient on custom components.
+
+This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+
+**useChartGradientIdObjectBound Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| axisId    | `AxisId` | -       | the axis id |
+
+**useChartGradientIdObjectBound Return Value:**
+
+the gradient id
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChartHighlight
+
+**useChartHighlight Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartHighlightSignature<any>>` | -       | -           |
+
+**useChartHighlight Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartHighlightSignature<any>>;
+```
+
+### useChartId
+
+Get the unique identifier of the chart.
+
+**useChartId Return Value:**
+
+chartId if it exists.
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### useChartInteraction
+
+**useChartInteraction Parameters:**
+
+| Parameter | Type                                               | Default | Description |
+| :-------- | :------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartInteractionSignature>` | -       | -           |
+
+**useChartInteraction Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartInteractionSignature>;
+```
+
+### useChartPolarAxis
+
+**useChartPolarAxis Parameters:**
+
+| Parameter | Type                                                  | Default | Description |
+| :-------- | :---------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartPolarAxisSignature<any>>` | -       | -           |
+
+**useChartPolarAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartPolarAxisSignature<any>>;
+```
+
+### useChartProApiContext
+
+The `useChartProApiContext` hook provides access to the chart API.
+This is only available when the chart is rendered within a chart or a `ChartsDataProviderPro` component.
+If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+
+**useChartProApiContext Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<ChartProApi>;
+```
+
+### useChartProApiRef
+
+Hook that instantiates a \[\[ChartProApiRef]].
+The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+
+**useChartProApiRef Return Value:**
+
+```tsx
+type ReturnValue = React.RefObject<
+  | ChartProApi<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+      | 'composition',
+      ChartAnyPluginSignature[]
+    >
+  | undefined
+>;
+```
+
+### useChartProExport
+
+**useChartProExport Parameters:**
+
+| Parameter | Type                                             | Default | Description |
+| :-------- | :----------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProExportSignature>` | -       | -           |
+
+**useChartProExport Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProExportSignature>;
+```
+
+### useChartProZoom
+
+**useChartProZoom Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartProZoomSignature>` | -       | -           |
+
+**useChartProZoom Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartProZoomSignature>;
+```
+
+### useChartRootRef
+
+Get the ref for the root chart element.
+
+**useChartRootRef Return Value:**
+
+The root chart element ref.
+
+```tsx
+type ReturnValue = React.RefObject<Element | null>;
+```
+
+### useChartsLayerContainerRef
+
+Get the ref for the chart surface element.
+
+**useChartsLayerContainerRef Return Value:**
+
+The chart surface ref.
+
+```tsx
+type ReturnValue = React.RefObject<HTMLDivElement | null>;
+```
+
+### useChartsLocalization
+
+**useChartsLocalization Return Value:**
+
+```tsx
+type ReturnValue = ChartsLocalizationContextValue;
+```
+
+### useChartTooltip
+
+**useChartTooltip Parameters:**
+
+| Parameter | Type                                                | Default | Description |
+| :-------- | :-------------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartTooltipSignature<any>>` | -       | -           |
+
+**useChartTooltip Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartTooltipSignature<any>>;
+```
+
+### useChartVisibilityManager
+
+**useChartVisibilityManager Parameters:**
+
+| Parameter | Type                                                          | Default | Description |
+| :-------- | :------------------------------------------------------------ | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartVisibilityManagerSignature<any>>` | -       | -           |
+
+**useChartVisibilityManager Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartVisibilityManagerSignature<any>>;
+```
+
+### useChartZAxis
+
+**useChartZAxis Parameters:**
+
+| Parameter | Type                                         | Default | Description |
+| :-------- | :------------------------------------------- | :------ | :---------- |
+| options   | `ChartPluginOptions<UseChartZAxisSignature>` | -       | -           |
+
+**useChartZAxis Return Value:**
+
+```tsx
+type ReturnValue = ChartResponse<UseChartZAxisSignature>;
+```
+
+### useDataset
+
+Get access to the dataset used to populate series and axes data.
+
+**useDataset Return Value:**
+
+The dataset array if provided, otherwise undefined.
+
+```tsx
+type ReturnValue = Readonly<DatasetElementType<unknown>[]> | undefined;
+```
+
+### useDrawingArea
+
+Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
+
+It includes the left, top, width, height, bottom, and right dimensions.
+
+**useDrawingArea Return Value:**
+
+The drawing area dimensions.
+
+```tsx
+type ReturnValue = ChartDrawingArea;
+```
+
+### useFocusedItem
+
+Get the focused item from keyboard navigation.
+
+**useFocusedItem Return Value:**
+
+```tsx
+type ReturnValue = FocusedItemIdentifier | null;
+```
+
+### useFunnelSeries
+
+Get access to the internal state of funnel series.
+
+**useFunnelSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useFunnelSeries Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue = DefaultizedFunnelSeriesType | undefined;
+```
+
+### useFunnelSeriesContext
+
+Get access to the internal state of funnel series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useFunnelSeriesContext Return Value:**
+
+the funnel series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useGaugeState
+
+**useGaugeState Return Value:**
+
+```tsx
+type ReturnValue = {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  cx: number;
+  cy: number;
+  maxRadius: number;
+  valueAngle: number | null;
+};
+```
+
+### useHeatmapSeries
+
+Get access to the internal state of heatmap series.
+
+**useHeatmapSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useHeatmapSeries Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue = DefaultizedHeatmapSeriesType | undefined;
+```
+
+### useHeatmapSeriesContext
+
+Get access to the internal state of heatmap series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useHeatmapSeriesContext Return Value:**
+
+the heatmap series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useIsZoomInteracting
+
+Get access to the zoom state.
+
+**useIsZoomInteracting Return Value:**
+
+Inform the zoom is interacting.
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### useItemHighlightState
+
+A hook to check the highlighted state of the item.
+This function already calculates that an item is not faded if it is highlighted.
+
+If you need fine control over the state, use the `useItemHighlightStateGetter` hook instead.
+
+**useItemHighlightState Parameters:**
+
+| Parameter | Type                                                                                                              | Default | Description          |
+| :-------- | :---------------------------------------------------------------------------------------------------------------- | :------ | :------------------- |
+| item      | `UseItemHighlightedParams<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>` | -       | is the item to check |
+
+**useItemHighlightState Return Value:**
+
+the state of the item
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useItemHighlightStateGetter
+
+A hook to get a callback that returns the highlight state of an item.
+
+If you're interested by a single item, consider using `useItemHighlightState`.
+
+**useItemHighlightStateGetter Return Value:**
+
+callback to get the highlight state of an item.
+
+```tsx
+type ReturnValue = (item: any | null) => HighlightState;
+```
+
+### useItemTooltip
+
+Returns a config object when the tooltip contains a single item to display.
+Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+
+**useItemTooltip Return Value:**
+
+The tooltip item config
+
+```tsx
+type ReturnValue = UseItemTooltipReturnValue<
+  'bar' | 'line' | 'scatter' | 'pie' | 'heatmap' | 'funnel' | 'sankey'
+> | null;
+```
+
+### useLegend
+
+Get the legend items to display.
+
+This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+
+An alternative is to use the `useSeries` hook and format the legend items yourself.
+
+**useLegend Return Value:**
+
+legend data
+
+| Property | Type                       | Description |
+| :------- | :------------------------- | :---------- |
+| items    | `SeriesLegendItemParams[]` | -           |
+
+### useLineSeries
+
+Get access to the internal state of line series.
+
+**useLineSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useLineSeries Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue =
+  | {
+      hidden: boolean;
+      dataKey?: string;
+      valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+      type: 'line';
+      colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+      highlightScope?: HighlightScope<
+        'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+      >;
+      labelMarkType?: ChartsLabelMarkType;
+      label?: string | ((location: 'tooltip' | 'legend') => string);
+      xAxisId?: AxisId;
+      yAxisId?: AxisId;
+      baseline?: number | 'min' | 'max';
+      stackOffset?: StackOffsetType;
+      stack?: string;
+      stackOrder?: StackOrderType;
+      area?: boolean;
+      curve?: CurveType;
+      strictStepCurve?: boolean;
+      showMark?: boolean | ((params: ShowMarkParams) => boolean);
+      shape?: MarkShape;
+      disableHighlight?: boolean;
+      connectNulls?: boolean;
+      id: string;
+      data: (number | null)[];
+      valueFormatter: SeriesValueFormatter<number | null>;
+      color: string;
+      visibleStackedData: [number, number][];
+      stackedData: [number, number][];
+    }
+  | undefined;
+```
+
+### useLineSeriesContext
+
+Get access to the internal state of line series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+- stackingGroups: the array of stacking groups. Each group contains the series ids stacked and the strategy to use.
+
+**useLineSeriesContext Return Value:**
+
+the line series
+
+```tsx
+type ReturnValue = SeriesProcessorResult<'line'> | undefined;
+```
+
+### usePieSeries
+
+Get access to the internal state of pie series.
+
+**usePieSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**usePieSeries Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue = DefaultizedPieSeriesType | undefined;
+```
+
+### usePieSeriesContext
+
+Get access to the internal state of pie series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**usePieSeriesContext Return Value:**
+
+the pie series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadarAxis
+
+Returns an array with one item per metric with the different points to label.
+
+**useRadarAxis Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| params    | `UseRadarAxisParams` | -       | -           |
+
+**useRadarAxis Return Value:**
+
+```tsx
+type ReturnValue = {
+  metric: string;
+  angle: number;
+  center: { x: number; y: number };
+  labels: { x: number; y: number; value: number | Date; formattedValue: string }[];
+} | null;
+```
+
+### useRadarItemTooltip
+
+Contains an object per value with their content and the label of the associated metric.
+
+**useRadarItemTooltip Return Value:**
+
+The tooltip item configs
+
+```tsx
+type ReturnValue = UseRadarItemTooltipReturnValue | null;
+```
+
+### useRadarSeries
+
+Get access to the internal state of radar series.
+
+**useRadarSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useRadarSeries Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue = DefaultizedRadarSeriesType | undefined;
+```
+
+### useRadarSeriesContext
+
+Get access to the internal state of radar series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useRadarSeriesContext Return Value:**
+
+the radar series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useRadiusAxes
+
+Get all the radius axes for polar charts.
+
+Returns all radial axes configured in polar charts along with their IDs.
+Radius axes are used in charts like `RadarChart` to define radial positioning and scaling.
+
+**useRadiusAxes Return Value:**
+
+An object containing:
+
+- `radiusAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `radiusAxisIds`: An array of all radius axis IDs in the chart
+
+| Property      | Type                                           | Description |
+| :------------ | :--------------------------------------------- | :---------- |
+| radiusAxis    | `DefaultizedAxisConfig<ChartsRadiusAxisProps>` | -           |
+| radiusAxisIds | `string[]`                                     | -           |
+
+### useRadiusAxis
+
+Get a specific radius axis or the default radius axis for polar charts.
+
+Returns the configuration and scale for a radial axis in polar charts.
+The radius axis controls the radial distance of data points from the center of the circle.
+
+**useRadiusAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                           |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's radius axis configurationUndefined to get the default (first) radius axis |
+
+**useRadiusAxis Return Value:**
+
+The radius axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRadiusAxisProps
+    >
+  | undefined;
+```
+
+### useRadiusScale
+
+Get the radius scale.
+
+**useRadiusScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                           |
+| :-------- | :----------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `radiusAxis` propUndefined to get the default radius axis |
+
+**useRadiusScale Return Value:**
+
+The radius axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useRotationAxes
+
+Get all the rotation axes for polar charts.
+
+Returns all rotation axes configured in polar charts along with their IDs.
+Rotation axes are used in charts like `RadarChart` to define angular positioning.
+
+**useRotationAxes Return Value:**
+
+An object containing:
+
+- `rotationAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `rotationAxisIds`: An array of all rotation axis IDs in the chart
+
+| Property        | Type                                             | Description |
+| :-------------- | :----------------------------------------------- | :---------- |
+| rotationAxis    | `DefaultizedAxisConfig<ChartsRotationAxisProps>` | -           |
+| rotationAxisIds | `string[]`                                       | -           |
+
+### useRotationAxis
+
+Get a specific rotation axis or the default rotation axis for polar charts.
+
+Returns the configuration and scale for a rotation axis in polar charts.
+The rotation axis controls the angular positioning of data points around the circle.
+
+**useRotationAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                                               |
+| :-------- | :------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's rotation axis configurationUndefined to get the default (first) rotation axis |
+
+**useRotationAxis Return Value:**
+
+The rotation axis configuration, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | PolarAxisDefaultized<
+      'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+      any,
+      ChartsRotationAxisProps
+    >
+  | undefined;
+```
+
+### useRotationScale
+
+Get the rotation scale.
+
+**useRotationScale Parameters:**
+
+| Parameter | Type               | Default | Description                                                                                                                                               |
+| :-------- | :----------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `number \| string` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `rotationAxis` propUndefined to get the default rotation axis |
+
+**useRotationScale Return Value:**
+
+The rotation axis scale, or undefined if not found
+
+```tsx
+type ReturnValue =
+  | (
+      | ((value: NumberValue) => number | undefined)
+      | ((value: Date | NumberValue) => number | undefined)
+    )
+  | undefined;
+```
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useScatterSeries
+
+Get access to the internal state of scatter series.
+
+**useScatterSeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useScatterSeries Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue = DefaultizedScatterSeriesType | undefined;
+```
+
+### useScatterSeriesContext
+
+Get access to the internal state of scatter series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useScatterSeriesContext Return Value:**
+
+the scatter series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+### useSeries
+
+Get access to the internal state of series.
+Structured by type of series:
+{ seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: \[id1, ...] } }
+
+**useSeries Return Value:**
+
+FormattedSeries series
+
+```tsx
+type ReturnValue = ProcessedSeries;
+```
+
+### useXAxes
+
+Get all the x-axes.
+
+Returns all X axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useXAxes Return Value:**
+
+An object containing:
+
+- `xAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `xAxisIds`: An array of all X axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| xAxis    | `ComputedAxisConfig<ChartsXAxisProps>` | -           |
+| xAxisIds | `AxisId[]`                             | -           |
+
+### useXAxis
+
+Get a specific X axis or the default X axis.
+
+**useXAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXAxis Return Value:**
+
+The configuration for a single X axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsXAxisProps
+>;
+```
+
+### useXAxisCoordinates
+
+Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+
+**useXAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisCoordinates Return Value:**
+
+The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useXAxisTicks
+
+Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useXAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the X axis. |
+
+**useXAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useXColorScale
+
+Get the X axis color scale.
+
+**useXColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useXColorScale Return Value:**
+
+The color scale for the specified X axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useXScale
+
+Get the X scale.
+
+**useXScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `xAxis` propUndefined to get the default (first) X axis |
+
+**useXScale Return Value:**
+
+The X axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useYAxes
+
+Get all the y-axes.
+
+Returns all Y axes configured in the chart along with their IDs.
+This is useful when you need to iterate over multiple axes or access all axis configurations at once.
+
+**useYAxes Return Value:**
+
+An object containing:
+
+- `yAxis`: An object mapping axis IDs to their configurations `{ [axisId]: axis }`
+- `yAxisIds`: An array of all Y axis IDs in the chart
+
+| Property | Type                                   | Description |
+| :------- | :------------------------------------- | :---------- |
+| yAxis    | `ComputedAxisConfig<ChartsYAxisProps>` | -           |
+| yAxisIds | `AxisId[]`                             | -           |
+
+### useYAxis
+
+Get a specific Y axis or the default Y axis.
+
+**useYAxis Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYAxis Return Value:**
+
+The configuration for a single Y axis.
+
+```tsx
+type ReturnValue = ComputedAxis<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  any,
+  ChartsYAxisProps
+>;
+```
+
+### useYAxisCoordinates
+
+Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+
+**useYAxisCoordinates Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisCoordinates Return Value:**
+
+The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+
+```tsx
+type ReturnValue = AxisCoordinates | null;
+```
+
+### useYAxisTicks
+
+Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+
+**useYAxisTicks Parameters:**
+
+| Parameter | Type     | Default | Description           |
+| :-------- | :------- | :------ | :-------------------- |
+| axisId    | `AxisId` | -       | The id of the Y axis. |
+
+**useYAxisTicks Return Value:**
+
+```tsx
+type ReturnValue = TickItem[];
+```
+
+### useYColorScale
+
+Get the Y axis color scale.
+
+**useYColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useYColorScale Return Value:**
+
+The color scale for the specified Y axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### useYScale
+
+Get the Y scale.
+
+**useYScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                                                                                         |
+| :-------- | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | The axis identifier. Can be: A string or number matching the axis ID defined in the chart's `yAxis` propUndefined to get the default (first) Y axis |
+
+**useYScale Return Value:**
+
+The Y axis scale
+
+```tsx
+type ReturnValue =
+  | ((value: NumberValue) => number | undefined)
+  | ((value: Date | NumberValue) => number | undefined);
+```
+
+### useZAxes
+
+**useZAxes Return Value:**
+
+| Property | Type                     | Description |
+| :------- | :----------------------- | :---------- |
+| zAxis    | `DefaultizedZAxisConfig` | -           |
+| zAxisIds | `AxisId[]`               | -           |
+
+### useZAxis
+
+**useZAxis Parameters:**
+
+| Parameter  | Type               | Default | Description |
+| :--------- | :----------------- | :------ | :---------- |
+| identifier | `number \| string` | -       | -           |
+
+**useZAxis Return Value:**
+
+```tsx
+type ReturnValue = ZAxisDefaultized;
+```
+
+### useZColorScale
+
+Get the Z axis color scale.
+
+**useZColorScale Parameters:**
+
+| Parameter | Type     | Default | Description                                                                               |
+| :-------- | :------- | :------ | :---------------------------------------------------------------------------------------- |
+| axisId    | `AxisId` | -       | If provided returns color scale for axisId, else returns the values for the default axis. |
+
+**useZColorScale Return Value:**
+
+The color scale for the specified Z axis, or undefined if not found.
+
+```tsx
+type ReturnValue =
+  | ScaleOrdinal<string | number | Date, string, string | null>
+  | ScaleOrdinal<number, string, string | null>
+  | ScaleSequential<string, string | null>
+  | ScaleThreshold<number | Date, string | null, never>
+  | ScaleThreshold<number, string | null, never>
+  | undefined;
+```
+
+### yellowPalette
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| mode      | `'light' \| 'dark'` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+## Additional Types
+
+### AllSeriesType
+
+```typescript
+type AllSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | MakeOptional<PieValueType, 'id'>[]
+    | number[]
+    | FunnelValueType[]
+    | SankeyData;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<MakeOptional<PieValueType, 'id'>>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null);
+  /** The id of this series. */
+  id?: SeriesId;
+};
+```
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AXIS_LABEL_DEFAULT_HEIGHT
+
+```typescript
+type AXIS_LABEL_DEFAULT_HEIGHT = 20;
+```
+
+### axisClasses
+
+```typescript
+type axisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### AxisConfig
+
+Use this type for advanced typing. For basic usage, use `XAxis`, `YAxis`, `RotationAxis` or `RadiusAxis`.
+
+```typescript
+type AxisConfig<S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear', V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = { offset?: number } & CommonAxisConfig<S, V> & { min?: NumberValue; max?: NumberValue } | {} & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<{ scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear'; scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>; colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig }, 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension
+```
+
+### AxisCoordinates
+
+```typescript
+type AxisCoordinates = { left: number; top: number; right: number; bottom: number };
+```
+
+### AxisItemIdentifier
+
+Identifies a data point within an axis.
+
+```typescript
+type AxisItemIdentifier = {
+  /** The axis id. */
+  axisId: AxisId;
+  /** The data index. */
+  dataIndex: number;
+};
+```
+
+### AxisValueFormatterContext
+
+```typescript
+type AxisValueFormatterContext<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+> =
+  | { location: 'legend' }
+  | {
+      location: 'tooltip' | 'zoom-slider-tooltip';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+    }
+  | {
+      location: 'tick';
+      scale:
+        | ((value: NumberValue) => number | undefined)
+        | ((value: Date | NumberValue) => number | undefined);
+      defaultTickLabel: string;
+      tickNumber?: number;
+    };
+```
+
+### BAR_CHART_PLUGINS
+
+```typescript
+type BAR_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### BAR_CHART_PRO_PLUGINS
+
+```typescript
+type BAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartPluginSignatures
+
+```typescript
+type BarChartPluginSignatures = BarChartPluginSignatures;
+```
+
+### BarChartProPluginSignatures
+
+```typescript
+type BarChartProPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartProProps
+
+````typescript
+type BarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartProps
+
+````typescript
+type BarChartProps = {
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] objects.
+   */
+  series: BarSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartSlotProps;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### BarChartProSlotProps
+
+```typescript
+type BarChartProSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartProSlots
+
+```typescript
+type BarChartProSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### BarChartSlotProps
+
+```typescript
+type BarChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### BarChartSlots
+
+```typescript
+type BarChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### barClasses
+
+```typescript
+type barClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClasses
+
+```typescript
+type BarClasses = {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
+};
+```
+
+### BarClassKey
+
+```typescript
+type BarClassKey = 'label' | 'root' | 'series' | 'element' | 'seriesLabels' | 'labelAnimate';
+```
+
+### BarElementProps
+
+```typescript
+type BarElementProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  classes?: Partial<BarClasses>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarElementSlots;
+  x: number;
+  xOrigin: number;
+  y: number;
+  yOrigin: number;
+  width: number;
+  height: number;
+  layout: 'horizontal' | 'vertical';
+  skipAnimation: boolean;
+  hidden?: boolean;
+};
+```
+
+### BarElementSlotProps
+
+```typescript
+type BarElementSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+};
+```
+
+### BarElementSlots
+
+```typescript
+type BarElementSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+};
+```
+
+### BarItem
+
+```typescript
+type BarItem = {
+  /** The series id of the bar. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number | null;
+};
+```
+
+### BarItemIdentifier
+
+An object that allows to identify a single bar.
+Used for item interaction
+
+```typescript
+type BarItemIdentifier = { type: 'bar'; seriesId: string; dataIndex: number };
+```
+
+### BarLabelContext
+
+```typescript
+type BarLabelContext = {
+  bar: {
+    /**
+     * The height of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    height: number;
+    /**
+     * The width of the bar.
+     * It could be used to control the label based on the bar size.
+     */
+    width: number;
+  };
+};
+```
+
+### BarLabelOwnerState
+
+```typescript
+type BarLabelOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+};
+```
+
+### BarLabelProps
+
+```typescript
+type BarLabelProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  layout: 'vertical' | 'horizontal';
+  classes?: Partial<BarClasses>;
+  /** The x-coordinate of the stack this bar label belongs to. */
+  xOrigin: number;
+  /** The y-coordinate of the stack this bar label belongs to. */
+  yOrigin: number;
+  /** Position in the x-axis of the bar this label belongs to. */
+  x: number;
+  /** Position in the y-axis of the bar this label belongs to. */
+  y: number;
+  /** Width of the bar this label belongs to. */
+  width: number;
+  /** Height of the bar this label belongs to. */
+  height: number;
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
+};
+```
+
+### BarLabelSlotProps
+
+```typescript
+type BarLabelSlotProps = {
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarLabelSlots
+
+```typescript
+type BarLabelSlots = {
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarPlotProps
+
+```typescript
+type BarPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: onItemClick;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotSlots;
+};
+```
+
+### BarPlotSlotProps
+
+```typescript
+type BarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### BarPlotSlots
+
+```typescript
+type BarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### BarProps
+
+```typescript
+type BarProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  ownerState: BarElementOwnerState;
+  /** The position in the x-axis of the stack this bar belongs to. */
+  xOrigin: number;
+  /** The position in the y-axis of the stack this bar belongs to. */
+  yOrigin: number;
+  /** The position of the bar in the x-axis. */
+  x: number;
+  /** The position of the bar in the y-axis. */
+  y: number;
+  /** The height of the bar. */
+  height: number;
+  /** The width of the bar. */
+  width: number;
+  /** The orientation of the bar. */
+  layout: 'vertical' | 'horizontal';
+  /** If true, no animations should be applied. */
+  skipAnimation: boolean;
+};
+```
+
+### BarSeries
+
+```typescript
+type BarSeries = MakeOptional<BarSeriesType, 'type'>;
+```
+
+### BarSeriesType
+
+```typescript
+type BarSeriesType = {
+  type: 'bar';
+  /** Data associated to each bar. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize?: number;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### BarValueType
+
+```typescript
+type BarValueType = number;
+```
+
+### blueberryTwilightPaletteDark
+
+```typescript
+type blueberryTwilightPaletteDark = string[];
+```
+
+### blueberryTwilightPaletteLight
+
+```typescript
+type blueberryTwilightPaletteLight = string[];
+```
+
+### bluePaletteDark
+
+```typescript
+type bluePaletteDark = string[];
+```
+
+### bluePaletteLight
+
+```typescript
+type bluePaletteLight = string[];
+```
+
+### brushOverlayClasses
+
+```typescript
+type brushOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+};
+```
+
+### BrushOverlayClasses
+
+```typescript
+type BrushOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+};
+```
+
+### BrushOverlayClassKey
+
+```typescript
+type BrushOverlayClassKey = 'x' | 'y' | 'root' | 'rect';
+```
+
+### CartesianChartSeriesType
+
+```typescript
+type CartesianChartSeriesType = 'bar' | 'line' | 'scatter' | 'heatmap' | 'funnel';
+```
+
+### CategoryAxis
+
+```typescript
+type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = {
+  /**
+   * The categories to be displayed on the axis.
+   * The order of the categories is the order in which they are displayed.
+   */
+  categories?: string[];
+  /**
+   * The position of the axis.
+   * - 'left' - The axis is positioned on the left side of the chart.
+   * - 'right' - The axis is positioned on the right side of the chart.
+   * - 'top' - The axis is positioned on the top side of the chart.
+   * - 'bottom' - The axis is positioned on the bottom side of the chart.
+   * - 'none' - The axis is not displayed.
+   */
+  position?: 'left' | 'right' | 'top' | 'bottom' | 'none';
+  /**
+   * The size of the axis.
+   * - If the axis is horizontal, the size is the height of the axis.
+   * - If the axis is vertical, the size is the width of the axis.
+   * - If set to `'auto'`, the size is automatically calculated based on tick label measurements.
+   */
+  size?: number | 'auto';
+  scaleType?: 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### ChartApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartApi<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'composition' | undefined = undefined,
+  TSignatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### chartAxisZoomSliderThumbClasses
+
+```typescript
+type chartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClasses
+
+```typescript
+type ChartAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartAxisZoomSliderTrackClasses
+
+```typescript
+type chartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClasses
+
+```typescript
+type ChartAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartBaseButtonProps
+
+```typescript
+type ChartBaseButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+```
+
+### ChartBaseCommonProps
+
+```typescript
+type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+```
+
+### ChartBaseIconButtonProps
+
+```typescript
+type ChartBaseIconButtonProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  disabled?: boolean;
+  tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
+};
+```
+
+### ChartBaseIconProps
+
+```typescript
+type ChartBaseIconProps = React.DOMAttributes<SVGSVGElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+```
+
+### ChartDrawingArea
+
+```typescript
+type ChartDrawingArea = {
+  /** The gap between the left border of the SVG and the drawing area. */
+  left: number;
+  /** The gap between the top border of the SVG and the drawing area. */
+  top: number;
+  /** The gap between the bottom border of the SVG and the drawing area. */
+  bottom: number;
+  /** The gap between the right border of the SVG and the drawing area. */
+  right: number;
+  /** The width of the drawing area. */
+  width: number;
+  /** The height of the drawing area. */
+  height: number;
+};
+```
+
+### ChartImageExportOptions
+
+The options to apply on the image export.
+
+```typescript
+type ChartImageExportOptions = {
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
+   * @default 'image/png'
+   */
+  type?: string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartPrintExportOptions
+
+The options to apply on the Print export.
+
+```typescript
+type ChartPrintExportOptions = {
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartProApi
+
+The API of the chart `apiRef` object.
+The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+
+```typescript
+type ChartProApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = any | ({} & Partial<{}>);
+```
+
+### ChartsAxisClasses
+
+```typescript
+type ChartsAxisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### ChartsAxisClassKey
+
+```typescript
+type ChartsAxisClassKey =
+  | 'line'
+  | 'label'
+  | 'tick'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'root'
+  | 'tickContainer'
+  | 'tickLabel'
+  | 'directionX'
+  | 'directionY';
+```
+
+### ChartsAxisData
+
+The data format returned by onAxisClick.
+
+```typescript
+type ChartsAxisData = {
+  /** The index in the axis' data property. */
+  dataIndex: number;
+  /** Tha value associated to the axis item. */
+  axisValue: number | Date | string;
+  /** The mapping of series ids to their value for this particular axis index. */
+  seriesValues: Record<string, number | null | undefined>;
+};
+```
+
+### chartsAxisHighlightClasses
+
+```typescript
+type chartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClasses
+
+```typescript
+type ChartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClassKey
+
+```typescript
+type ChartsAxisHighlightClassKey = 'root';
+```
+
+### ChartsAxisHighlightPath
+
+```typescript
+type ChartsAxisHighlightPath = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: { axisHighlight: ChartsAxisHighlightType } },
+  Pick<
+    React.SVGProps<SVGPathElement>,
+    | 'string'
+    | 'id'
+    | 'min'
+    | 'max'
+    | 'type'
+    | 'color'
+    | 'scale'
+    | 'className'
+    | 'offset'
+    | 'end'
+    | 'height'
+    | 'x'
+    | 'style'
+    | 'width'
+    | 'ref'
+    | 'dominantBaseline'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'media'
+    | 'method'
+    | 'name'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'target'
+    | 'role'
+    | 'tabIndex'
+    | 'crossOrigin'
+    | 'accentHeight'
+    | 'accumulate'
+    | 'additive'
+    | 'alignmentBaseline'
+    | 'allowReorder'
+    | 'alphabetic'
+    | 'amplitude'
+    | 'arabicForm'
+    | 'ascent'
+    | 'attributeName'
+    | 'attributeType'
+    | 'autoReverse'
+    | 'azimuth'
+    | 'baseFrequency'
+    | 'baselineShift'
+    | 'baseProfile'
+    | 'bbox'
+    | 'begin'
+    | 'bias'
+    | 'by'
+    | 'calcMode'
+    | 'capHeight'
+    | 'clip'
+    | 'clipPath'
+    | 'clipPathUnits'
+    | 'clipRule'
+    | 'colorInterpolation'
+    | 'colorInterpolationFilters'
+    | 'colorProfile'
+    | 'colorRendering'
+    | 'contentScriptType'
+    | 'contentStyleType'
+    | 'cursor'
+    | 'cx'
+    | 'cy'
+    | 'd'
+    | 'decelerate'
+    | 'descent'
+    | 'diffuseConstant'
+    | 'direction'
+    | 'display'
+    | 'divisor'
+    | 'dur'
+    | 'dx'
+    | 'dy'
+    | 'edgeMode'
+    | 'elevation'
+    | 'enableBackground'
+    | 'exponent'
+    | 'externalResourcesRequired'
+    | 'fill'
+    | 'fillOpacity'
+    | 'fillRule'
+    | 'filter'
+    | 'filterRes'
+    | 'filterUnits'
+    | 'floodColor'
+    | 'floodOpacity'
+    | 'focusable'
+    | 'fontFamily'
+    | 'fontSize'
+    | 'fontSizeAdjust'
+    | 'fontStretch'
+    | 'fontStyle'
+    | 'fontVariant'
+    | 'fontWeight'
+    | 'format'
+    | 'fr'
+    | 'from'
+    | 'fx'
+    | 'fy'
+    | 'g1'
+    | 'g2'
+    | 'glyphName'
+    | 'glyphOrientationHorizontal'
+    | 'glyphOrientationVertical'
+    | 'glyphRef'
+    | 'gradientTransform'
+    | 'gradientUnits'
+    | 'hanging'
+    | 'horizAdvX'
+    | 'horizOriginX'
+    | 'href'
+    | 'ideographic'
+    | 'imageRendering'
+    | 'in2'
+    | 'in'
+    | 'intercept'
+    | 'k1'
+    | 'k2'
+    | 'k3'
+    | 'k4'
+    | 'k'
+    | 'kernelMatrix'
+    | 'kernelUnitLength'
+    | 'kerning'
+    | 'keyPoints'
+    | 'keySplines'
+    | 'keyTimes'
+    | 'lengthAdjust'
+    | 'letterSpacing'
+    | 'lightingColor'
+    | 'limitingConeAngle'
+    | 'local'
+    | 'markerEnd'
+    | 'markerHeight'
+    | 'markerMid'
+    | 'markerStart'
+    | 'markerUnits'
+    | 'markerWidth'
+    | 'mask'
+    | 'maskContentUnits'
+    | 'maskUnits'
+    | 'mathematical'
+    | 'mode'
+    | 'numOctaves'
+    | 'opacity'
+    | 'operator'
+    | 'order'
+    | 'orient'
+    | 'orientation'
+    | 'origin'
+    | 'overflow'
+    | 'overlinePosition'
+    | 'overlineThickness'
+    | 'paintOrder'
+    | 'panose1'
+    | 'path'
+    | 'pathLength'
+    | 'patternContentUnits'
+    | 'patternTransform'
+    | 'patternUnits'
+    | 'pointerEvents'
+    | 'points'
+    | 'pointsAtX'
+    | 'pointsAtY'
+    | 'pointsAtZ'
+    | 'preserveAlpha'
+    | 'preserveAspectRatio'
+    | 'primitiveUnits'
+    | 'r'
+    | 'radius'
+    | 'refX'
+    | 'refY'
+    | 'renderingIntent'
+    | 'repeatCount'
+    | 'repeatDur'
+    | 'requiredExtensions'
+    | 'requiredFeatures'
+    | 'restart'
+    | 'result'
+    | 'rotate'
+    | 'rx'
+    | 'ry'
+    | 'seed'
+    | 'shapeRendering'
+    | 'slope'
+    | 'spacing'
+    | 'specularConstant'
+    | 'specularExponent'
+    | 'speed'
+    | 'spreadMethod'
+    | 'startOffset'
+    | 'stdDeviation'
+    | 'stemh'
+    | 'stemv'
+    | 'stitchTiles'
+    | 'stopColor'
+    | 'stopOpacity'
+    | 'strikethroughPosition'
+    | 'strikethroughThickness'
+    | 'stroke'
+    | 'strokeDasharray'
+    | 'strokeDashoffset'
+    | 'strokeLinecap'
+    | 'strokeLinejoin'
+    | 'strokeMiterlimit'
+    | 'strokeOpacity'
+    | 'strokeWidth'
+    | 'surfaceScale'
+    | 'systemLanguage'
+    | 'tableValues'
+    | 'targetX'
+    | 'targetY'
+    | 'textAnchor'
+    | 'textDecoration'
+    | 'textLength'
+    | 'textRendering'
+    | 'to'
+    | 'transform'
+    | 'u1'
+    | 'u2'
+    | 'underlinePosition'
+    | 'underlineThickness'
+    | 'unicode'
+    | 'unicodeBidi'
+    | 'unicodeRange'
+    | 'unitsPerEm'
+    | 'vAlphabetic'
+    | 'values'
+    | 'vectorEffect'
+    | 'version'
+    | 'vertAdvY'
+    | 'vertOriginX'
+    | 'vertOriginY'
+    | 'vHanging'
+    | 'vIdeographic'
+    | 'viewBox'
+    | 'viewTarget'
+    | 'visibility'
+    | 'vMathematical'
+    | 'widths'
+    | 'wordSpacing'
+    | 'writingMode'
+    | 'x1'
+    | 'x2'
+    | 'xChannelSelector'
+    | 'xHeight'
+    | 'xlinkActuate'
+    | 'xlinkArcrole'
+    | 'xlinkHref'
+    | 'xlinkRole'
+    | 'xlinkShow'
+    | 'xlinkTitle'
+    | 'xlinkType'
+    | 'xmlBase'
+    | 'xmlLang'
+    | 'xmlns'
+    | 'xmlnsXlink'
+    | 'xmlSpace'
+    | 'y1'
+    | 'y2'
+    | 'y'
+    | 'yChannelSelector'
+    | 'z'
+    | 'zoomAndPan'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### ChartsAxisHighlightProps
+
+```typescript
+type ChartsAxisHighlightProps = { x?: ChartsAxisHighlightType; y?: ChartsAxisHighlightType };
+```
+
+### ChartsAxisHighlightType
+
+```typescript
+type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+```
+
+### ChartsAxisProps
+
+```typescript
+type ChartsAxisProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsAxisSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsAxisSlotProps;
+};
+```
+
+### ChartsAxisSlotProps
+
+```typescript
+type ChartsAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisSlots
+
+```typescript
+type ChartsAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisTooltipContentClasses
+
+```typescript
+type ChartsAxisTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsAxisTooltipContentProps
+
+```typescript
+type ChartsAxisTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### chartsAxisZoomSliderThumbClasses
+
+```typescript
+type chartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClasses
+
+```typescript
+type ChartsAxisZoomSliderThumbClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element when it is a start thumb. */
+  start: string;
+  /** Styles applied to the root element when it is an end thumb. */
+  end: string;
+};
+```
+
+### ChartsAxisZoomSliderThumbClassKey
+
+```typescript
+type ChartsAxisZoomSliderThumbClassKey = 'start' | 'end' | 'root' | 'horizontal' | 'vertical';
+```
+
+### chartsAxisZoomSliderTrackClasses
+
+```typescript
+type chartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClasses
+
+```typescript
+type ChartsAxisZoomSliderTrackClasses = {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+};
+```
+
+### ChartsAxisZoomSliderTrackClassKey
+
+```typescript
+type ChartsAxisZoomSliderTrackClassKey = 'background' | 'horizontal' | 'vertical' | 'active';
+```
+
+### ChartsBaseSlots
+
+```typescript
+type ChartsBaseSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### ChartsBrushOverlayProps
+
+```typescript
+type ChartsBrushOverlayProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+};
+```
+
+### ChartsClipPathProps
+
+```typescript
+type ChartsClipPathProps = {
+  /** The id of the clip path. */
+  id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
+  offset?: { top?: number; right?: number; bottom?: number; left?: number };
+};
+```
+
+### ChartsColor
+
+```typescript
+type ChartsColor = string | ChartsColorCallback;
+```
+
+### ChartsColorPalette
+
+```typescript
+type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+```
+
+### ChartsContainerProProps
+
+```typescript
+type ChartsContainerProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsContainerProSlotProps
+
+```typescript
+type ChartsContainerProSlotProps = {};
+```
+
+### ChartsContainerProSlots
+
+```typescript
+type ChartsContainerProSlots = {};
+```
+
+### ChartsDataProviderProProps
+
+```typescript
+type ChartsDataProviderProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  };
+```
+
+### ChartsDataProviderProps
+
+```typescript
+type ChartsDataProviderProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartClosestPointSignature,
+    UseChartKeyboardNavigationSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  };
+```
+
+### ChartsDataProviderProSlotProps
+
+```typescript
+type ChartsDataProviderProSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderProSlots
+
+```typescript
+type ChartsDataProviderProSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ChartsDataProviderSlotProps
+
+```typescript
+type ChartsDataProviderSlotProps = {
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ChartsDataProviderSlots
+
+```typescript
+type ChartsDataProviderSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### chartsGridClasses
+
+```typescript
+type chartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClasses
+
+```typescript
+type ChartsGridClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+};
+```
+
+### ChartsGridClassKey
+
+```typescript
+type ChartsGridClassKey = 'line' | 'root' | 'horizontalLine' | 'verticalLine';
+```
+
+### ChartsGridProps
+
+```typescript
+type ChartsGridProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Displays vertical grid. */
+  vertical?: boolean;
+  /** Displays horizontal grid. */
+  horizontal?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsGridClasses>;
+};
+```
+
+### ChartsIconSlots
+
+```typescript
+type ChartsIconSlots = {};
+```
+
+### ChartsItemTooltipContentClasses
+
+```typescript
+type ChartsItemTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsItemTooltipContentProps
+
+```typescript
+type ChartsItemTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabel
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabel = unknown;
+```
+
+### ChartsLabelClasses
+
+```typescript
+type ChartsLabelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsLabelCustomMarkProps
+
+```typescript
+type ChartsLabelCustomMarkProps = {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+};
+```
+
+### ChartsLabelGradientClasses
+
+```typescript
+type ChartsLabelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### ChartsLabelMark
+
+Generates the label mark for the tooltip and legend.
+
+```typescript
+type ChartsLabelMark = unknown;
+```
+
+### ChartsLabelMarkClasses
+
+```typescript
+type ChartsLabelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### ChartsLabelMarkProps
+
+```typescript
+type ChartsLabelMarkProps = {
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type?: ChartsLabelMarkType;
+  /**
+   * The mark will be rendered as a combination of a line and the specified mark type.
+   * The line will be rendered first, followed by the mark.
+   * Only used if `type='line+mark'`.
+   */
+  markShape?: MarkShape;
+  /** The color of the mark. */
+  color?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelMarkClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLabelProps
+
+```typescript
+type ChartsLabelProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLabelClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsLegendClasses
+
+```typescript
+type ChartsLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### ChartsLegendPosition
+
+```typescript
+type ChartsLegendPosition = {
+  /**
+   * The position of the legend in relation to the chart.
+   * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+   * If customization is needed, simply use the composition pattern.
+   */
+  position?: Position;
+};
+```
+
+### ChartsLegendProps
+
+```typescript
+type ChartsLegendProps = {
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: SeriesLegendItemContext,
+    index: number,
+  ) => void;
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction?: Direction;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLegendClasses>;
+  /**
+   * If `true`, clicking on a legend item will toggle the visibility of the corresponding series.
+   * @default false
+   */
+  toggleVisibilityOnClick?: boolean;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+};
+```
+
+### ChartsLegendSlotExtension
+
+```typescript
+type ChartsLegendSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsLegendSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsLegendSlotProps;
+};
+```
+
+### ChartsLegendSlotProps
+
+```typescript
+type ChartsLegendSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+};
+```
+
+### ChartsLegendSlots
+
+```typescript
+type ChartsLegendSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+};
+```
+
+### ChartsLocalizationProviderProps
+
+```typescript
+type ChartsLocalizationProviderProps = {
+  children?: React.ReactNode;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+};
+```
+
+### ChartsOverlayProps
+
+```typescript
+type ChartsOverlayProps = {
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsOverlaySlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsOverlaySlotProps;
+};
+```
+
+### ChartsOverlaySlotProps
+
+```typescript
+type ChartsOverlaySlotProps = {
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+};
+```
+
+### ChartsOverlaySlots
+
+```typescript
+type ChartsOverlaySlots = {
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsPieSorting
+
+```typescript
+type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
+```
+
+### ChartsReferenceLineClasses
+
+```typescript
+type ChartsReferenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### ChartsReferenceLineClassKey
+
+```typescript
+type ChartsReferenceLineClassKey = 'line' | 'label' | 'root' | 'horizontal' | 'vertical';
+```
+
+### ChartsReferenceLineProps
+
+```typescript
+type ChartsReferenceLineProps = (
+  | { x?: undefined; y: string | number | Date }
+  | { y?: undefined; x: string | number | Date }
+) & {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+};
+```
+
+### chartsSurfaceClasses
+
+```typescript
+type chartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceClasses
+
+```typescript
+type ChartsSurfaceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsSurfaceProps
+
+```typescript
+type ChartsSurfaceProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+};
+```
+
+### ChartsTextProps
+
+```typescript
+type ChartsTextProps = {
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /** Text displayed. */
+  text: string;
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### ChartsTextStyle
+
+```typescript
+type ChartsTextStyle = {
+  angle?: number;
+  /**
+   * The text baseline
+   * @default 'central'
+   */
+  dominantBaseline?: ChartsTextBaseline;
+  /**
+   * The text anchor
+   * @default 'middle'
+   */
+  textAnchor?: ChartsTextAnchor;
+};
+```
+
+### ChartsToolbarImageExportOptions
+
+```typescript
+type ChartsToolbarImageExportOptions = {
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+  /**
+   * The quality of the image to be exported between 0 and 1. This is only applicable for lossy formats, such as
+   * 'image/jpeg' and 'image/webp'. 'image/png' does not support this option.
+   * @default 0.9
+   */
+  quality?: number;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * The format of the image to be exported.
+   * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
+   * @default 'image/png'
+   */
+  type: string;
+};
+```
+
+### ChartsToolbarImageExportTriggerProps
+
+```typescript
+type ChartsToolbarImageExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartsToolbarImageExportOptions;
+};
+```
+
+### ChartsToolbarPrintExportOptions
+
+```typescript
+type ChartsToolbarPrintExportOptions = {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+  /**
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
+   */
+  fileName?: string;
+  /**
+   * Callback function that is called before the export is triggered.
+   * It can be used to modify the iframe or perform any other actions before the export, such as updating styles,
+   * removing elements, etc.
+   * @returns A promise or void. If a promise is returned, the export will wait for it to resolve before proceeding.
+   */
+  onBeforeExport?: (iframe: HTMLIFrameElement) => void | Promise<void>;
+  /**
+   * If `true`, the styles of the page the chart belongs to will be copied to the export iframe.
+   * Copying styles is useful to ensure that the exported chart looks the same as it does on the page.
+   * @default true
+   */
+  copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
+};
+```
+
+### ChartsToolbarPrintExportTriggerProps
+
+```typescript
+type ChartsToolbarPrintExportTriggerProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number } & {
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLButtonElement>;
+      id?: string;
+      disabled?: boolean;
+      tabIndex?: number;
+    }
+  >;
+  options?: ChartPrintExportOptions;
+};
+```
+
+### ChartsToolbarProProps
+
+```typescript
+type ChartsToolbarProProps = {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+};
+```
+
+### ChartsToolbarProSlotProps
+
+```typescript
+type ChartsToolbarProSlotProps = {
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+};
+```
+
+### ChartsToolbarProSlots
+
+```typescript
+type ChartsToolbarProSlots = {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipCell
+
+```typescript
+type ChartsTooltipCell = StyledComponent<
+  Pick<
+    TypographyOwnProps &
+      CommonProps &
+      Omit<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+        | 'color'
+        | 'className'
+        | 'classes'
+        | 'sx'
+        | 'style'
+        | 'children'
+        | 'variant'
+        | 'align'
+        | 'gutterBottom'
+        | 'noWrap'
+        | 'variantMapping'
+      >,
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'classes'
+    | 'sx'
+    | 'style'
+    | 'ref'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'key'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'variant'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'gutterBottom'
+    | 'noWrap'
+    | 'variantMapping'
+  > &
+    MUIStyledCommonProps<Theme> & { component?: React.ElementType },
+  {},
+  {}
+>;
+```
+
+### chartsTooltipClasses
+
+```typescript
+type chartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClasses
+
+```typescript
+type ChartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClassKey
+
+```typescript
+type ChartsTooltipClassKey = 'root' | 'paper' | 'table' | 'row' | 'cell' | 'mark' | 'axisValueCell';
+```
+
+### ChartsTooltipContainerClasses
+
+```typescript
+type ChartsTooltipContainerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipContainerProps
+
+```typescript
+type ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  children?: React.ReactNode;
+};
+```
+
+### ChartsTooltipContainerSlotProps
+
+```typescript
+type ChartsTooltipContainerSlotProps = {};
+```
+
+### ChartsTooltipContainerSlots
+
+```typescript
+type ChartsTooltipContainerSlots = {};
+```
+
+### ChartsTooltipPaper
+
+```typescript
+type ChartsTooltipPaper = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipProps
+
+```typescript
+type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'axis' | 'none' | 'item';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### ChartsTooltipRow
+
+```typescript
+type ChartsTooltipRow = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'hidden'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipSlotProps
+
+```typescript
+type ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<ChartsTooltipProps<T>>;
+};
+```
+
+### ChartsTooltipSlots
+
+```typescript
+type ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    ChartsTooltipProps<T>,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipTable
+
+```typescript
+type ChartsTooltipTable = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'color'
+    | 'className'
+    | 'style'
+    | 'width'
+    | 'suppressHydrationWarning'
+    | 'lang'
+    | 'nonce'
+    | 'part'
+    | 'slot'
+    | 'role'
+    | 'tabIndex'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'content'
+    | 'translate'
+    | 'border'
+    | 'bgcolor'
+    | 'hidden'
+    | 'title'
+    | 'summary'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'spellCheck'
+    | 'radioGroup'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'tw'
+    | 'align'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'frame'
+    | 'rules'
+  >,
+  {}
+>;
+```
+
+### ChartsTypeFeatureFlags
+
+```typescript
+type ChartsTypeFeatureFlags = {};
+```
+
+### ChartsWrapperOwnerState
+
+```typescript
+type ChartsWrapperOwnerState = {
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection?: Direction;
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition?: Position;
+};
+```
+
+### ChartsWrapperProps
+
+```typescript
+type ChartsWrapperProps = {
+  /**
+   * The position of the legend.
+   * @default { horizontal: 'center', vertical: 'bottom' }
+   */
+  legendPosition?: Position;
+  /**
+   * The direction of the legend.
+   * @default 'horizontal'
+   */
+  legendDirection?: Direction;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically?: boolean;
+  children: React.ReactNode;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsXAxisProps
+
+```typescript
+type ChartsXAxisProps = {
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsXAxisSlotProps
+
+```typescript
+type ChartsXAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsXAxisSlots
+
+```typescript
+type ChartsXAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsXReferenceLineProps
+
+```typescript
+type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: TValue;
+};
+```
+
+### ChartsYAxisProps
+
+```typescript
+type ChartsYAxisProps = {
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /** The label of the axis. */
+  label?: string;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+};
+```
+
+### ChartsYAxisSlotProps
+
+```typescript
+type ChartsYAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsYAxisSlots
+
+```typescript
+type ChartsYAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
+
+### ChartsYReferenceLineProps
+
+```typescript
+type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /** The label to display along the reference line. */
+  label?: string;
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default { x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.
+   */
+  spacing?: number | { x?: number; y?: number };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /** The style applied to the label. */
+  labelStyle?: ChartsTextStyle;
+  /** The style applied to the line. */
+  lineStyle?: React.CSSProperties;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsReferenceLineClasses>;
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: TValue;
+};
+```
+
+### cheerfulFiestaPaletteDark
+
+```typescript
+type cheerfulFiestaPaletteDark = string[];
+```
+
+### cheerfulFiestaPaletteLight
+
+```typescript
+type cheerfulFiestaPaletteLight = string[];
+```
+
+### ColorLegendSelector
+
+```typescript
+type ColorLegendSelector = {
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### ComputedPieRadius
+
+Props received when the parent components has done the percentage conversion.
+
+```typescript
+type ComputedPieRadius = {
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### continuousColorLegendClasses
+
+```typescript
+type continuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendClasses
+
+```typescript
+type ContinuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendProps
+
+```typescript
+type ContinuousColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness?: number;
+};
+```
+
+### ContinuousScaleName
+
+```typescript
+type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
+```
+
+### CurveType
+
+The type of curve to use for the line.
+Read more about curves at
+[line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+
+```typescript
+type CurveType =
+  | 'catmullRom'
+  | 'linear'
+  | 'monotoneX'
+  | 'monotoneY'
+  | 'natural'
+  | 'step'
+  | 'stepBefore'
+  | 'stepAfter'
+  | 'bumpY'
+  | 'bumpX';
+```
+
+### cyanPaletteDark
+
+```typescript
+type cyanPaletteDark = string[];
+```
+
+### cyanPaletteLight
+
+```typescript
+type cyanPaletteLight = string[];
+```
+
+### DEFAULT_AXIS_SIZE_HEIGHT
+
+```typescript
+type DEFAULT_AXIS_SIZE_HEIGHT = 25;
+```
+
+### DEFAULT_AXIS_SIZE_WIDTH
+
+```typescript
+type DEFAULT_AXIS_SIZE_WIDTH = 45;
+```
+
+### DEFAULT_MARGINS
+
+```typescript
+type DEFAULT_MARGINS = { top: number; bottom: number; left: number; right: number };
+```
+
+### DEFAULT_RADIUS_AXIS_KEY
+
+```typescript
+type DEFAULT_RADIUS_AXIS_KEY = 'DEFAULT_RADIUS_AXIS_KEY';
+```
+
+### DEFAULT_ROTATION_AXIS_KEY
+
+```typescript
+type DEFAULT_ROTATION_AXIS_KEY = 'DEFAULT_ROTATION_AXIS_KEY';
+```
+
+### DEFAULT_X_AXIS_KEY
+
+```typescript
+type DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
+```
+
+### DEFAULT_Y_AXIS_KEY
+
+```typescript
+type DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
+```
+
+### DefaultizedBarSeriesType
+
+```typescript
+type DefaultizedBarSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+};
+```
+
+### DefaultizedFunnelSeriesType
+
+```typescript
+type DefaultizedFunnelSeriesType = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### DefaultizedHeatmapSeriesType
+
+```typescript
+type DefaultizedHeatmapSeriesType = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### DefaultizedLineSeriesType
+
+```typescript
+type DefaultizedLineSeriesType = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedPieSeriesType
+
+```typescript
+type DefaultizedPieSeriesType = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### DefaultizedPieValueType
+
+```typescript
+type DefaultizedPieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  color: string;
+  formattedValue: string;
+  hidden: boolean;
+};
+```
+
+### DefaultizedRadarSeriesType
+
+```typescript
+type DefaultizedRadarSeriesType = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### DefaultizedScatterSeriesType
+
+```typescript
+type DefaultizedScatterSeriesType = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### DefaultizedSeriesType
+
+```typescript
+type DefaultizedSeriesType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: CommonHighlightScope | SankeyHighlightScope;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data:
+    | HeatmapValueType[]
+    | (number | null)[]
+    | ScatterValueType[]
+    | number[]
+    | DefaultizedPieValueType[]
+    | MakeRequired<FunnelValueType, 'id' | 'color'>[]
+    | SankeyLayout<false>;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter:
+    | ((value: number | null, context: { xIndex: number; yIndex: number }) => string | null)
+    | SeriesValueFormatter<number | null>
+    | SeriesValueFormatter<ScatterValueType | null>
+    | SeriesValueFormatter<number>
+    | SeriesValueFormatter<FunnelValueType>
+    | ((value: number, context: SankeyValueFormatterContext) => string | null)
+    | SeriesValueFormatter<PieValueType>;
+};
+```
+
+### defaultSeriesConfigPro
+
+```typescript
+type defaultSeriesConfigPro = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+};
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### FadeOptions
+
+```typescript
+type FadeOptions = 'none' | 'series' | 'global';
+```
+
+### FocusedItemIdentifier
+
+```typescript
+type FocusedItemIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### FUNNEL_CHART_PLUGINS
+
+```typescript
+type FUNNEL_CHART_PLUGINS = [
+  ChartPlugin<UseChartFunnelAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'funnel'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'funnel'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'funnel'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### FunnelChartPluginSignatures
+
+```typescript
+type FunnelChartPluginSignatures = FunnelChartPluginSignatures;
+```
+
+### FunnelChartProps
+
+````typescript
+type FunnelChartProps = {
+  /**
+   * The series to display in the funnel chart.
+   * An array of [[FunnelSeries]] objects.
+   */
+  series: FunnelSeries[];
+  /**
+   * The configuration of the category axis.
+   * @default { position: 'none' }
+   */
+  categoryAxis?: CategoryAxis;
+  /**
+   * If `true`, the legend is not rendered.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: FunnelItemIdentifier | Omit<FunnelItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: FunnelItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The gap, in pixels, between funnel sections.
+   * @default 0
+   */
+  gap?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'funnel'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<FunnelChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { funnel: ChartSeriesTypeConfig<'funnel'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all funnel elements at the current position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'funnel';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'funnel';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | VisibilityIdentifier<'funnel'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+````
+
+### FunnelChartSlotExtension
+
+```typescript
+type FunnelChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelChartSlotProps;
+};
+```
+
+### FunnelChartSlotProps
+
+```typescript
+type FunnelChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### FunnelChartSlots
+
+```typescript
+type FunnelChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### funnelClasses
+
+```typescript
+type funnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClasses
+
+```typescript
+type FunnelClasses = {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+};
+```
+
+### FunnelClassKey
+
+```typescript
+type FunnelClassKey = 'root' | 'section' | 'sectionLabel' | 'sectionFilled' | 'sectionOutlined';
+```
+
+### FunnelCurveType
+
+```typescript
+type FunnelCurveType = 'linear' | 'linear-sharp' | 'step' | 'bump' | 'pyramid' | 'step-pyramid';
+```
+
+### FunnelDataPoints
+
+```typescript
+type FunnelDataPoints = Record<'x' | 'y', number> & { useBandWidth: boolean; stackOffset: number };
+```
+
+### FunnelItem
+
+```typescript
+type FunnelItem = {
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+  /** The value of the data point. */
+  value: number;
+};
+```
+
+### FunnelItemId
+
+```typescript
+type FunnelItemId = string | number;
+```
+
+### FunnelItemIdentifier
+
+An object that allows to identify a funnel item.
+Used for item interaction
+
+```typescript
+type FunnelItemIdentifier = {
+  type: 'funnel';
+  /** The series id of the funnel. */
+  seriesId: string;
+  /** The index of the data point in the series. */
+  dataIndex: number;
+};
+```
+
+### FunnelLabelOptions
+
+```typescript
+type FunnelLabelOptions = {
+  /**
+   * The position of the label.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  position?: Position;
+  /**
+   * The text anchor of the label. Affects the horizontal alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  textAnchor?: 'start' | 'middle' | 'end';
+  /**
+   * The dominant baseline of the label. Affects the vertical alignment of the text.
+   *
+   * Default value depends on the position.
+   */
+  dominantBaseline?:
+    | 'auto'
+    | 'baseline'
+    | 'hanging'
+    | 'middle'
+    | 'central'
+    | 'text-after-edge'
+    | 'text-before-edge';
+  /**
+   * The offset of the label from the anchor point.
+   * If a single number is provided, the offset will be applied in both directions.
+   * @default 0
+   */
+  offset?: number | { x?: number; y?: number };
+};
+```
+
+### FunnelPlotProps
+
+```typescript
+type FunnelPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Callback fired when a funnel item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    funnelItemIdentifier: FunnelItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotExtension
+
+```typescript
+type FunnelPlotSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: FunnelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: FunnelPlotSlotProps;
+};
+```
+
+### FunnelPlotSlotProps
+
+```typescript
+type FunnelPlotSlotProps = {
+  funnelSection?: FunnelSectionProps;
+  funnelSectionLabel?: FunnelSectionLabelProps;
+};
+```
+
+### FunnelPlotSlots
+
+```typescript
+type FunnelPlotSlots = {
+  /**
+   * Custom component for funnel section.
+   * @default FunnelSection
+   */
+  funnelSection?: React.ElementType<
+    FunnelSectionProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for funnel section label.
+   * @default FunnelSectionLabel
+   */
+  funnelSectionLabel?: React.ElementType<
+    FunnelSectionLabelProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### FunnelScaleName
+
+```typescript
+type FunnelScaleName = Exclude<
+  'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear',
+  'point'
+>;
+```
+
+### FunnelSection
+
+```typescript
+type FunnelSection = unknown;
+```
+
+### FunnelSectionLabel
+
+```typescript
+type FunnelSectionLabel = unknown;
+```
+
+### FunnelSeries
+
+```typescript
+type FunnelSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  type?: 'funnel';
+};
+```
+
+### FunnelSeriesType
+
+```typescript
+type FunnelSeriesType = {
+  type: 'funnel';
+  /** Data associated to the funnel section. */
+  data: FunnelValueType[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+  /**
+   * Controls how the funnel is drawn.
+   * Ignored on `step` and `linear-sharp` curves.
+   *
+   * This affects different curves in different ways:
+   * - `bump` & `linear`: Controls which section is the "starting" point of the funnel. This section has straight edges.
+   * - `pyramid` & `step-pyramid`: Fully changes the direction of the shape.
+   * @default 'auto'
+   */
+  funnelDirection?: 'increasing' | 'decreasing' | 'auto';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### FunnelValueType
+
+```typescript
+type FunnelValueType = {
+  /** A unique identifier of the funnel section. */
+  id?: FunnelItemId;
+  /** The value of the funnel section. */
+  value: number;
+  /** The label to display on the tooltip, funnel section, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'section') => string | undefined);
+  /** The color of the funnel section */
+  color?: string;
+  /**
+   * Defines the mark type for the funnel item.
+   * @default 'square'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### gaugeClasses
+
+```typescript
+type gaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClasses
+
+```typescript
+type GaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClassKey
+
+```typescript
+type GaugeClassKey = 'root' | 'valueArc' | 'referenceArc' | 'valueText';
+```
+
+### GaugeContainerProps
+
+```typescript
+type GaugeContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+};
+```
+
+### GaugeFormatterParams
+
+```typescript
+type GaugeFormatterParams = { value: number | null; valueMin: number; valueMax: number };
+```
+
+### GaugeProps
+
+```typescript
+type GaugeProps = {
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+};
+```
+
+### GaugeValueTextProps
+
+```typescript
+type GaugeValueTextProps = {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
+
+### greenPaletteDark
+
+```typescript
+type greenPaletteDark = string[];
+```
+
+### greenPaletteLight
+
+```typescript
+type greenPaletteLight = string[];
+```
+
+### HEATMAP_PLUGINS
+
+```typescript
+type HEATMAP_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartTooltipSignature<'heatmap'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'heatmap'>>,
+  ChartPlugin<UseChartHighlightSignature<'heatmap'>>,
+  ChartPlugin<UseChartProExportSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartItemClickSignature<'heatmap'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### HeatmapCellOwnerState
+
+```typescript
+type HeatmapCellOwnerState = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+  value: number;
+};
+```
+
+### HeatmapCellProps
+
+```typescript
+type HeatmapCellProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapCellOwnerState;
+};
+```
+
+### heatmapClasses
+
+```typescript
+type heatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClasses
+
+```typescript
+type HeatmapClasses = {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
+  /** Styles applied to the heatmap cells. */
+  cell: string;
+  /**
+   * Styles applied to the cell element if highlighted.
+   * @deprecated Use `[data-highlighted]` selector instead.
+   */
+  highlighted: string;
+  /**
+   * Styles applied to the cell element if faded.
+   * @deprecated Use `[data-faded]` selector instead.
+   */
+  faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
+   */
+  series: string;
+};
+```
+
+### HeatmapClassKey
+
+```typescript
+type HeatmapClassKey = 'root' | 'series' | 'highlighted' | 'faded' | 'cell';
+```
+
+### HeatmapItemIdentifier
+
+An object that allows to identify a single cell.
+Used for item interaction
+
+```typescript
+type HeatmapItemIdentifier = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+};
+```
+
+### HeatmapItemIdentifierWithData
+
+The cell identifier with the associated data value.
+
+```typescript
+type HeatmapItemIdentifierWithData = {
+  type: 'heatmap';
+  /** The id of the series the cell belongs to. */
+  seriesId: string;
+  /** The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  xIndex: number;
+  /** The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data. */
+  yIndex: number;
+  /** The value of the cell. Null if there is no data associated. */
+  value: number | null;
+};
+```
+
+### HeatmapPlotProps
+
+```typescript
+type HeatmapPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapPlotSlotProps;
+};
+```
+
+### HeatmapPlotSlotProps
+
+```typescript
+type HeatmapPlotSlotProps = { cell?: Partial<HeatmapCellProps> };
+```
+
+### HeatmapPlotSlots
+
+```typescript
+type HeatmapPlotSlots = {
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+};
+```
+
+### HeatmapPluginSignatures
+
+```typescript
+type HeatmapPluginSignatures = HeatmapPluginSignatures;
+```
+
+### HeatmapProps
+
+```typescript
+type HeatmapProps = {
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapSeries
+
+```typescript
+type HeatmapSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  type?: 'heatmap';
+};
+```
+
+### HeatmapSeriesType
+
+```typescript
+type HeatmapSeriesType = {
+  type: 'heatmap';
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data?: HeatmapValueType[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+  /** The id of this series. */
+  id?: SeriesId;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### HeatmapSlotProps
+
+```typescript
+type HeatmapSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapSlots
+
+```typescript
+type HeatmapSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### HeatmapTooltipClasses
+
+```typescript
+type HeatmapTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentClasses
+
+```typescript
+type HeatmapTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### HeatmapTooltipContentProps
+
+```typescript
+type HeatmapTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+};
+```
+
+### HeatmapTooltipProps
+
+```typescript
+type HeatmapTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer';
+};
+```
+
+### HeatmapTooltipSlotProps
+
+```typescript
+type HeatmapTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<HeatmapTooltipProps>;
+};
+```
+
+### HeatmapTooltipSlots
+
+```typescript
+type HeatmapTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### HeatmapValueType
+
+```typescript
+type HeatmapValueType = HeatmapValueType;
+```
+
+### HighlightItemIdentifier
+
+Identifies an highlighted item or series.
+
+```typescript
+type HighlightItemIdentifier<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightItemIdentifierWithType
+
+```typescript
+type HighlightItemIdentifierWithType<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+};
+```
+
+### HighlightOptions
+
+```typescript
+type HighlightOptions = 'none' | 'item' | 'series';
+```
+
+### HighlightScope
+
+```typescript
+type HighlightScope = CommonHighlightScope | SankeyHighlightScope;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
+
+### ItemTooltip
+
+```typescript
+type ItemTooltip<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### labelClasses
+
+```typescript
+type labelClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### labelGradientClasses
+
+```typescript
+type labelGradientClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+};
+```
+
+### labelMarkClasses
+
+```typescript
+type labelMarkClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "line+mark". */
+  lineAndMark: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+};
+```
+
+### legendClasses
+
+```typescript
+type legendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### LegendItemContext
+
+```typescript
+type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+```
+
+### LegendItemParams
+
+```typescript
+type LegendItemParams = {
+  /** The type of the series */
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  markType: ChartsLabelMarkType | undefined;
+  /** The identifier of the series */
+  seriesId?: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The minimum value of the category */
+  minValue?: number | Date | null;
+  /** The maximum value of the category */
+  maxValue?: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LINE_CHART_PRO_PLUGINS
+
+```typescript
+type LINE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProPluginSignatures
+
+```typescript
+type LineChartProPluginSignatures = LineChartProPluginSignatures;
+```
+
+### LineChartProProps
+
+````typescript
+type LineChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'line'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+    ChartPlugin<UseChartHighlightSignature<'line'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<LineChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartProSlotProps
+
+```typescript
+type LineChartProSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### LineChartProSlots
+
+```typescript
+type LineChartProSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'line'
+  | 'area'
+  | 'mark'
+  | 'highlight'
+  | 'markAnimate'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  seriesId: string;
+  color: string;
+  classes?: Partial<LineClasses>;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LineItemIdentifier
+
+An object that allows to identify a single line.
+Used for item interaction
+
+```typescript
+type LineItemIdentifier = {
+  type: 'line';
+  seriesId: string;
+  /** `dataIndex` can be `undefined` if the mouse is over the area and not a specific item. */
+  dataIndex?: number;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### LineSeriesType
+
+```typescript
+type LineSeriesType = {
+  type: 'line';
+  /** Data associated to the line. */
+  data?: (number | null)[];
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+};
+```
+
+### mangoFusionPaletteDark
+
+```typescript
+type mangoFusionPaletteDark = string[];
+```
+
+### mangoFusionPaletteLight
+
+```typescript
+type mangoFusionPaletteLight = string[];
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  seriesId: string;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
+
+### NumberValue
+
+```typescript
+type NumberValue = NumberValue;
+```
+
+### orangePaletteDark
+
+```typescript
+type orangePaletteDark = string[];
+```
+
+### orangePaletteLight
+
+```typescript
+type orangePaletteLight = string[];
+```
+
+### OrdinalTimeTicks
+
+```typescript
+type OrdinalTimeTicks = (TickFrequencyDefinition | TickFrequency)[];
+```
+
+### PIE_CHART_PLUGINS
+
+```typescript
+type PIE_CHART_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### PIE_CHART_PRO_PLUGINS
+
+```typescript
+type PIE_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### PieArcLabelPlotProps
+
+```typescript
+type PieArcLabelPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcLabelPlotSlotProps
+
+```typescript
+type PieArcLabelPlotSlotProps = { pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PieArcLabelPlotSlots
+
+```typescript
+type PieArcLabelPlotSlots = { pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps> };
+```
+
+### PieArcLabelProps
+
+```typescript
+type PieArcLabelProps = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  classes?: Partial<PieClasses>;
+  startAngle: number;
+  endAngle: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+  hidden?: boolean;
+};
+```
+
+### PieArcOwnerState
+
+```typescript
+type PieArcOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+};
+```
+
+### PieArcPlotProps
+
+```typescript
+type PieArcPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcPlotSlotProps
+
+```typescript
+type PieArcPlotSlotProps = { pieArc?: Partial<PieArcProps> };
+```
+
+### PieArcPlotSlots
+
+```typescript
+type PieArcPlotSlots = { pieArc?: React.JSXElementConstructor<PieArcProps> };
+```
+
+### PieArcProps
+
+```typescript
+type PieArcProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** If `true`, the animation is disabled. */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
+};
+```
+
+### piecewiseColorLegendClasses
+
+```typescript
+type piecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendClasses
+
+```typescript
+type PiecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendItemContext
+
+```typescript
+type PiecewiseColorLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'piecewiseColor';
+  /** The minimum value of the category */
+  minValue: number | Date | null;
+  /** The maximum value of the category */
+  maxValue: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendProps
+
+```typescript
+type PiecewiseColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @returns The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the color marks.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: PiecewiseColorLegendItemContext,
+    index: number,
+  ) => void;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### PiecewiseLabelFormatterParams
+
+```typescript
+type PiecewiseLabelFormatterParams = {
+  /** The index of the entry. */
+  index: number;
+  /** The length of the entries array. */
+  length: number;
+  /** The min value of the piece. `null` is infinite. */
+  min: number | Date | null;
+  /** The max value of the piece. `null` is infinite. */
+  max: number | Date | null;
+  /** The formatted min value of the piece. `null` is infinite. */
+  formattedMin: string | null;
+  /** The formatted max value of the piece. `null` is infinite. */
+  formattedMax: string | null;
+};
+```
+
+### PieChartPluginSignatures
+
+```typescript
+type PieChartPluginSignatures = PieChartPluginSignatures;
+```
+
+### PieChartProPluginSignatures
+
+```typescript
+type PieChartProPluginSignatures = PieChartProPluginSignatures;
+```
+
+### PieChartProProps
+
+````typescript
+type PieChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<PieChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+};
+````
+
+### PieChartProps
+
+````typescript
+type PieChartProps = {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### PieChartProSlotProps
+
+```typescript
+type PieChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### PieChartProSlots
+
+```typescript
+type PieChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### PieChartSlotProps
+
+```typescript
+type PieChartSlotProps = {
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### PieChartSlots
+
+```typescript
+type PieChartSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### pieClasses
+
+```typescript
+type pieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClasses
+
+```typescript
+type PieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClassKey
+
+```typescript
+type PieClassKey =
+  | 'root'
+  | 'arc'
+  | 'series'
+  | 'arcLabel'
+  | 'animate'
+  | 'seriesLabels'
+  | 'focusIndicator';
+```
+
+### PieItemId
+
+```typescript
+type PieItemId = string | number;
+```
+
+### PieItemIdentifier
+
+An object that allows to identify a single pie slice.
+Used for item interaction
+
+```typescript
+type PieItemIdentifier = { type: 'pie'; seriesId: string; dataIndex: number };
+```
+
+### PiePlotProps
+
+```typescript
+type PiePlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+};
+```
+
+### PiePlotSlotProps
+
+```typescript
+type PiePlotSlotProps = { pieArc?: Partial<PieArcProps>; pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PiePlotSlots
+
+```typescript
+type PiePlotSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+};
+```
+
+### PieSeries
+
+```typescript
+type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
+```
+
+### PieSeriesLayout
+
+Layout information computed from the pie series and the drawing area.
+
+```typescript
+type PieSeriesLayout = {
+  /** The pie center coordinate in px. */
+  center: { x: number; y: number };
+  /**
+   * The pie radius in px.
+   * Computed based on the drawing area and the center placement.
+   */
+  radius: {
+    /**
+     * The maximum available radius in px.
+     * Correspond to radius='100%'.
+     */
+    available: number;
+    /** The pie inner radius in px, except if overridden by item state (highlight/faded). */
+    inner: number;
+    /** The pie outer radius in px, except if overridden by item state (highlight/faded). */
+    outer: number;
+    /** The pie label radius in px, except if overridden by item state (highlight/faded). */
+    label: number;
+  };
+};
+```
+
+### PieSeriesType
+
+```typescript
+type PieSeriesType<TData = PieValueType> = {
+  type: 'pie';
+  data: TData[];
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<TData>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<SeriesType>;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<TData>) => string;
+};
+```
+
+### PieValueType
+
+```typescript
+type PieValueType = {
+  /** A unique identifier of the pie slice. */
+  id?: PieItemId;
+  value: number;
+  /** The label to display on the tooltip, arc, or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
+  color?: string;
+  /**
+   * Defines the mark type for the pie item.
+   * @default 'circle'
+   */
+  labelMarkType?: ChartsLabelMarkType;
+};
+```
+
+### pinkPaletteDark
+
+```typescript
+type pinkPaletteDark = string[];
+```
+
+### pinkPaletteLight
+
+```typescript
+type pinkPaletteLight = string[];
+```
+
+### Position
+
+```typescript
+type Position = {
+  /** The vertical position. */
+  vertical?: 'top' | 'middle' | 'bottom';
+  /** The horizontal position. */
+  horizontal?: 'start' | 'center' | 'end';
+};
+```
+
+### PropsFromSlot
+
+```typescript
+type PropsFromSlot =
+  | P
+  | React.ComponentProps<
+      NonNullable<React.JSXElementConstructor<any> | React.ElementType | null | undefined>
+    >;
+```
+
+### purplePaletteDark
+
+```typescript
+type purplePaletteDark = string[];
+```
+
+### purplePaletteLight
+
+```typescript
+type purplePaletteLight = string[];
+```
+
+### RADAR_CHART_PRO_PLUGINS
+
+```typescript
+type RADAR_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'radar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature>,
+  ChartPlugin<UseChartHighlightSignature<'radar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### RADAR_PLUGINS
+
+```typescript
+type RADAR_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<any>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature<any>>,
+  ChartPlugin<UseChartHighlightSignature<any>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<any>>,
+];
+```
+
+### RadarAxisHighlightProps
+
+```typescript
+type RadarAxisHighlightProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<
+    Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>
+  >;
+};
+```
+
+### RadarAxisProps
+
+```typescript
+type RadarAxisProps = {
+  /**
+   * Defines how label align with the axis.
+   * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
+   * - 'rotated': labels are rotated 90deg relatively to their axis.
+   * @default 'horizontal'
+   */
+  labelOrientation?: 'horizontal' | 'rotated';
+  /** The labels text anchor or a function returning the text anchor for a given axis angle (in degree). */
+  textAnchor?:
+    | 'start'
+    | 'middle'
+    | 'end'
+    | 'inherit'
+    | ((angle: number) => 'start' | 'end' | 'middle' | 'inherit' | undefined);
+  /** The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree). */
+  dominantBaseline?:
+    | 'auto'
+    | 'use-script'
+    | 'no-change'
+    | 'reset-size'
+    | 'ideographic'
+    | 'alphabetic'
+    | 'hanging'
+    | 'mathematical'
+    | 'central'
+    | 'middle'
+    | 'text-after-edge'
+    | 'text-before-edge'
+    | 'inherit'
+    | ((
+        angle: number,
+      ) =>
+        | 'auto'
+        | 'middle'
+        | 'alphabetic'
+        | 'hanging'
+        | 'ideographic'
+        | 'mathematical'
+        | 'central'
+        | 'text-after-edge'
+        | 'text-before-edge'
+        | 'inherit'
+        | 'use-script'
+        | 'no-change'
+        | 'reset-size'
+        | undefined);
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<Pick<RadarClasses, 'axisLine' | 'axisLabel' | 'axisRoot'>>;
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### RadarChartPluginSignatures
+
+```typescript
+type RadarChartPluginSignatures = RadarChartPluginSignatures;
+```
+
+### RadarChartProPluginSignatures
+
+```typescript
+type RadarChartProPluginSignatures = RadarChartProPluginSignatures;
+```
+
+### RadarChartProProps
+
+````typescript
+type RadarChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartProSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'radar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartPolarAxisSignature>,
+    ChartPlugin<UseChartHighlightSignature<'radar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'radar'>>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<RadarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+};
+````
+
+### RadarChartProps
+
+````typescript
+type RadarChartProps = {
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartSlotProps;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  sx?: SxProps<Theme>;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+};
+````
+
+### RadarChartProSlotProps
+
+```typescript
+type RadarChartProSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### RadarChartProSlots
+
+```typescript
+type RadarChartProSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### RadarChartSlotProps
+
+```typescript
+type RadarChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### RadarChartSlots
+
+```typescript
+type RadarChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### radarClasses
+
+```typescript
+type radarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClasses
+
+```typescript
+type RadarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClassKey
+
+```typescript
+type RadarClassKey =
+  | 'axisLine'
+  | 'axisLabel'
+  | 'axisRoot'
+  | 'gridRadial'
+  | 'gridDivider'
+  | 'gridStripe'
+  | 'seriesRoot'
+  | 'seriesArea'
+  | 'seriesMark'
+  | 'axisHighlightRoot'
+  | 'axisHighlightLine'
+  | 'axisHighlightDot';
+```
+
+### RadarDataProviderProps
+
+```typescript
+type RadarDataProviderProps<
+  TSignatures extends ChartAnyPluginSignature[] = RadarChartPluginSignatures,
+> = {
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [] | [ChartPlugin<ChartAnyPluginSignature>];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** Slots to customize charts' components. */
+  slots?: Partial<ChartsDataProviderSlots>;
+  /** The props for the slots. */
+  slotProps?: Partial<ChartsDataProviderSlotProps>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?:
+    | string
+    | number
+    | bigint
+    | boolean
+    | ReactElement
+    | Iterable<React.ReactNode, any, any>
+    | React.ReactPortal
+    | Promise<AwaitedReactNode>
+    | null;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: number | Partial<ChartMargin>;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: {};
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+};
+```
+
+### RadarGridProps
+
+```typescript
+type RadarGridProps = {
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+};
+```
+
+### RadarItemIdentifier
+
+An object that allows to identify either a radar series or a radar point (if dataIndex is defined).
+Used for item interaction
+
+```typescript
+type RadarItemIdentifier = { type: 'radar'; seriesId: string; dataIndex?: number };
+```
+
+### RadarSeries
+
+```typescript
+type RadarSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  type?: 'radar';
+};
+```
+
+### RadarSeriesAreaProps
+
+```typescript
+type RadarSeriesAreaProps = {
+  /** Callback fired when an area is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesMarksProps
+
+```typescript
+type RadarSeriesMarksProps = {
+  /** Callback fired when a mark is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesPlotProps
+
+```typescript
+type RadarSeriesPlotProps = {
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesType
+
+```typescript
+type RadarSeriesType = {
+  type: 'radar';
+  data: number[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+};
+```
+
+### RadiusAxis
+
+```typescript
+type RadiusAxis<S extends 'linear' = 'linear', V = any> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * The minimal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  min?: number;
+  /**
+   * The maximal value of the domain.
+   * If not provided, it gets computed to display the entire chart data.
+   */
+  max?: number;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The minimal radius. */
+  minRadius?: number;
+  /** The maximal radius. */
+  maxRadius?: number;
+  colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### rainbowSurgePaletteDark
+
+```typescript
+type rainbowSurgePaletteDark = string[];
+```
+
+### rainbowSurgePaletteLight
+
+```typescript
+type rainbowSurgePaletteLight = string[];
+```
+
+### redPaletteDark
+
+```typescript
+type redPaletteDark = string[];
+```
+
+### redPaletteLight
+
+```typescript
+type redPaletteLight = string[];
+```
+
+### referenceLineClasses
+
+```typescript
+type referenceLineClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+};
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### RotationAxis
+
+```typescript
+type RotationAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id: AxisId;
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /** The label of the axis. */
+  label?: string;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /** The start angle (in deg). */
+  startAngle?: number;
+  /** The end angle (in deg). */
+  endAngle?: number;
+  /** The gap between the axis and the label. */
+  labelGap?: number;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer' }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer' }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'node'
+  | 'link'
+  | 'root'
+  | 'nodes'
+  | 'links'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### ScaleName
+
+```typescript
+type ScaleName = 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### SCATTER_CHART_PLUGINS
+
+```typescript
+type SCATTER_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### SCATTER_CHART_PRO_PLUGINS
+
+```typescript
+type SCATTER_CHART_PRO_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### ScatterChartPluginSignatures
+
+```typescript
+type ScatterChartPluginSignatures = ScatterChartPluginSignatures;
+```
+
+### ScatterChartProPluginSignatures
+
+```typescript
+type ScatterChartProPluginSignatures = ScatterChartProPluginSignatures;
+```
+
+### ScatterChartProProps
+
+````typescript
+type ScatterChartProProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartProSlotProps;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+    ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+    ChartPlugin<UseChartClosestPointSignature>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  apiRef?: React.RefObject<ChartPublicAPI<ScatterChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### ScatterChartProps
+
+````typescript
+type ScatterChartProps = {
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartSlotProps;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+};
+````
+
+### ScatterChartProSlotProps
+
+```typescript
+type ScatterChartProSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ScatterChartProSlots
+
+```typescript
+type ScatterChartProSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### ScatterChartSlotProps
+
+```typescript
+type ScatterChartSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ScatterChartSlots
+
+```typescript
+type ScatterChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### scatterClasses
+
+```typescript
+type scatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClasses
+
+```typescript
+type ScatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClassKey
+
+```typescript
+type ScatterClassKey = 'marker' | 'root' | 'series' | 'focusedMark';
+```
+
+### ScatterItemIdentifier
+
+An object that allows to identify a single scatter item.
+Used for item interaction
+
+```typescript
+type ScatterItemIdentifier = { type: 'scatter'; seriesId: string; dataIndex: number };
+```
+
+### ScatterMarkerProps
+
+```typescript
+type ScatterMarkerProps = {
+  /** The series ID. */
+  seriesId: string;
+  /** The index of the data point. */
+  dataIndex: number;
+  /** The x coordinate of the data point. */
+  x: number;
+  /** The y coordinate of the data point. */
+  y: number;
+  /** The fill color of the marker. */
+  color: string;
+  /** The size of the marker. */
+  size: number;
+  /** If `true`, the marker is highlighted. */
+  isHighlighted: boolean;
+  /** If `true`, the marker is faded. */
+  isFaded: boolean;
+  /** Callback fired when clicking on a scatter item. */
+  onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+};
+```
+
+### ScatterMarkerSlotExtension
+
+```typescript
+type ScatterMarkerSlotExtension = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterMarkerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterMarkerSlots;
+};
+```
+
+### ScatterMarkerSlotProps
+
+```typescript
+type ScatterMarkerSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterMarkerSlots
+
+```typescript
+type ScatterMarkerSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterPlotProps
+
+```typescript
+type ScatterPlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  classes?: Partial<ScatterClasses>;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+};
+```
+
+### ScatterPlotSlotProps
+
+```typescript
+type ScatterPlotSlotProps = { scatter?: Partial<ScatterProps>; marker?: ScatterMarkerProps };
+```
+
+### ScatterPlotSlots
+
+```typescript
+type ScatterPlotSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterProps
+
+```typescript
+type ScatterProps = {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: (dataIndex?: number) => string;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+  classes?: Partial<ScatterClasses>;
+  slots?: ScatterSlots;
+  slotProps?: ScatterSlotProps;
+};
+```
+
+### ScatterSeries
+
+```typescript
+type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
+```
+
+### ScatterSeriesType
+
+```typescript
+type ScatterSeriesType = {
+  type: 'scatter';
+  data?: ScatterValueType[];
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize?: number;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  preview?: { markerSize?: number };
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<ScatterValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+### ScatterSlotProps
+
+```typescript
+type ScatterSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterSlots
+
+```typescript
+type ScatterSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterValueType
+
+```typescript
+type ScatterValueType = {
+  x: number;
+  y: number;
+  z?: any;
+  /** A unique identifier for the scatter point */
+  id?: string | number;
+};
+```
+
+### SeriesId
+
+The unique identifier of a series.
+
+```typescript
+type SeriesId = string;
+```
+
+### SeriesItem
+
+```typescript
+type SeriesItem<T extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel'> = {
+  seriesId: string;
+  color: string;
+  value:
+    | { open: number; high: number; low: number; close: number }
+    | number
+    | HeatmapValueType
+    | ScatterValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkType | undefined;
+  markShape: MarkShape | undefined;
+};
+```
+
+### SeriesItemIdentifier
+
+```typescript
+type SeriesItemIdentifier<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = { seriesId: string };
+```
+
+### SeriesItemIdentifierWithData
+
+```typescript
+type SeriesItemIdentifierWithData<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### SeriesItemIdentifierWithType
+
+```typescript
+type SeriesItemIdentifierWithType<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### SeriesLegendItemContext
+
+```typescript
+type SeriesLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'series';
+  /** The identifier of the series */
+  seriesId: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### SeriesLegendItemParams
+
+```typescript
+type SeriesLegendItemParams = {
+  /** The identifier of the series */
+  seriesId: string;
+  /** The type of the series */
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  markType: ChartsLabelMarkType | undefined;
+  markShape?: MarkShape;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### ShowMarkParams
+
+```typescript
+type ShowMarkParams<AxisValue = number | Date> = {
+  /** The item index. */
+  index: number;
+  /** The x coordinate in the SVG. */
+  x: number;
+  /** The y coordinate in the SVG. */
+  y: number;
+  /** The item position value. It likely comes from the axis `data` property. */
+  position: AxisValue;
+  /** The item value. It comes from the series `data` property. */
+  value: number;
+};
+```
+
+### SparkLineChartProps
+
+````typescript
+type SparkLineChartProps<PlotType extends 'bar' | 'line' = 'bar' | 'line'> = {
+  /**
+   * The xAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  xAxis?: XAxis;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: YAxis;
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType?: 'bar' | 'line';
+  /** Data to plot. */
+  data: number[];
+  /**
+   * Formatter used by the tooltip.
+   * @default (value: number | null) => (value === null ? '' : value.toString())
+   * @returns the formatted value.
+   */
+  valueFormatter?: (value: number | null) => string;
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip?: boolean;
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area?: boolean;
+  /** @default 'linear' */
+  curve?: CurveType;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default 5
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SparkLineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SparkLineChartSlotProps;
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: { top?: number; right?: number; bottom?: number; left?: number };
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | BarItemIdentifier
+    | Omit<BarItemIdentifier, 'type'>
+    | LineItemIdentifier
+    | Omit<LineItemIdentifier, 'type'>
+    | ScatterItemIdentifier
+    | Omit<ScatterItemIdentifier, 'type'>
+    | PieItemIdentifier
+    | Omit<PieItemIdentifier, 'type'>
+    | RadarItemIdentifier
+    | Omit<RadarItemIdentifier, 'type'>
+    | HeatmapItemIdentifier
+    | Omit<HeatmapItemIdentifier, 'type'>
+    | FunnelItemIdentifier
+    | Omit<FunnelItemIdentifier, 'type'>
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (
+    tooltipItem:
+      | BarItemIdentifier
+      | LineItemIdentifier
+      | ScatterItemIdentifier
+      | PieItemIdentifier
+      | RadarItemIdentifier
+      | HeatmapItemIdentifier
+      | FunnelItemIdentifier
+      | SankeyItemIdentifier
+      | null,
+  ) => void;
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | { type: 'funnel'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'funnel'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem:
+      | SankeyItemIdentifier
+      | { type: 'bar'; seriesId: string; dataIndex?: number }
+      | { type: 'line'; seriesId: string; dataIndex?: number }
+      | { type: 'scatter'; seriesId: string; dataIndex?: number }
+      | { type: 'pie'; seriesId: string; dataIndex?: number }
+      | { type: 'radar'; seriesId: string; dataIndex?: number }
+      | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+      | { type: 'funnel'; seriesId: string; dataIndex?: number }
+      | null,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  theme?: 'light' | 'dark';
+  /**
+   * Callback fired when clicking close to an item.
+   * This is only available for scatter plot for now.
+   */
+  onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    bar: ChartSeriesTypeConfig<'bar'>;
+    line: ChartSeriesTypeConfig<'line'>;
+    scatter: ChartSeriesTypeConfig<'scatter'>;
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+    radar: ChartSeriesTypeConfig<'radar'>;
+    heatmap: ChartSeriesTypeConfig<'heatmap'>;
+    funnel: ChartSeriesTypeConfig<'funnel'>;
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: (
+      | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+      | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+      | {
+          type?: 'scatter';
+          seriesId?: string;
+          dataIndex?: number;
+          seriesId: string;
+          type: 'scatter';
+        }
+      | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+      | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+      | {
+          type?: 'heatmap';
+          seriesId?: string;
+          xIndex?: number;
+          yIndex?: number;
+          seriesId: string;
+          type: 'heatmap';
+        }
+      | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'node';
+          nodeId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+      | {
+          type?: 'sankey';
+          seriesId?: string;
+          subType?: 'link';
+          sourceId?: SankeyNodeId;
+          targetId?: SankeyNodeId;
+          subType: 'node' | 'link';
+          seriesId: string;
+          type: 'sankey';
+        }
+    )[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | VisibilityIdentifier
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | {
+        type?: 'heatmap';
+        seriesId?: string;
+        xIndex?: number;
+        yIndex?: number;
+        seriesId: string;
+        type: 'heatmap';
+      }
+    | { type?: 'funnel'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'funnel' }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'node';
+        nodeId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | {
+        type?: 'sankey';
+        seriesId?: string;
+        subType?: 'link';
+        sourceId?: SankeyNodeId;
+        targetId?: SankeyNodeId;
+        subType: 'node' | 'link';
+        seriesId: string;
+        type: 'sankey';
+      }
+    | VisibilityIdentifier
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /** If true, the hit area interaction is disabled and falls back to hover events. */
+  disableHitArea?: boolean;
+};
+````
+
+### SparkLineChartSlotProps
+
+```typescript
+type SparkLineChartSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SparkLineChartSlots
+
+```typescript
+type SparkLineChartSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'asc' | 'desc' }
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'node' | 'pointer'; sort?: undefined }
+    ) & {
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'data'
+    | 'line'
+    | 'label'
+    | 'link'
+    | 'time'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'text'
+    | 'p'
+    | 'legend'
+    | 'circle'
+    | 'center'
+    | 'desc'
+    | 'section'
+    | 'source'
+    | 'area'
+    | 'a'
+    | 'b'
+    | 'g'
+    | 'i'
+    | 'q'
+    | 's'
+    | 'u'
+    | 'table'
+    | 'mark'
+    | 'map'
+    | 'small'
+    | 'title'
+    | 'div'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'select'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'tr'
+    | 'track'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### StackableChartSeriesType
+
+```typescript
+type StackableChartSeriesType = 'bar' | 'line';
+```
+
+### StackOffsetType
+
+```typescript
+type StackOffsetType = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';
+```
+
+### StackOrderType
+
+```typescript
+type StackOrderType = 'appearance' | 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';
+```
+
+### strawberrySkyPaletteDark
+
+```typescript
+type strawberrySkyPaletteDark = string[];
+```
+
+### strawberrySkyPaletteLight
+
+```typescript
+type strawberrySkyPaletteLight = string[];
+```
+
+### TickFrequency
+
+The predefined tick frequencies for time ordinal axes.
+
+- 'years': displays the year, placing ticks at the start of each year
+- 'quarterly': displays the month, placing ticks at the start of each quarter
+- 'months': displays the month, placing ticks at the start of each month
+- 'biweekly': displays the day, placing ticks every two weeks
+- 'weeks': displays the day, placing ticks at the start of each week
+- 'days': displays the day, placing ticks at the start of each day
+- 'hours': displays the hour and minutes, placing ticks at the start of each hour
+
+```typescript
+type TickFrequency = 'years' | 'quarterly' | 'months' | 'biweekly' | 'weeks' | 'days' | 'hours';
+```
+
+### TickFrequencyDefinition
+
+Definition of a tick frequency for time ordinal axes.
+
+```typescript
+type TickFrequencyDefinition = {
+  /**
+   * Returns the number of ticks in the given date range for this tick frequency.
+   * @returns The number of ticks in the [from, to] range.
+   */
+  getTickNumber: (from: Date, to: Date) => number;
+  /**
+   * Decides if the current date should be shown as a tick.
+   * @returns Whether the current date is a tick or not.
+   */
+  isTick: (prev: Date, value: Date) => boolean;
+  /**
+   * Format the tick value for display.
+   * @returns The formatted date string.
+   */
+  format: (date: Date) => string;
+};
+```
+
+### TickItem
+
+```typescript
+type TickItem = {
+  /**
+   * The value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  value?: any;
+  /**
+   * The formatted value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
+  formattedValue?: string;
+  /**
+   * The offset in pixels relative to the SVG origin.
+   * For an x-axis, it is relative to the left side of the SVG.
+   * For a y-axis, it is relative to the top side of the SVG.
+   */
+  offset: number;
+  /**
+   * The offset in pixels relative to the tick position.
+   * For an x-axis, a positive value means the label is shifted to the right of the tick.
+   * For a y-axis, a positive value means the label is shifted downwards from the tick.
+   */
+  labelOffset: number;
+};
+```
+
+### UseAnimateParams
+
+```typescript
+type UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = {}> = {
+  /**
+   * Function that returns the interpolation function for animating props.
+   * @returns
+   * Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   * @returns The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /** If `true`, the animation will be skipped and the final props will be applied immediately. */
+  skip?: boolean;
+  /** Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`. */
+  initialProps?: Props;
+  /** Optional ref to merge with the ref returned from this hook. */
+  ref?: React.Ref<Elem>;
+};
+```
+
+### UseAnimateReturn
+
+```typescript
+type UseAnimateReturn<Elem extends Element, T extends {}> = {
+  /** Ref to be passed to the element to animate. */
+  ref: React.Ref<Elem>;
+};
+```
+
+### UseAxesTooltipParams
+
+```typescript
+type UseAxesTooltipParams = {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+};
+```
+
+### UseAxesTooltipReturnValue
+
+```typescript
+type UseAxesTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel' = 'bar' | 'line' | 'scatter' | 'radar' | 'heatmap' | 'funnel', AxisValueT extends string | number | Date = string | number | Date> = { axisDirection: 'x' | 'y' | 'radius' | 'rotation';
+mainAxis: { /**
+ * ID used to identify the axis.
+ *
+ * The ID must be unique across all axes in this chart.
+ */
+id: AxisId;
+/** The data used by `'band'` and `'point'` scales. */
+data?: any[];
+/** The key used to retrieve `data` from the `dataset` prop. */
+dataKey?: string;
+/**
+ * A function to extract and transform the value from the `dataset` item.
+ * It receives the full dataset item and should return the axis value.
+ * Can be used as an alternative to `dataKey`.
+ * @returns The transformed value.
+ */
+valueGetter?: ((item: DatasetElementType<unknown>) => any);
+colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string); type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'piecewise'; thresholds: (number | Date)[]; colors: string[]; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) };
+/**
+ * Formats the axis value.
+ * @returns The string to display.
+ */
+valueFormatter?: (<TScaleName extends S>(value: any, context: AxisValueFormatterContext<TScaleName>) => string);
+/** The label of the axis. */
+label?: string;
+/** A CSS class name applied to the root element. */
+className?: string;
+/**
+ * If true, the axis line is disabled.
+ * @default false
+ */
+disableLine?: boolean;
+/**
+ * If true, the ticks are disabled.
+ * @default false
+ */
+disableTicks?: boolean;
+/** The style applied to ticks text. */
+tickLabelStyle?: ChartsTextStyle;
+/** The style applied to the axis label. */
+labelStyle?: ChartsTextStyle;
+/**
+ * Defines which ticks get its label displayed. Its value can be:
+ * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+ * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+ * @default 'auto'
+ */
+tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+/**
+ * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+ * @default 0
+ */
+tickSpacing?: number;
+/**
+ * The size of the ticks.
+ * @default 6
+ */
+tickSize?: number;
+/** Override or extend the styles applied to the component. */
+classes?: Partial<ChartsAxisClasses>;
+/**
+ * Overridable component slots.
+ * @default {}
+ */
+slots?: Partial<ChartsAxisSlots>;
+/**
+ * The props used for each component slot.
+ * @default {}
+ */
+slotProps?: Partial<ChartsAxisSlotProps>;
+sx?: SxProps;
+/**
+ * Maximal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMaxStep?: number;
+/**
+ * Minimal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMinStep?: number;
+/**
+ * The number of ticks. This number is not guaranteed.
+ * Not supported by categorical axis (band, points).
+ */
+tickNumber?: number;
+/**
+ * Defines which ticks are displayed.
+ * Its value can be:
+ * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+ * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+ * - an array containing the values where ticks should be displayed.
+ * @default 'auto'
+ * @see
+ */
+tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+/**
+ * The placement of ticks in regard to the band interval.
+ * Only used if scale is 'band'.
+ * @default 'extremities'
+ */
+tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+/**
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
+ * Only used if scale is 'band'.
+ * @default 'middle'
+ */
+tickLabelPlacement?: 'middle' | 'tick';
+/** If `true`, hide this value in the tooltip */
+hideTooltip?: boolean;
+/** If `true`, Reverse the axis scaleBand. */
+reverse?: boolean;
+/**
+ * Defines the axis scale domain based on the min/max values of series linked to it.
+ * - 'nice': Rounds the domain at human friendly values.
+ * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+ * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+ */
+domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+/** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+ignoreTooltip?: boolean;
+zoom?: boolean | ZoomOptions | false & DefaultizedZoomOptions | true & DefaultizedZoomOptions | { minStart?: number; maxEnd?: number; step?: number; minSpan?: number; maxSpan?: number; panning?: boolean; filterMode?: ZoomFilterMode; slider?: ZoomSliderOptions; axisId: AxisId; axisDirection: 'x' | 'y'; slider: DefaultedZoomSliderOptions; reverse: boolean; minStart: number; maxEnd: number; step: number; minSpan: number; maxSpan: number; panning: boolean; filterMode: ZoomFilterMode };
+/**
+ * The offset of the axis in pixels. It can be used to move the axis from its default position.
+ * X-axis: A top axis will move up, and a bottom axis will move down.
+ * Y-axis: A left axis will move left, and a right axis will move right.
+ * @default 0
+ */
+offset?: number;
+scaleType: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+scale: ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }> | ScaleLogarithmic<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleTime<number, number, never> | ScaleLinear<number, number, never>;
+colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null, never> | ScaleThreshold<number, string | null, never>;
+/** Indicate if the axis should be consider by a tooltip with `trigger='axis'`. */
+triggerTooltip?: boolean };
+axisId: AxisId;
+axisValue: AxisValueT;
+axisFormattedValue: string;
+dataIndex: number;
+seriesItems: SeriesItem<SeriesType>[] }
+```
+
+### UseBarSeriesContextReturnValue
+
+```typescript
+type UseBarSeriesContextReturnValue = SeriesProcessorResult<'bar'>;
+```
+
+### UseBarSeriesReturnValue
+
+```typescript
+type UseBarSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'bar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'diverging'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @returns The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label. It accepts the following values:
+   * - 'center': the label is centered on the bar
+   * - 'outside': the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.
+   * @default 'center'
+   */
+  barLabelPlacement?: 'center' | 'outside';
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to each bar. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /**
+   * Layout of the bars. All bar should have the same layout.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   * @default 0px
+   */
+  minBarSize: number;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UseChartCartesianAxisSignature
+
+```typescript
+type UseChartCartesianAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartCartesianAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartCartesianAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
+};
+```
+
+### UseChartClosestPointSignature
+
+```typescript
+type UseChartClosestPointSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVoronoiParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVoronoiDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartVoronoiInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVoronoiState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<SeriesType>,
+    UseChartTooltipSignature,
+  ];
+};
+```
+
+### UseChartHighlightSignature
+
+```typescript
+type UseChartHighlightSignature<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartHighlightParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartHighlightDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartHighlightInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartHighlightState<SeriesType>;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartInteractionSignature
+
+```typescript
+type UseChartInteractionSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: {};
+  /** The params after being processed with the default values. */
+  defaultizedParams: {};
+  /** An imperative api available for internal use. */
+  instance: UseChartInteractionInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartInteractionState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartPolarAxisSignature
+
+```typescript
+type UseChartPolarAxisSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartPolarAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartPolarAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartPolarAxisInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartPolarAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [UseChartInteractionSignature];
+};
+```
+
+### UseChartProExportSignature
+
+```typescript
+type UseChartProExportSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProExportParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProExportParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProExportInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProExportState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProExportPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartProZoomSignature
+
+```typescript
+type UseChartProZoomSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartProZoomParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartProZoomDefaultizedParameters;
+  /** An imperative api available for internal use. */
+  instance: UseChartProZoomInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartProZoomState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: UseChartProZoomPublicApi;
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartTooltipSignature
+
+```typescript
+type UseChartTooltipSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartTooltipParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartTooltipDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartTooltipInstance;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartTooltipState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartVisibilityManagerInstance
+
+```typescript
+type UseChartVisibilityManagerInstance<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** Hide an item by its identifier. */
+  hideItem: hideItem;
+  /** Show an item by its identifier. */
+  showItem: showItem;
+  /** Toggle the visibility of an item by its identifier. */
+  toggleItemVisibility: toggleItemVisibility;
+};
+```
+
+### UseChartVisibilityManagerParameters
+
+````typescript
+type UseChartVisibilityManagerParameters<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifierWithType<SeriesType>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (VisibilityIdentifierWithType<SeriesType> | VisibilityIdentifier<SeriesType>)[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | VisibilityIdentifierWithType<SeriesType>
+    | VisibilityIdentifier<SeriesType>
+  )[];
+};
+````
+
+### UseChartVisibilityManagerSignature
+
+```typescript
+type UseChartVisibilityManagerSignature<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartVisibilityManagerParameters<SeriesType>;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<SeriesType>;
+  /** An imperative api available for internal use. */
+  instance: UseChartVisibilityManagerInstance<SeriesType>;
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartVisibilityManagerState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [UseChartSeriesSignature];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseChartZAxisSignature
+
+```typescript
+type UseChartZAxisSignature = {
+  /** The raw properties that can be passed to the plugin. */
+  params: UseChartZAxisParameters;
+  /** The params after being processed with the default values. */
+  defaultizedParams: UseChartZAxisParameters;
+  /** An imperative api available for internal use. */
+  instance: {};
+  /** The state is the mutable data that will actually be stored in the plugin state and can be accessed by other plugins. */
+  state: UseChartZAxisState;
+  /**
+   * The public imperative API that will be exposed to the user.
+   * Accessed through the `apiRef` property of the plugin.
+   */
+  publicAPI: {};
+  /** Any plugins that this plugin depends on. */
+  dependencies: [];
+  /** Same as dependencies but the plugin might not have been initialized. */
+  optionalDependencies: [];
+};
+```
+
+### UseFunnelSeriesContextReturnValue
+
+```typescript
+type UseFunnelSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseFunnelSeriesReturnValue
+
+```typescript
+type UseFunnelSeriesReturnValue = {
+  dataPoints: FunnelDataPoints[][];
+  data: MakeRequired<FunnelValueType, 'id' | 'color'>[];
+  funnelDirection: 'increasing' | 'decreasing';
+  /** The id of this series. */
+  id: string;
+  type: 'funnel';
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<FunnelValueType>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The radius, in pixels, of the corners of the funnel sections.
+   * @default 8
+   */
+  borderRadius?: number;
+  /**
+   * Layout of the funnel.
+   * @default 'vertical'
+   */
+  layout: 'horizontal' | 'vertical';
+  /**
+   * The type of curve to use for the line.
+   *
+   * - `bump`: A curve that creates a smooth transition between points, with a bump in the middle.
+   * - `linear`: A straight line between points.
+   * - `linear-sharp`: A straight line between points, the smaller end of the funnel is a triangle.
+   * - `step`: A step line that creates a staircase effect.
+   * - `pyramid`: A pyramid shape that connects the points.
+   * - `step-pyramid`: A step line that creates a staircase effect, with a pyramid shape.
+   *
+   * Read more about curves at [curve interpolation](https://mui.com/x/react-charts/funnel/#curve-interpolation).
+   * @default 'linear'
+   */
+  curve?: FunnelCurveType;
+  /**
+   * The label configuration for the funnel plot.
+   * Allows to customize the position and margin of the label that is displayed on the funnel sections.
+   *
+   * If set to `false`, the label will not be displayed.
+   * @default { vertical: 'middle', horizontal: 'center' }
+   */
+  sectionLabel?: FunnelLabelOptions | ((item: FunnelItem) => false | FunnelLabelOptions) | false;
+  /**
+   * Defines if the funnel sections are filled or outlined.
+   *
+   * An `outlined` funnel will have a stroke around the sections and a translucent fill.
+   * A `filled` funnel will have a solid fill and no stroke.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+```
+
+### UseHeatmapSeriesContextReturnValue
+
+```typescript
+type UseHeatmapSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseHeatmapSeriesReturnValue
+
+```typescript
+type UseHeatmapSeriesReturnValue = {
+  /** Maps the `xIndex` and `yIndex` to the corresponding value of the cell. */
+  heatmapData: HeatmapData;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a heatmap value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => HeatmapValueType;
+  type: 'heatmap';
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of this series. */
+  id: string;
+  /**
+   * Data associated to each cell in the heatmap.
+   * Each entry is a tuple [xIndex, yIndex, value].
+   */
+  data: HeatmapValueType[];
+  /**
+   * Function that formats values to be displayed in a tooltip.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: (
+    value: number | null,
+    context: { xIndex: number; yIndex: number },
+  ) => string | null;
+};
+```
+
+### UseItemTooltipReturnValue
+
+```typescript
+type UseItemTooltipReturnValue<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | HeatmapValueType
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | MakeRequired<FunnelValueType, 'id' | 'color'>
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### UseLineSeriesContextReturnValue
+
+```typescript
+type UseLineSeriesContextReturnValue = SeriesProcessorResult<'line'>;
+```
+
+### UseLineSeriesReturnValue
+
+```typescript
+type UseLineSeriesReturnValue = {
+  hidden: boolean;
+  /** The key used to retrieve data from the dataset. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the series value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => number | null;
+  type: 'line';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /**
+   * The value of the line at the base of the series area.
+   *
+   * - `'min'` the area will fill the space **under** the line.
+   * - `'max'` the area will fill the space **above** the line.
+   * - `number` the area will fill the space between this value and the line
+   * @default 0
+   */
+  baseline?: number | 'min' | 'max';
+  /**
+   * Defines how stacked series handle negative values.
+   * @default 'none'
+   */
+  stackOffset?: StackOffsetType;
+  /**
+   * The key that identifies the stacking group.
+   * Series with the same `stack` property will be stacked together.
+   */
+  stack?: string;
+  /**
+   * The order in which series' of the same group are stacked together.
+   * @default 'none'
+   */
+  stackOrder?: StackOrderType;
+  /** If `true`, the series is rendered as an area instead of a line. */
+  area?: boolean;
+  /**
+   * The type of curve to use for the line.
+   * Read more about curves at [line interpolation](https://mui.com/x/react-charts/lines/#interpolation).
+   * @default 'monotoneX'
+   */
+  curve?: CurveType;
+  /**
+   * If `true`, step curve starts and end at the first and last point.
+   * By default the line is extended to fill the space before and after.
+   */
+  strictStepCurve?: boolean;
+  /**
+   * Define which items of the series should display a mark.
+   * If can be a boolean that applies to all items.
+   * Or a callback that gets some item properties and returns true if the item should be displayed.
+   */
+  showMark?: boolean | ((params: ShowMarkParams) => boolean);
+  /**
+   * The shape of the mark elements.
+   * Using 'circle' renders a `<circle />` element, while all other options render a `<path />` instead. The path causes a small decrease in performance.
+   * By default, each series has a different shape, cycling through `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, `'wye'`.
+   * If there are more than 7 series, the shapes will repeat.
+   */
+  shape?: MarkShape;
+  /**
+   * Do not render the line highlight item if set to `true`.
+   * @default false
+   */
+  disableHighlight?: boolean;
+  /**
+   * If `true`, line and area connect points separated by `null` values.
+   * @default false
+   */
+  connectNulls?: boolean;
+  /** The id of this series. */
+  id: string;
+  /** Data associated to the line. */
+  data: (number | null)[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  visibleStackedData: [number, number][];
+  stackedData: [number, number][];
+};
+```
+
+### UsePieSeriesContextReturnValue
+
+```typescript
+type UsePieSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UsePieSeriesReturnValue
+
+```typescript
+type UsePieSeriesReturnValue = {
+  data: DefaultizedPieValueType[];
+  type: 'pie';
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<PieValueType>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * The x coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   * @default '50%'
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the pie center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   * @default '50%'
+   */
+  cy?: number | string;
+  /**
+   * The start angle (deg) of the first item.
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg) of the last item.
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default 0
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius between circle center and the arc label.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The sorting strategy used to order pie slices.
+   * Can be 'none', 'asc', 'desc', or a sorting function.
+   * @default 'none'
+   */
+  sortingValues?: ChartsPieSorting;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        id?: PieItemId;
+        color: string;
+        labelMarkType?: ChartsLabelMarkType;
+        value: number;
+        formattedValue: string;
+        hidden: boolean;
+        label?: string;
+      }) => string);
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** Override the arc attributes when it is faded. */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /** The id of this series. */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<PieValueType>;
+};
+```
+
+### UseRadarAxisParams
+
+```typescript
+type UseRadarAxisParams = {
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### UseRadarItemTooltipReturnValue
+
+```typescript
+type UseRadarItemTooltipReturnValue = {
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+  values: ItemTooltipValue<'radar'>[];
+};
+```
+
+### UseRadarSeriesContextReturnValue
+
+```typescript
+type UseRadarSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseRadarSeriesReturnValue
+
+```typescript
+type UseRadarSeriesReturnValue = {
+  hidden: boolean;
+  type: 'radar';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /** The id of this series. */
+  id: string;
+  data: number[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<number>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+};
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### UseScatterSeriesContextReturnValue
+
+```typescript
+type UseScatterSeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseScatterSeriesReturnValue
+
+```typescript
+type UseScatterSeriesReturnValue = {
+  preview: MakeRequired<NonNullable, 'markerSize'>;
+  hidden: boolean;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return a scatter value.
+   * Can be used as an alternative to `datasetKeys`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => ScatterValueType;
+  type: 'scatter';
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<ScatterValueType | null>) => string;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+  /** The id of the z-axis used to render the series. */
+  zAxisId?: string;
+  /**
+   * The keys used to retrieve data from the dataset.
+   *
+   * When this prop is provided, all of `x`, `y`, and `id` must be provided.
+   * While `z` is optional.
+   */
+  datasetKeys?: { x: string; y: string; z?: string; id?: string };
+  /** The id of this series. */
+  id: string;
+  data: ScatterValueType[];
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter: SeriesValueFormatter<ScatterValueType | null>;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color: string;
+  /** Size of the markers in the scatter plot, in pixels. */
+  markerSize: number;
+};
+```
+
+### VisibilityIdentifier
+
+```typescript
+type VisibilityIdentifier<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type?: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId?: string;
+  seriesId: string;
+};
+```
+
+### VisibilityIdentifierWithType
+
+```typescript
+type VisibilityIdentifierWithType<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+> = {
+  type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+  seriesId: string;
+};
+```
+
+### XAxis
+
+```typescript
+type XAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'x';
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap?: number;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'top' | 'bottom' | 'none';
+  /**
+   * The height of the axis.
+   * Set to `'auto'` to automatically calculate the height based on tick label measurements.
+   * @default 45 if an axis label is provided, 25 otherwise.
+   */
+  height?: number | 'auto';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### YAxis
+
+```typescript
+type YAxis<
+  S extends 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear' =
+    | 'band'
+    | 'point'
+    | 'log'
+    | 'symlog'
+    | 'pow'
+    | 'sqrt'
+    | 'time'
+    | 'utc'
+    | 'linear',
+  V = any,
+> = {
+  /** The data used by `'band'` and `'point'` scales. */
+  data?: V[];
+  /** The key used to retrieve `data` from the `dataset` prop. */
+  dataKey?: string;
+  /**
+   * A function to extract and transform the value from the `dataset` item.
+   * It receives the full dataset item and should return the axis value.
+   * Can be used as an alternative to `dataKey`.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => V;
+  colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
+  /**
+   * Formats the axis value.
+   * @returns The string to display.
+   */
+  valueFormatter?: <TScaleName extends S>(
+    value: V,
+    context: AxisValueFormatterContext<TScaleName>,
+  ) => string;
+  /** The label of the axis. */
+  label?: string;
+  axis?: 'y';
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If true, the axis line is disabled.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If true, the ticks are disabled.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /** The style applied to ticks text. */
+  tickLabelStyle?: ChartsTextStyle;
+  /** The style applied to the axis label. */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+  /**
+   * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+   * @default 0
+   */
+  tickSpacing?: number;
+  /**
+   * The size of the ticks.
+   * @default 6
+   */
+  tickSize?: number;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsAxisClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: Partial<ChartsAxisSlots>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: Partial<ChartsAxisSlotProps>;
+  sx?: SxProps;
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep?: number;
+  /**
+   * Minimal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep?: number;
+  /**
+   * The number of ticks. This number is not guaranteed.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber?: number;
+  /**
+   * Defines which ticks are displayed.
+   * Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   * @see
+   */
+  tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement?: 'middle' | 'tick';
+  /**
+   * The offset of the axis in pixels. It can be used to move the axis from its default position.
+   * X-axis: A top axis will move up, and a bottom axis will move down.
+   * Y-axis: A left axis will move left, and a right axis will move right.
+   * @default 0
+   */
+  offset?: number;
+  scaleType?: 'band' | 'point' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+  /** If `true`, hide this value in the tooltip */
+  hideTooltip?: boolean;
+  /** If `true`, Reverse the axis scaleBand. */
+  reverse?: boolean;
+  /**
+   * Defines the axis scale domain based on the min/max values of series linked to it.
+   * - 'nice': Rounds the domain at human friendly values.
+   * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+   * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+   */
+  domainLimit?:
+    | 'nice'
+    | 'strict'
+    | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+  /** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+  ignoreTooltip?: boolean;
+  /**
+   * Position of the axis.
+   *
+   * When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.
+   *
+   * Set to 'none' to hide the axis.
+   *
+   * The first axis in the list will always have a default position.
+   */
+  position?: 'left' | 'right' | 'none';
+  zoom?: boolean | ZoomOptions;
+  /**
+   * The width of the axis.
+   * Set to `'auto'` to automatically calculate the width based on tick label measurements.
+   * @default 65 if an axis label is provided, 45 otherwise.
+   */
+  width?: number | 'auto';
+  /**
+   * ID used to identify the axis.
+   *
+   * The ID must be unique across all axes in this chart.
+   */
+  id?: AxisId;
+};
+```
+
+### yellowPaletteDark
+
+```typescript
+type yellowPaletteDark = string[];
+```
+
+### yellowPaletteLight
+
+```typescript
+type yellowPaletteLight = string[];
+```
+
+### ZoomData
+
+```typescript
+type ZoomData = {
+  /** The id of the zoomed axis. */
+  axisId: AxisId;
+  /** The starting percentage of the zoom range. In the range of 0 to 100. */
+  start: number;
+  /** The ending percentage of the zoom range. In the range of 0 to 100. */
+  end: number;
+};
+```
+
+### ZoomFilterMode
+
+```typescript
+type ZoomFilterMode = 'keep' | 'discard';
+```
+
+### ZoomOptions
+
+```typescript
+type ZoomOptions = {
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   * @default 0
+   */
+  minStart?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   * @default 100
+   */
+  maxEnd?: number;
+  /**
+   * The step size of the zooming function. Defines the granularity of the zoom.
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimum span size in the range of 0 to 100.
+   *
+   * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximum span size in the range of 0 to 100.
+   *
+   * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   * @default true
+   */
+  panning?: boolean;
+  /**
+   * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+   *
+   * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+   * - `discard`: The data outside the zoomed range is discarded for the other axes.
+   *    The other axes will be adjusted to fit the zoomed range.
+   * @default 'keep'
+   */
+  filterMode?: ZoomFilterMode;
+  /** Configures the zoom slider. The slider is an element that shows the zoomed range and allows its manipulation. */
+  slider?: ZoomSliderOptions;
+};
+```
+
+### ZoomSliderOptions
+
+```typescript
+type ZoomSliderOptions = {
+  /** If `true`, the slider will be shown. */
+  enabled?: boolean;
+  /**
+   * The size reserved for the zoom slider. The actual size of the slider might be smaller, so
+   * increasing this value effectively increases the margin around the slider.
+   * This means the height for the x-axis and the width for the y-axis.
+   * @default 48 if preview is enabled, 28 otherwise.
+   */
+  size?: number;
+  /**
+   * Defines when the tooltip with the zoom values should be shown.
+   * - 'always': The tooltip is always shown.
+   * - 'hover': The tooltip is shown when hovering over the track or thumb.
+   * - 'never': The tooltip is never shown.
+   * @default 'hover'
+   */
+  showTooltip?: ZoomSliderShowTooltip;
+  /**
+   * If `true`, a preview of the chart will be shown in the slider.
+   * Can also be an object to configure which series are shown in the preview.
+   */
+  preview?: boolean | ZoomSliderPreviewOptions;
+};
+```
+
+### ZoomSliderShowTooltip
+
+```typescript
+type ZoomSliderShowTooltip = 'always' | 'hover' | 'never';
+```
+
+## External Types
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  barItemIdentifier: { type: 'bar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (value: number, context: { dataIndex: number }) => string | null;
+```
+
+### hideItem
+
+```typescript
+type hideItem = (identifier: unknown) => void;
+```
+
+### showItem
+
+```typescript
+type showItem = (identifier: unknown) => void;
+```
+
+### toggleItemVisibility
+
+```typescript
+type toggleItemVisibility = (
+  identifier:
+    | unknown
+    | {
+        type: 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey';
+        seriesId: string;
+      },
+) => void;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### Exclude
+
+```typescript
+type Exclude = 'band' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc' | 'linear';
+```
+
+### TriggerOptions
+
+```typescript
+type TriggerOptions = 'item' | 'axis' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.chart-print-export-options.ts b/docs/pages/x/api/charts/types.chart-print-export-options.ts
new file mode 100644
index 0000000000000..28418fd5a39b8
--- /dev/null
+++ b/docs/pages/x/api/charts/types.chart-print-export-options.ts
@@ -0,0 +1,4 @@
+import { ChartPrintExportOptions } from '@mui/x-charts-pro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartPrintExportOptions = createTypes(import.meta.url, ChartPrintExportOptions);
diff --git a/docs/pages/x/api/charts/types.charts-axis-highlight.md b/docs/pages/x/api/charts/types.charts-axis-highlight.md
new file mode 100644
index 0000000000000..d2a6f3391770c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-axis-highlight.md
@@ -0,0 +1,560 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-axis-highlight.md'
+
+## API Reference
+
+### ChartsAxisHighlight
+
+Demos:
+
+- [Custom components](https://mui.com/x/react-charts/components/)
+
+API:
+
+- [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+
+**ChartsAxisHighlight Props:**
+
+| Prop | Type                      | Default | Description |
+| :--- | :------------------------ | :------ | :---------- |
+| x    | `ChartsAxisHighlightType` | -       | -           |
+| y    | `ChartsAxisHighlightType` | -       | -           |
+
+## Additional Types
+
+### chartsAxisHighlightClasses
+
+```typescript
+type chartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClasses
+
+```typescript
+type ChartsAxisHighlightClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChartsAxisHighlightClassKey
+
+```typescript
+type ChartsAxisHighlightClassKey = 'root';
+```
+
+### ChartsAxisHighlightPath
+
+```typescript
+type ChartsAxisHighlightPath = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: { axisHighlight: ChartsAxisHighlightType } },
+  Pick<
+    React.SVGProps<SVGPathElement>,
+    | 'string'
+    | 'path'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'name'
+    | 'fill'
+    | 'values'
+    | 'suppressHydrationWarning'
+    | 'className'
+    | 'color'
+    | 'height'
+    | 'id'
+    | 'lang'
+    | 'max'
+    | 'media'
+    | 'method'
+    | 'min'
+    | 'nonce'
+    | 'part'
+    | 'target'
+    | 'type'
+    | 'width'
+    | 'role'
+    | 'tabIndex'
+    | 'crossOrigin'
+    | 'accentHeight'
+    | 'accumulate'
+    | 'additive'
+    | 'alignmentBaseline'
+    | 'allowReorder'
+    | 'alphabetic'
+    | 'amplitude'
+    | 'arabicForm'
+    | 'ascent'
+    | 'attributeName'
+    | 'attributeType'
+    | 'autoReverse'
+    | 'azimuth'
+    | 'baseFrequency'
+    | 'baselineShift'
+    | 'baseProfile'
+    | 'bbox'
+    | 'begin'
+    | 'bias'
+    | 'by'
+    | 'calcMode'
+    | 'capHeight'
+    | 'clip'
+    | 'clipPathUnits'
+    | 'clipRule'
+    | 'colorInterpolation'
+    | 'colorInterpolationFilters'
+    | 'colorProfile'
+    | 'colorRendering'
+    | 'contentScriptType'
+    | 'contentStyleType'
+    | 'cursor'
+    | 'cx'
+    | 'cy'
+    | 'd'
+    | 'decelerate'
+    | 'descent'
+    | 'diffuseConstant'
+    | 'direction'
+    | 'display'
+    | 'divisor'
+    | 'dominantBaseline'
+    | 'dur'
+    | 'dx'
+    | 'dy'
+    | 'edgeMode'
+    | 'elevation'
+    | 'enableBackground'
+    | 'end'
+    | 'exponent'
+    | 'externalResourcesRequired'
+    | 'fillOpacity'
+    | 'fillRule'
+    | 'filterRes'
+    | 'filterUnits'
+    | 'floodColor'
+    | 'floodOpacity'
+    | 'focusable'
+    | 'fontFamily'
+    | 'fontSize'
+    | 'fontSizeAdjust'
+    | 'fontStretch'
+    | 'fontStyle'
+    | 'fontVariant'
+    | 'fontWeight'
+    | 'format'
+    | 'fr'
+    | 'from'
+    | 'fx'
+    | 'fy'
+    | 'g1'
+    | 'g2'
+    | 'glyphName'
+    | 'glyphOrientationHorizontal'
+    | 'glyphOrientationVertical'
+    | 'glyphRef'
+    | 'gradientTransform'
+    | 'gradientUnits'
+    | 'hanging'
+    | 'horizAdvX'
+    | 'horizOriginX'
+    | 'href'
+    | 'ideographic'
+    | 'imageRendering'
+    | 'in2'
+    | 'in'
+    | 'intercept'
+    | 'k1'
+    | 'k2'
+    | 'k3'
+    | 'k4'
+    | 'k'
+    | 'kernelMatrix'
+    | 'kernelUnitLength'
+    | 'kerning'
+    | 'keyPoints'
+    | 'keySplines'
+    | 'keyTimes'
+    | 'lengthAdjust'
+    | 'letterSpacing'
+    | 'lightingColor'
+    | 'limitingConeAngle'
+    | 'local'
+    | 'markerEnd'
+    | 'markerHeight'
+    | 'markerMid'
+    | 'markerStart'
+    | 'markerUnits'
+    | 'markerWidth'
+    | 'maskContentUnits'
+    | 'maskUnits'
+    | 'mathematical'
+    | 'mode'
+    | 'numOctaves'
+    | 'offset'
+    | 'opacity'
+    | 'operator'
+    | 'order'
+    | 'orient'
+    | 'orientation'
+    | 'origin'
+    | 'overflow'
+    | 'overlinePosition'
+    | 'overlineThickness'
+    | 'paintOrder'
+    | 'panose1'
+    | 'pathLength'
+    | 'patternContentUnits'
+    | 'patternTransform'
+    | 'patternUnits'
+    | 'pointerEvents'
+    | 'points'
+    | 'pointsAtX'
+    | 'pointsAtY'
+    | 'pointsAtZ'
+    | 'preserveAlpha'
+    | 'preserveAspectRatio'
+    | 'primitiveUnits'
+    | 'r'
+    | 'radius'
+    | 'refX'
+    | 'refY'
+    | 'renderingIntent'
+    | 'repeatCount'
+    | 'repeatDur'
+    | 'requiredExtensions'
+    | 'requiredFeatures'
+    | 'restart'
+    | 'result'
+    | 'rotate'
+    | 'rx'
+    | 'ry'
+    | 'scale'
+    | 'seed'
+    | 'shapeRendering'
+    | 'slope'
+    | 'spacing'
+    | 'specularConstant'
+    | 'specularExponent'
+    | 'speed'
+    | 'spreadMethod'
+    | 'startOffset'
+    | 'stdDeviation'
+    | 'stemh'
+    | 'stemv'
+    | 'stitchTiles'
+    | 'stopColor'
+    | 'stopOpacity'
+    | 'strikethroughPosition'
+    | 'strikethroughThickness'
+    | 'stroke'
+    | 'strokeDasharray'
+    | 'strokeDashoffset'
+    | 'strokeLinecap'
+    | 'strokeLinejoin'
+    | 'strokeMiterlimit'
+    | 'strokeOpacity'
+    | 'strokeWidth'
+    | 'surfaceScale'
+    | 'systemLanguage'
+    | 'tableValues'
+    | 'targetX'
+    | 'targetY'
+    | 'textAnchor'
+    | 'textDecoration'
+    | 'textLength'
+    | 'textRendering'
+    | 'to'
+    | 'transform'
+    | 'u1'
+    | 'u2'
+    | 'underlinePosition'
+    | 'underlineThickness'
+    | 'unicode'
+    | 'unicodeBidi'
+    | 'unicodeRange'
+    | 'unitsPerEm'
+    | 'vAlphabetic'
+    | 'vectorEffect'
+    | 'version'
+    | 'vertAdvY'
+    | 'vertOriginX'
+    | 'vertOriginY'
+    | 'vHanging'
+    | 'vIdeographic'
+    | 'viewBox'
+    | 'viewTarget'
+    | 'visibility'
+    | 'vMathematical'
+    | 'widths'
+    | 'wordSpacing'
+    | 'writingMode'
+    | 'x1'
+    | 'x2'
+    | 'x'
+    | 'xChannelSelector'
+    | 'xHeight'
+    | 'xlinkActuate'
+    | 'xlinkArcrole'
+    | 'xlinkHref'
+    | 'xlinkRole'
+    | 'xlinkShow'
+    | 'xlinkTitle'
+    | 'xlinkType'
+    | 'xmlBase'
+    | 'xmlLang'
+    | 'xmlns'
+    | 'xmlnsXlink'
+    | 'xmlSpace'
+    | 'y1'
+    | 'y2'
+    | 'y'
+    | 'yChannelSelector'
+    | 'z'
+    | 'zoomAndPan'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'ref'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### ChartsAxisHighlightProps
+
+```typescript
+type ChartsAxisHighlightProps = { x?: ChartsAxisHighlightType; y?: ChartsAxisHighlightType };
+```
+
+### ChartsAxisHighlightType
+
+```typescript
+type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+```
diff --git a/docs/pages/x/api/charts/types.charts-axis-highlight.ts b/docs/pages/x/api/charts/types.charts-axis-highlight.ts
new file mode 100644
index 0000000000000..f4627df114af4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-axis-highlight.ts
@@ -0,0 +1,4 @@
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsAxisHighlight = createTypes(import.meta.url, ChartsAxisHighlight);
diff --git a/docs/pages/x/api/charts/types.charts-axis-tooltip-content.md b/docs/pages/x/api/charts/types.charts-axis-tooltip-content.md
new file mode 100644
index 0000000000000..c32758bcbe22c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-axis-tooltip-content.md
@@ -0,0 +1,2050 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-axis-tooltip-content.md'
+
+## API Reference
+
+### ChartsAxisTooltipContent
+
+**ChartsAxisTooltipContent Props:**
+
+| Prop    | Type                            | Default  | Description                                                                                                                                                                                   |
+| :------ | :------------------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes | `Partial<ChartsTooltipClasses>` | -        | Override or extend the styles applied to the component.                                                                                                                                       |
+| sort    | `'none' \| 'asc' \| 'desc'`     | `'none'` | The sort in which series items are displayed in the tooltip.&#xA;When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value. |
+| sx      | `SxProps<Theme>`                | -        | -                                                                                                                                                                                             |
+
+### ChartsItemTooltipContent
+
+**ChartsItemTooltipContent Props:**
+
+| Prop    | Type                            | Default | Description                                             |
+| :------ | :------------------------------ | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipClasses>` | -       | Override or extend the styles applied to the component. |
+| sx      | `SxProps<Theme>`                | -       | -                                                       |
+
+### ChartsTooltip
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                                                                                                                |
+| :-------- | :--------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                                                                                                                    |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                                                                                                                  |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                                                                                                                    |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                                                                                                               |
+| sort      | `'none' \| 'desc' \| 'asc'`              | `'none'`    | Defines the sort order in which series items are displayed in the axis tooltip.&#xA;When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.&#xA;Only applies when `trigger='axis'`. |
+| trigger   | `'item' \| 'axis' \| 'none'`             | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip.                                                                                         |
+| anchor    | `'pointer' \| 'node' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                                                                                                          |
+
+### ChartsTooltipContainer
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltipContainer Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                        |
+| :-------- | :--------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                            |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                          |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                            |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                       |
+| trigger   | `TriggerOptions`                         | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip. |
+| anchor    | `'pointer' \| 'node' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                  |
+| children  | `React.ReactNode`                        | -           | -                                                                                                                                                                                  |
+
+### useAxesTooltip
+
+Returns the axes to display in the tooltip and the series item related to them.
+
+**useAxesTooltip Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| params    | `UseAxesTooltipParams` | -       | -           |
+
+**useAxesTooltip Return Value:**
+
+```tsx
+type ReturnValue =
+  | UseAxesTooltipReturnValue<'bar' | 'line' | 'scatter' | 'radar', string | number | Date>[]
+  | null;
+```
+
+### useItemTooltip
+
+Returns a config object when the tooltip contains a single item to display.
+Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+
+**useItemTooltip Return Value:**
+
+The tooltip item config
+
+```tsx
+type ReturnValue = UseItemTooltipReturnValue<'bar' | 'line' | 'scatter' | 'pie'> | null;
+```
+
+### useRadarItemTooltip
+
+Contains an object per value with their content and the label of the associated metric.
+
+**useRadarItemTooltip Return Value:**
+
+The tooltip item configs
+
+```tsx
+type ReturnValue = UseRadarItemTooltipReturnValue | null;
+```
+
+## Additional Types
+
+### ChartsAxisTooltipContentClasses
+
+```typescript
+type ChartsAxisTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsAxisTooltipContentProps
+
+```typescript
+type ChartsAxisTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### ChartsItemTooltipContentClasses
+
+```typescript
+type ChartsItemTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsItemTooltipContentProps
+
+```typescript
+type ChartsItemTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsTooltipCell
+
+```typescript
+type ChartsTooltipCell = StyledComponent<
+  Pick<
+    TypographyOwnProps &
+      CommonProps &
+      Omit<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+        | 'color'
+        | 'children'
+        | 'style'
+        | 'className'
+        | 'sx'
+        | 'classes'
+        | 'align'
+        | 'gutterBottom'
+        | 'noWrap'
+        | 'variant'
+        | 'variantMapping'
+      >,
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'ref'
+    | 'key'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'sx'
+    | 'classes'
+    | 'align'
+    | 'gutterBottom'
+    | 'noWrap'
+    | 'variant'
+    | 'variantMapping'
+  > &
+    MUIStyledCommonProps<Theme> & { component?: React.ElementType },
+  {},
+  {}
+>;
+```
+
+### chartsTooltipClasses
+
+```typescript
+type chartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClasses
+
+```typescript
+type ChartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClassKey
+
+```typescript
+type ChartsTooltipClassKey = 'root' | 'paper' | 'table' | 'row' | 'cell' | 'mark' | 'axisValueCell';
+```
+
+### ChartsTooltipContainerClasses
+
+```typescript
+type ChartsTooltipContainerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipContainerProps
+
+```typescript
+type ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'pointer' | 'node' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  children?: React.ReactNode;
+};
+```
+
+### ChartsTooltipContainerSlotProps
+
+```typescript
+type ChartsTooltipContainerSlotProps = {};
+```
+
+### ChartsTooltipContainerSlots
+
+```typescript
+type ChartsTooltipContainerSlots = {};
+```
+
+### ChartsTooltipPaper
+
+```typescript
+type ChartsTooltipPaper = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipProps
+
+```typescript
+type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'pointer' | 'node' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: 'none' | 'desc' | 'asc';
+};
+```
+
+### ChartsTooltipRow
+
+```typescript
+type ChartsTooltipRow = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
+    | 'ref'
+    | 'key'
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipSlotProps
+
+```typescript
+type ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<ChartsTooltipProps<T>>;
+};
+```
+
+### ChartsTooltipSlots
+
+```typescript
+type ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    ChartsTooltipProps<T>,
+    | 'symbol'
+    | 'object'
+    | 'table'
+    | 'mark'
+    | 'line'
+    | 'data'
+    | 'legend'
+    | 'circle'
+    | 'label'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipTable
+
+```typescript
+type ChartsTooltipTable = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
+    | 'ref'
+    | 'key'
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'summary'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'border'
+    | 'width'
+    | 'bgcolor'
+    | 'align'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'frame'
+    | 'rules'
+  >,
+  {}
+>;
+```
+
+### ItemTooltip
+
+```typescript
+type ItemTooltip<SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar'> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### SeriesItem
+
+```typescript
+type SeriesItem<T extends 'bar' | 'line' | 'scatter' | 'radar'> = {
+  seriesId: string;
+  color: string;
+  value:
+    | { open: number; high: number; low: number; close: number }
+    | number
+    | ScatterValueType
+    | null;
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkType | undefined;
+  markShape: MarkShape | undefined;
+};
+```
+
+### UseAxesTooltipParams
+
+```typescript
+type UseAxesTooltipParams = {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+};
+```
+
+### UseAxesTooltipReturnValue
+
+```typescript
+type UseAxesTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'radar' = 'bar' | 'line' | 'scatter' | 'radar', AxisValueT extends string | number | Date = string | number | Date> = { axisDirection: 'x' | 'y' | 'rotation' | 'radius';
+mainAxis: { /** The data used by `'band'` and `'point'` scales. */
+data?: any[];
+/** The label of the axis. */
+label?: string;
+/**
+ * The props used for each component slot.
+ * @default {}
+ */
+slotProps?: Partial<ChartsAxisSlotProps>;
+/**
+ * Overridable component slots.
+ * @default {}
+ */
+slots?: Partial<ChartsAxisSlots>;
+/** A CSS class name applied to the root element. */
+className?: string;
+/**
+ * ID used to identify the axis.
+ *
+ * The ID must be unique across all axes in this chart.
+ */
+id: AxisId;
+sx?: SxProps;
+/** Override or extend the styles applied to the component. */
+classes?: Partial<ChartsAxisClasses>;
+/** If `true`, Reverse the axis scaleBand. */
+reverse?: boolean;
+/**
+ * If true, the axis line is disabled.
+ * @default false
+ */
+disableLine?: boolean;
+/**
+ * If true, the ticks are disabled.
+ * @default false
+ */
+disableTicks?: boolean;
+/** The style applied to ticks text. */
+tickLabelStyle?: ChartsTextStyle;
+/** The style applied to the axis label. */
+labelStyle?: ChartsTextStyle;
+/**
+ * Defines which ticks get its label displayed. Its value can be:
+ * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+ * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+ * @default 'auto'
+ */
+tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+/**
+ * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+ * @default 0
+ */
+tickSpacing?: number;
+/**
+ * The size of the ticks.
+ * @default 6
+ */
+tickSize?: number;
+/**
+ * Maximal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMaxStep?: number;
+/**
+ * Minimal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMinStep?: number;
+/**
+ * The number of ticks. This number is not guaranteed.
+ * Not supported by categorical axis (band, points).
+ */
+tickNumber?: number;
+/**
+ * Defines which ticks are displayed.
+ * Its value can be:
+ * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+ * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+ * - an array containing the values where ticks should be displayed.
+ * @default 'auto'
+ * @see
+ */
+tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+/**
+ * The placement of ticks in regard to the band interval.
+ * Only used if scale is 'band'.
+ * @default 'extremities'
+ */
+tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+/**
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
+ * Only used if scale is 'band'.
+ * @default 'middle'
+ */
+tickLabelPlacement?: 'middle' | 'tick';
+colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig | { type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string); type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'piecewise'; thresholds: (number | Date)[]; colors: string[]; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] };
+/** The key used to retrieve `data` from the `dataset` prop. */
+dataKey?: string;
+/**
+ * A function to extract and transform the value from the `dataset` item.
+ * It receives the full dataset item and should return the axis value.
+ * Can be used as an alternative to `dataKey`.
+ * @returns The transformed value.
+ */
+valueGetter?: ((item: DatasetElementType<unknown>) => any);
+/**
+ * Formats the axis value.
+ * @returns The string to display.
+ */
+valueFormatter?: (<TScaleName extends S>(value: any, context: AxisValueFormatterContext<TScaleName>) => string);
+/** If `true`, hide this value in the tooltip */
+hideTooltip?: boolean;
+/**
+ * Defines the axis scale domain based on the min/max values of series linked to it.
+ * - 'nice': Rounds the domain at human friendly values.
+ * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+ * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+ */
+domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+/** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+ignoreTooltip?: boolean;
+/**
+ * The offset of the axis in pixels. It can be used to move the axis from its default position.
+ * X-axis: A top axis will move up, and a bottom axis will move down.
+ * Y-axis: A left axis will move left, and a right axis will move right.
+ * @default 0
+ */
+offset?: number;
+scaleType: 'time' | 'log' | 'linear' | 'symlog' | 'pow' | 'sqrt' | 'utc' | 'band' | 'point';
+scale: ScaleTime<number, number, never> | ScaleLogarithmic<number, number, never> | ScaleLinear<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }>;
+colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null, never> | ScaleThreshold<number, string | null, never> | ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null>;
+/** Indicate if the axis should be consider by a tooltip with `trigger='axis'`. */
+triggerTooltip?: boolean };
+axisId: AxisId;
+axisValue: AxisValueT;
+axisFormattedValue: string;
+dataIndex: number;
+seriesItems: SeriesItem<SeriesType>[] }
+```
+
+### UseItemTooltipReturnValue
+
+```typescript
+type UseItemTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar'> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### UseRadarItemTooltipReturnValue
+
+```typescript
+type UseRadarItemTooltipReturnValue = {
+  /** The series mark shape. */
+  markShape?: MarkShape;
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  values: ItemTooltipValue<'radar'>[];
+};
+```
+
+## External Types
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### TriggerOptions
+
+```typescript
+type TriggerOptions = 'item' | 'axis' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.charts-axis-tooltip-content.ts b/docs/pages/x/api/charts/types.charts-axis-tooltip-content.ts
new file mode 100644
index 0000000000000..e997a21c635e3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-axis-tooltip-content.ts
@@ -0,0 +1,4 @@
+import { ChartsAxisTooltipContent } from '@mui/x-charts/ChartsTooltip';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsAxisTooltipContent = createTypes(import.meta.url, ChartsAxisTooltipContent);
diff --git a/docs/pages/x/api/charts/types.charts-axis.md b/docs/pages/x/api/charts/types.charts-axis.md
new file mode 100644
index 0000000000000..03531ba89d055
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-axis.md
@@ -0,0 +1,181 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-axis.md'
+
+## API Reference
+
+### ChartsAxis
+
+Demos:
+
+- [Axis](https://mui.com/x/react-charts/axis/)
+
+API:
+
+- [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+
+**ChartsAxis Props:**
+
+| Prop      | Type                  | Default | Description                             |
+| :-------- | :-------------------- | :------ | :-------------------------------------- |
+| slotProps | `ChartsAxisSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `ChartsAxisSlots`     | `{}`    | Overridable component slots.            |
+
+## Additional Types
+
+### axisClasses
+
+```typescript
+type axisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### ChartsAxisClasses
+
+```typescript
+type ChartsAxisClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the main line element. */
+  line: string;
+  /** Styles applied to group including the tick and its label. */
+  tickContainer: string;
+  /** Styles applied to ticks. */
+  tick: string;
+  /**
+   * Styles applied to ticks label.
+   *
+   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
+   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
+   */
+  tickLabel: string;
+  /** Styles applied to the group containing the axis label. */
+  label: string;
+  /** Styles applied to x-axes. */
+  directionX: string;
+  /** Styles applied to y-axes. */
+  directionY: string;
+  /** Styles applied to the top axis. */
+  top: string;
+  /** Styles applied to the bottom axis. */
+  bottom: string;
+  /** Styles applied to the left axis. */
+  left: string;
+  /** Styles applied to the right axis. */
+  right: string;
+};
+```
+
+### ChartsAxisClassKey
+
+```typescript
+type ChartsAxisClassKey =
+  | 'root'
+  | 'line'
+  | 'tickContainer'
+  | 'tick'
+  | 'tickLabel'
+  | 'label'
+  | 'directionX'
+  | 'directionY'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right';
+```
+
+### ChartsAxisProps
+
+```typescript
+type ChartsAxisProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsAxisSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsAxisSlotProps;
+};
+```
+
+### ChartsAxisSlotProps
+
+```typescript
+type ChartsAxisSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+};
+```
+
+### ChartsAxisSlots
+
+```typescript
+type ChartsAxisSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+};
+```
diff --git a/docs/pages/x/api/charts/types.charts-axis.ts b/docs/pages/x/api/charts/types.charts-axis.ts
new file mode 100644
index 0000000000000..36e8a2014a62d
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-axis.ts
@@ -0,0 +1,4 @@
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsAxis = createTypes(import.meta.url, ChartsAxis);
diff --git a/docs/pages/x/api/charts/types.charts-brush-overlay.md b/docs/pages/x/api/charts/types.charts-brush-overlay.md
new file mode 100644
index 0000000000000..d7d2461064232
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-brush-overlay.md
@@ -0,0 +1,62 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-brush-overlay.md'
+
+## API Reference
+
+### ChartsBrushOverlay
+
+Component that renders visual feedback during brush interaction
+
+**ChartsBrushOverlay Props:**
+
+| Prop      | Type     | Default | Description                                   |
+| :-------- | :------- | :------ | :-------------------------------------------- |
+| className | `string` | -       | A CSS class name applied to the root element. |
+
+## Additional Types
+
+### brushOverlayClasses
+
+```typescript
+type brushOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+};
+```
+
+### BrushOverlayClasses
+
+```typescript
+type BrushOverlayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the brush lines. */
+  rect: string;
+  /** Styles applied when the brush is selecting the x axis. */
+  x: string;
+  /** Styles applied when the brush is selecting the y axis. */
+  y: string;
+};
+```
+
+### BrushOverlayClassKey
+
+```typescript
+type BrushOverlayClassKey = 'root' | 'rect' | 'x' | 'y';
+```
+
+### ChartsBrushOverlayProps
+
+```typescript
+type ChartsBrushOverlayProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+};
+```
diff --git a/docs/pages/x/api/charts/types.charts-brush-overlay.ts b/docs/pages/x/api/charts/types.charts-brush-overlay.ts
new file mode 100644
index 0000000000000..f60246694de2e
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-brush-overlay.ts
@@ -0,0 +1,4 @@
+import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsBrushOverlay = createTypes(import.meta.url, ChartsBrushOverlay);
diff --git a/docs/pages/x/api/charts/types.charts-clip-path.md b/docs/pages/x/api/charts/types.charts-clip-path.md
new file mode 100644
index 0000000000000..705d6e0409ae4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-clip-path.md
@@ -0,0 +1,35 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-clip-path.md'
+
+## API Reference
+
+### ChartsClipPath
+
+API:
+
+- [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+
+**ChartsClipPath Props:**
+
+| Prop   | Type                                                               | Default | Description                                                                                                                             |
+| :----- | :----------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
+| offset | `{ top?: number; right?: number; bottom?: number; left?: number }` | -       | Offset, in pixels, of the clip path rectangle from the drawing area. A positive value will move the rectangle outside the drawing area. |
+| id\*   | `string`                                                           | -       | The id of the clip path.                                                                                                                |
+
+## Additional Types
+
+### ChartsClipPathProps
+
+```typescript
+type ChartsClipPathProps = {
+  /** The id of the clip path. */
+  id: string;
+  /**
+   * Offset, in pixels, of the clip path rectangle from the drawing area.
+   *
+   * A positive value will move the rectangle outside the drawing area.
+   */
+  offset?: { top?: number; right?: number; bottom?: number; left?: number };
+};
+```
diff --git a/docs/pages/x/api/charts/types.charts-clip-path.ts b/docs/pages/x/api/charts/types.charts-clip-path.ts
new file mode 100644
index 0000000000000..848f58004e11c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-clip-path.ts
@@ -0,0 +1,4 @@
+import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsClipPath = createTypes(import.meta.url, ChartsClipPath);
diff --git a/docs/pages/x/api/charts/types.charts-container-premium.md b/docs/pages/x/api/charts/types.charts-container-premium.md
new file mode 100644
index 0000000000000..59813872f5b8e
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-container-premium.md
@@ -0,0 +1,199 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-container-premium.md'
+
+## API Reference
+
+### ChartsContainerPremium
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPremium` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPremium API](https://mui.com/x/api/charts/charts-container-premium/)
+
+**ChartsContainerPremium Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| RangeBarSeriesType \| OHLCSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'rangeBar' \| 'ohlc' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+
+## Additional Types
+
+### ChartsContainerPremiumProps
+
+```typescript
+type ChartsContainerPremiumProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'rangeBar'
+    | 'ohlc'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'rangeBar'
+    | 'ohlc'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderPremiumSlots>;
+    slotProps?: Partial<ChartsDataProviderPremiumSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsContainerPremiumSlotProps
+
+```typescript
+type ChartsContainerPremiumSlotProps = {};
+```
+
+### ChartsContainerPremiumSlots
+
+```typescript
+type ChartsContainerPremiumSlots = {};
+```
+
+## External Types
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
diff --git a/docs/pages/x/api/charts/types.charts-container-premium.ts b/docs/pages/x/api/charts/types.charts-container-premium.ts
new file mode 100644
index 0000000000000..a275308d97529
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-container-premium.ts
@@ -0,0 +1,4 @@
+import { ChartsContainerPremium } from '@mui/x-charts-premium/ChartsContainerPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsContainerPremium = createTypes(import.meta.url, ChartsContainerPremium);
diff --git a/docs/pages/x/api/charts/types.charts-container-pro.md b/docs/pages/x/api/charts/types.charts-container-pro.md
new file mode 100644
index 0000000000000..6ccbe34e56009
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-container-pro.md
@@ -0,0 +1,161 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-container-pro.md'
+
+## API Reference
+
+### ChartsContainerPro
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProviderPro` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainerPro API](https://mui.com/x/api/charts/charts-container-pro/)
+
+**ChartsContainerPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(BarSeriesType \| HeatmapSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| sx                   | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| title                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+| className            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+
+## Additional Types
+
+### ChartProApi
+
+```typescript
+type ChartProApi<
+  ChartType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'composition'
+    | undefined = undefined,
+  Signatures extends ChartAnyPluginSignature[] = {},
+> = ChartProApiOriginal<ChartType, Signatures>;
+```
+
+### ChartsContainerProProps
+
+```typescript
+type ChartsContainerProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & ChartsSurfaceProps;
+```
+
+### ChartsContainerProSlotProps
+
+```typescript
+type ChartsContainerProSlotProps = {};
+```
+
+### ChartsContainerProSlots
+
+```typescript
+type ChartsContainerProSlots = {};
+```
+
+## External Types
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
diff --git a/docs/pages/x/api/charts/types.charts-container-pro.ts b/docs/pages/x/api/charts/types.charts-container-pro.ts
new file mode 100644
index 0000000000000..4cda0205b57ef
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-container-pro.ts
@@ -0,0 +1,4 @@
+import { ChartsContainerPro } from '@mui/x-charts-pro/ChartsContainerPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsContainerPro = createTypes(import.meta.url, ChartsContainerPro);
diff --git a/docs/pages/x/api/charts/types.charts-container.md b/docs/pages/x/api/charts/types.charts-container.md
new file mode 100644
index 0000000000000..f835894178834
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-container.md
@@ -0,0 +1,242 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-container.md'
+
+## API Reference
+
+### ChartsContainer
+
+It sets up the data providers as well as the `<svg>` for the chart.
+
+This is a combination of both the `ChartsDataProvider` and `ChartsSurface` components.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsContainer API](https://mui.com/x/api/charts/charts-container/)
+
+**ChartsContainer Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `(VisibilityIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| VisibilityIdentifier<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `HighlightItemIdentifier<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| HighlightItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `(VisibilityIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| VisibilityIdentifier<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: (VisibilityIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>)[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: HighlightItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when clicking close to an item.&#xA;This is only available for scatter plot for now.                                                                                                                                                                                                                                   |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>>, ChartPlugin<UseChartPolarAxisSignature>, ChartPlugin<UseChartTooltipSignature<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>>, ChartPlugin<UseChartClosestPointSignature>, ChartPlugin<UseChartKeyboardNavigationSignature>]` | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| radiusAxis                | `(AxisConfig<'linear', any, ChartsRadiusAxisProps>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | The configuration of the radial-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                   |
+| rotationAxis              | `RotationAxis[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration of the rotation-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                 |
+| series                    | `(BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                                                                                |
+| seriesConfig              | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `Partial<ChartsContainerSlotProps>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The props for the slots.                                                                                                                                                                                                                                                                                                              |
+| slots                     | `Partial<ChartsContainerSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                                                                                |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `SeriesItemIdentifier<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| SeriesItemIdentifierWithType<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]`                                        | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]`                                        | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+## Additional Types
+
+### ChartsContainerProps
+
+```typescript
+type ChartsContainerProps<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartCartesianAxisSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartPolarAxisSignature,
+    UseChartTooltipSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartVisibilityManagerSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartClosestPointSignature,
+    UseChartKeyboardNavigationSignature
+  >,
+> = {
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [] | [ChartPlugin<ChartAnyPluginSignature>];
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: ChartSeriesConfig<any> & ChartSeriesConfig<SeriesType>;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Slots to customize charts' components. */
+  slots?: Partial<ChartsDataProviderSlots>;
+  /** The props for the slots. */
+  slotProps?: Partial<ChartsDataProviderSlotProps>;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: number | Partial<ChartMargin>;
+  /**
+   * The array of series to display.
+   * Each type of series has its own specificity.
+   * Please refer to the appropriate docs page to learn more about it.
+   */
+  series?: (
+    | BarSeriesType
+    | LineSeriesType
+    | ScatterSeriesType
+    | PieSeriesType<MakeOptional<PieValueType, 'id'>>
+    | RadarSeriesType
+  )[];
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: {} | LineExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  className?: string;
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+};
+```
+
+### ChartsContainerSlotProps
+
+```typescript
+type ChartsContainerSlotProps = {
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ChartsContainerSlots
+
+```typescript
+type ChartsContainerSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+## External Types
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: any;
+  params: any;
+  store: { state: any; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.charts-container.ts b/docs/pages/x/api/charts/types.charts-container.ts
new file mode 100644
index 0000000000000..b12f76bbefd3c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-container.ts
@@ -0,0 +1,4 @@
+import { ChartsContainer } from '@mui/x-charts/ChartsContainer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsContainer = createTypes(import.meta.url, ChartsContainer);
diff --git a/docs/pages/x/api/charts/types.charts-data-provider-premium.md b/docs/pages/x/api/charts/types.charts-data-provider-premium.md
new file mode 100644
index 0000000000000..6c3cbfe5d655b
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-data-provider-premium.md
@@ -0,0 +1,677 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-data-provider-premium.md'
+
+## API Reference
+
+### ChartsDataProviderPremium
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPremium API](https://mui.com/x/api/charts/charts-data-provider-premium/)
+
+**ChartsDataProviderPremium Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| RangeBarSeriesType \| OHLCSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'rangeBar' \| 'ohlc' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | -                                                                                                                                                                                                                                                                            |
+
+## Additional Types
+
+### ChartsDataProviderPremiumProps
+
+```typescript
+type ChartsDataProviderPremiumProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'rangeBar'
+    | 'ohlc'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'rangeBar'
+    | 'ohlc'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      | 'bar'
+      | 'line'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'rangeBar'
+      | 'ohlc'
+      | 'heatmap'
+      | 'funnel'
+      | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderPremiumSlots>;
+    slotProps?: Partial<ChartsDataProviderPremiumSlotProps>;
+  };
+```
+
+### ChartsDataProviderPremiumSlotProps
+
+```typescript
+type ChartsDataProviderPremiumSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderPremiumSlots
+
+```typescript
+type ChartsDataProviderPremiumSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### defaultSeriesConfigPremium
+
+```typescript
+type defaultSeriesConfigPremium = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+  rangeBar: ChartSeriesTypeConfig<'rangeBar'>;
+  ohlc: ChartSeriesTypeConfig<'ohlc'>;
+};
+```
+
+## External Types
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.charts-data-provider-premium.ts b/docs/pages/x/api/charts/types.charts-data-provider-premium.ts
new file mode 100644
index 0000000000000..3c8b278753684
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-data-provider-premium.ts
@@ -0,0 +1,4 @@
+import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsDataProviderPremium = createTypes(import.meta.url, ChartsDataProviderPremium);
diff --git a/docs/pages/x/api/charts/types.charts-data-provider-pro.md b/docs/pages/x/api/charts/types.charts-data-provider-pro.md
new file mode 100644
index 0000000000000..69fd66b096d43
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-data-provider-pro.md
@@ -0,0 +1,618 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-data-provider-pro.md'
+
+## API Reference
+
+### ChartsDataProviderPro
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+API:
+
+- [ChartsDataProviderPro API](https://mui.com/x/api/charts/charts-data-provider-pro/)
+
+**ChartsDataProviderPro Props:**
+
+| Prop                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(HeatmapSeriesType \| BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType \| FunnelSeriesType \| SankeySeriesType)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar' \| 'heatmap' \| 'funnel' \| 'sankey'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `{ baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; baseDivider?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' \| 'vertical' }; baseMenuItem?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; dense?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties }; baseMenuList?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean }; basePopper?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement }; baseTooltip?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean }; baseButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number }; baseIconButton?: React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number; size?: 'small' \| 'medium' \| 'large' }; zoomInIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' }; exportIcon?: React.DOMAttributes<SVGSVGElement> & { className?: string; style?: React.CSSProperties } & { titleAccess?: string; fontSize?: 'small' \| 'medium' \| 'large' \| 'inherit' } }` | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `{ baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; baseDivider?: React.ComponentType<ChartBaseDividerProps>; baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>; baseMenuList?: React.ComponentType<ChartBaseMenuListProps>; basePopper?: React.ComponentType<ChartBasePopperProps>; baseTooltip?: React.ComponentType<ChartBaseTooltipProps>; baseButton?: React.ComponentType<ChartBaseButtonProps>; baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>; zoomInIcon?: React.ComponentType<ChartBaseIconProps>; zoomOutIcon?: React.ComponentType<ChartBaseIconProps>; exportIcon?: React.ComponentType<ChartBaseIconProps> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                            |
+
+## Additional Types
+
+### ChartsDataProviderProProps
+
+```typescript
+type ChartsDataProviderProProps<
+  SeriesType extends
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey' = 'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartTooltipSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartInteractionSignature,
+    UseChartCartesianAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartPolarAxisSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartHighlightSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >,
+    UseChartProZoomSignature,
+    UseChartProExportSignature,
+    UseChartVisibilityManagerSignature<
+      'bar' | 'line' | 'scatter' | 'pie' | 'radar' | 'heatmap' | 'funnel' | 'sankey'
+    >
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  } & {
+    slots?: Partial<ChartsDataProviderProSlots>;
+    slotProps?: Partial<ChartsDataProviderProSlotProps>;
+  };
+```
+
+### ChartsDataProviderProSlotProps
+
+```typescript
+type ChartsDataProviderProSlotProps = {
+  baseDivider: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### ChartsDataProviderProSlots
+
+```typescript
+type ChartsDataProviderProSlots = {
+  baseDivider: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### defaultSeriesConfigPro
+
+```typescript
+type defaultSeriesConfigPro = {
+  bar: ChartSeriesTypeConfig<'bar'>;
+  line: ChartSeriesTypeConfig<'line'>;
+  scatter: ChartSeriesTypeConfig<'scatter'>;
+  pie: {
+    seriesProcessor: SeriesProcessor<'pie'>;
+    /** A processor to add series layout when the layout does not depend from other series. */
+    seriesLayout?: SeriesLayoutGetter<'pie'>;
+    colorProcessor: ColorProcessor<'pie'>;
+    legendGetter: LegendGetter<'pie'>;
+    tooltipGetter: TooltipGetter<'pie'>;
+    ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+    tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+    getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+    keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+    /**
+     * A function to serialize the series item identifier into a unique string.
+     * @returns A unique string representation of the identifier.
+     */
+    identifierSerializer: IdentifierSerializer<'pie'>;
+    /**
+     * A function to clean a series item identifier, returning only the properties
+     * relevant to the series type.
+     * @returns A cleaned identifier with only the relevant properties.
+     */
+    identifierCleaner: IdentifierCleaner<'pie'>;
+    getItemAtPosition?: GetItemAtPosition<'pie'>;
+    descriptionGetter: DescriptionGetter<'pie'>;
+    isHighlightedCreator: HighlightCreator<'pie'>;
+    isFadedCreator: HighlightCreator<'pie'>;
+  };
+};
+```
+
+## External Types
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    type: 'pie';
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.charts-data-provider-pro.ts b/docs/pages/x/api/charts/types.charts-data-provider-pro.ts
new file mode 100644
index 0000000000000..2de9730a9e7a9
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-data-provider-pro.ts
@@ -0,0 +1,4 @@
+import { ChartsDataProviderPro } from '@mui/x-charts-pro/ChartsDataProviderPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsDataProviderPro = createTypes(import.meta.url, ChartsDataProviderPro);
diff --git a/docs/pages/x/api/charts/types.charts-data-provider.md b/docs/pages/x/api/charts/types.charts-data-provider.md
new file mode 100644
index 0000000000000..12349d70633a3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-data-provider.md
@@ -0,0 +1,118 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-data-provider.md'
+
+## API Reference
+
+### ChartsDataProvider
+
+Orchestrates the data providers for the chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/react-charts/composition/)
+
+API:
+
+- [ChartsDataProvider API](https://mui.com/x/api/charts/charts-data-provider/)
+
+**ChartsDataProvider Props:**
+
+| Prop                 | Type                                                                                                                             | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                        | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                             | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset              | `DatasetElementType<unknown>[]`                                                                                                  | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| experimentalFeatures | `LineExperimentalFeatures \| {}`                                                                                                 | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                         | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                      | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `Partial<ChartMargin> \| number`                                                                                                 | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `ConvertSignaturesIntoPlugins<ChartAnyPluginSignature[]>`                                                                        | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series               | `(BarSeriesType \| LineSeriesType \| ScatterSeriesType \| PieSeriesType<MakeOptional<PieValueType, 'id'>> \| RadarSeriesType)[]` | -                     | The array of series to display.&#xA;Each type of series has its own specificity.&#xA;Please refer to the appropriate docs page to learn more about it.                                                                                                                       |
+| seriesConfig         | `ChartSeriesConfig<any> & ChartSeriesConfig<'bar' \| 'line' \| 'scatter' \| 'pie' \| 'radar'>`                                   | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                        | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                           | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                               | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                         | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                         | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `React.ReactNode`                                                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+
+## Additional Types
+
+### ChartsDataProviderProps
+
+```typescript
+type ChartsDataProviderProps<
+  SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar' =
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar',
+  TSignatures extends ChartAnyPluginSignature[] = AllPluginSignatures<
+    UseChartZAxisSignature,
+    UseChartBrushSignature,
+    UseChartCartesianAxisSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartPolarAxisSignature,
+    UseChartTooltipSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartVisibilityManagerSignature<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>,
+    UseChartClosestPointSignature,
+    UseChartKeyboardNavigationSignature
+  >,
+> = UseChartBaseProps<TSignatures> &
+  MergeSignaturesProperty<
+    [
+      UseChartElementRefSignature,
+      UseChartIdSignature,
+      UseChartSeriesConfigSignature<SeriesType>,
+      UseChartExperimentalFeaturesSignature<SeriesType>,
+      UseChartDimensionsSignature,
+      UseChartSeriesSignature<SeriesType>,
+      UseChartAnimationSignature,
+      UseChartInteractionListenerSignature,
+      TSignatures,
+    ],
+    'params'
+  > &
+  Pick<ChartsProviderProps<SeriesType, TSignatures>, 'plugins'> &
+  __type &
+  ChartsLocalizationProviderProps & {
+    slots?: Partial<ChartsDataProviderSlots>;
+    slotProps?: Partial<ChartsDataProviderSlotProps>;
+  };
+```
+
+### ChartsDataProviderSlotProps
+
+```typescript
+type ChartsDataProviderSlotProps = {
+  baseButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ChartsDataProviderSlots
+
+```typescript
+type ChartsDataProviderSlots = {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
diff --git a/docs/pages/x/api/charts/types.charts-data-provider.ts b/docs/pages/x/api/charts/types.charts-data-provider.ts
new file mode 100644
index 0000000000000..5ae65085e1ecc
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-data-provider.ts
@@ -0,0 +1,4 @@
+import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsDataProvider = createTypes(import.meta.url, ChartsDataProvider);
diff --git a/docs/pages/x/api/charts/types.charts-grid.ts b/docs/pages/x/api/charts/types.charts-grid.ts
new file mode 100644
index 0000000000000..b5e0345bd1539
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-grid.ts
@@ -0,0 +1,4 @@
+import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsGrid = createTypes(import.meta.url, ChartsGrid);
diff --git a/docs/pages/x/api/charts/types.charts-item-tooltip-content.ts b/docs/pages/x/api/charts/types.charts-item-tooltip-content.ts
new file mode 100644
index 0000000000000..ac9fb30afd8a8
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-item-tooltip-content.ts
@@ -0,0 +1,4 @@
+import { ChartsItemTooltipContent } from '@mui/x-charts/ChartsTooltip';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsItemTooltipContent = createTypes(import.meta.url, ChartsItemTooltipContent);
diff --git a/docs/pages/x/api/charts/types.charts-legend.md b/docs/pages/x/api/charts/types.charts-legend.md
new file mode 100644
index 0000000000000..7d00e2c28a7a5
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-legend.md
@@ -0,0 +1,631 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-legend.md'
+
+## API Reference
+
+### ChartsLegend
+
+**ChartsLegend Props:**
+
+| Prop                    | Type                                                                                                                     | Default | Description                                                                                  |
+| :---------------------- | :----------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------- |
+| classes                 | `Partial<ChartsLegendClasses>`                                                                                           | -       | Override or extend the styles applied to the component.                                      |
+| direction               | `Direction`                                                                                                              | -       | The direction of the legend layout.&#xA;The default depends on the chart.                    |
+| onItemClick             | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void)` | -       | Callback fired when a legend item is clicked.                                                |
+| slotProps               | `ChartsLegendSlotProps`                                                                                                  | `{}`    | The props used for each component slot.                                                      |
+| slots                   | `ChartsLegendSlots`                                                                                                      | `{}`    | Overridable component slots.                                                                 |
+| sx                      | `SxProps<Theme>`                                                                                                         | -       | -                                                                                            |
+| tabIndex                | `number`                                                                                                                 | -       | -                                                                                            |
+| toggleVisibilityOnClick | `boolean`                                                                                                                | `false` | If `true`, clicking on a legend item will toggle the visibility of the corresponding series. |
+| className               | `string`                                                                                                                 | -       | -                                                                                            |
+
+### ContinuousColorLegend
+
+**ContinuousColorLegend Props:**
+
+| Prop          | Type                                    | Default                | Description                                                                                                                                                                          |
+| :------------ | :-------------------------------------- | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axisDirection | `'x' \| 'y' \| 'z'`                     | `'z'`                  | The axis direction containing the color configuration to represent.                                                                                                                  |
+| axisId        | `AxisId`                                | `The first axis item.` | The id of the axis item with the color configuration to represent.                                                                                                                   |
+| classes       | `Partial<ContinuousColorLegendClasses>` | -                      | Override or extend the styles applied to the component.                                                                                                                              |
+| direction     | `Direction`                             | `'horizontal'`         | The direction of the legend layout.                                                                                                                                                  |
+| gradientId    | `string`                                | `auto-generated id`    | The id for the gradient to use.&#xA;If not provided, it will use the generated gradient from the axis configuration.&#xA;The `gradientId` will be used as `fill="url(#gradientId)"`. |
+| labelPosition | `'start' \| 'end' \| 'extremes'`        | `'end'`                | Where to position the labels relative to the gradient.                                                                                                                               |
+| maxLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the maximum side of the gradient.&#xA;Can either be a string, or a function.&#xA;If not defined, the formatted maximal value is display.                     |
+| minLabel      | `string \| LabelFormatter`              | `formattedValue`       | The label to display at the minimum side of the gradient.&#xA;Can either be a string, or a function.                                                                                 |
+| reverse       | `boolean`                               | `false`                | If `true`, the gradient and labels will be reversed.                                                                                                                                 |
+| slotProps     | `ChartsLegendSlotProps`                 | `{}`                   | The props used for each component slot.                                                                                                                                              |
+| slots         | `ChartsLegendSlots`                     | `{}`                   | Overridable component slots.                                                                                                                                                         |
+| sx            | `SxProps<Theme>`                        | -                      | -                                                                                                                                                                                    |
+| tabIndex      | `number`                                | -                      | -                                                                                                                                                                                    |
+| thickness     | `number`                                | `12`                   | The thickness of the gradient                                                                                                                                                        |
+| className     | `string`                                | -                      | -                                                                                                                                                                                    |
+
+### piecewiseColorDefaultLabelFormatter
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `PiecewiseLabelFormatterParams` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PiecewiseColorLegend
+
+**PiecewiseColorLegend Props:**
+
+| Prop           | Type                                                                                                                             | Default                | Description                                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------- | :------------------------------------------------------------------ |
+| axisDirection  | `'x' \| 'y' \| 'z'`                                                                                                              | `'z'`                  | The axis direction containing the color configuration to represent. |
+| axisId         | `AxisId`                                                                                                                         | `The first axis item.` | The id of the axis item with the color configuration to represent.  |
+| classes        | `Partial<PiecewiseColorLegendClasses>`                                                                                           | -                      | Override or extend the styles applied to the component.             |
+| direction      | `Direction`                                                                                                                      | `'horizontal'`         | The direction of the legend layout.                                 |
+| labelFormatter | `((params: PiecewiseLabelFormatterParams) => string \| null)`                                                                    | -                      | Format the legend labels.                                           |
+| labelPosition  | `'start' \| 'end' \| 'extremes' \| 'inline-start' \| 'inline-end'`                                                               | `'extremes'`           | Where to position the labels relative to the color marks.           |
+| onItemClick    | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void)` | -                      | Callback fired when a legend item is clicked.                       |
+| slotProps      | `ChartsLegendSlotProps`                                                                                                          | `{}`                   | The props used for each component slot.                             |
+| slots          | `ChartsLegendSlots`                                                                                                              | `{}`                   | Overridable component slots.                                        |
+| sx             | `SxProps<Theme>`                                                                                                                 | -                      | -                                                                   |
+| tabIndex       | `number`                                                                                                                         | -                      | -                                                                   |
+| className      | `string`                                                                                                                         | -                      | -                                                                   |
+
+## Additional Types
+
+### ChartsLegendClasses
+
+```typescript
+type ChartsLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### ChartsLegendPosition
+
+```typescript
+type ChartsLegendPosition = {
+  /**
+   * The position of the legend in relation to the chart.
+   * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+   * If customization is needed, simply use the composition pattern.
+   */
+  position?: Position;
+};
+```
+
+### ChartsLegendProps
+
+```typescript
+type ChartsLegendProps = {
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: SeriesLegendItemContext,
+    index: number,
+  ) => void;
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction?: Direction;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsLegendClasses>;
+  /**
+   * If `true`, clicking on a legend item will toggle the visibility of the corresponding series.
+   * @default false
+   */
+  toggleVisibilityOnClick?: boolean;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+};
+```
+
+### ChartsLegendSlotExtension
+
+```typescript
+type ChartsLegendSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsLegendSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsLegendSlotProps;
+};
+```
+
+### ChartsLegendSlotProps
+
+```typescript
+type ChartsLegendSlotProps = {
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+};
+```
+
+### ChartsLegendSlots
+
+```typescript
+type ChartsLegendSlots = {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+};
+```
+
+### ColorLegendSelector
+
+```typescript
+type ColorLegendSelector = {
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### continuousColorLegendClasses
+
+```typescript
+type continuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendClasses
+
+```typescript
+type ContinuousColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### ContinuousColorLegendProps
+
+```typescript
+type ContinuousColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness?: number;
+};
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### legendClasses
+
+```typescript
+type legendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to hidden items. */
+  hidden: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+};
+```
+
+### LegendItemContext
+
+```typescript
+type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+```
+
+### LegendItemParams
+
+```typescript
+type LegendItemParams = {
+  /** The type of the series */
+  type: 'line' | 'bar' | 'scatter' | 'pie' | 'radar';
+  markType: ChartsLabelMarkType | undefined;
+  /** The identifier of the series */
+  seriesId?: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The minimum value of the category */
+  minValue?: number | Date | null;
+  /** The maximum value of the category */
+  maxValue?: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### piecewiseColorLegendClasses
+
+```typescript
+type piecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendClasses
+
+```typescript
+type PiecewiseColorLegendClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendItemContext
+
+```typescript
+type PiecewiseColorLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'piecewiseColor';
+  /** The minimum value of the category */
+  minValue: number | Date | null;
+  /** The maximum value of the category */
+  maxValue: number | Date | null;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### PiecewiseColorLegendProps
+
+```typescript
+type PiecewiseColorLegendProps = {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @returns The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the color marks.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+  /** Callback fired when a legend item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    legendItem: PiecewiseColorLegendItemContext,
+    index: number,
+  ) => void;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+  tabIndex?: number;
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+};
+```
+
+### PiecewiseLabelFormatterParams
+
+```typescript
+type PiecewiseLabelFormatterParams = {
+  /** The index of the entry. */
+  index: number;
+  /** The length of the entries array. */
+  length: number;
+  /** The min value of the piece. `null` is infinite. */
+  min: number | Date | null;
+  /** The max value of the piece. `null` is infinite. */
+  max: number | Date | null;
+  /** The formatted min value of the piece. `null` is infinite. */
+  formattedMin: string | null;
+  /** The formatted max value of the piece. `null` is infinite. */
+  formattedMax: string | null;
+};
+```
+
+### SeriesLegendItemContext
+
+```typescript
+type SeriesLegendItemContext = {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'series';
+  /** The identifier of the series */
+  seriesId: string;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+### SeriesLegendItemParams
+
+```typescript
+type SeriesLegendItemParams = {
+  /** The identifier of the series */
+  seriesId: string;
+  /** The type of the series */
+  type: 'line' | 'bar' | 'scatter' | 'pie' | 'radar';
+  markType: ChartsLabelMarkType | undefined;
+  markShape?: MarkShape;
+  /** The data index of the item in the series data array */
+  dataIndex?: number;
+  /** The color used in the legend */
+  color: string;
+  /** The label displayed in the legend */
+  label: string;
+};
+```
+
+## External Types
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
diff --git a/docs/pages/x/api/charts/types.charts-legend.ts b/docs/pages/x/api/charts/types.charts-legend.ts
new file mode 100644
index 0000000000000..6c8c92397d144
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-legend.ts
@@ -0,0 +1,4 @@
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsLegend = createTypes(import.meta.url, ChartsLegend);
diff --git a/docs/pages/x/api/charts/types.charts-localization-provider.ts b/docs/pages/x/api/charts/types.charts-localization-provider.ts
new file mode 100644
index 0000000000000..436757f9e3518
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-localization-provider.ts
@@ -0,0 +1,4 @@
+import { ChartsLocalizationProvider } from '@mui/x-charts/ChartsLocalizationProvider';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsLocalizationProvider = createTypes(import.meta.url, ChartsLocalizationProvider);
diff --git a/docs/pages/x/api/charts/types.charts-reference-line.ts b/docs/pages/x/api/charts/types.charts-reference-line.ts
new file mode 100644
index 0000000000000..5318ec159a5f3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-reference-line.ts
@@ -0,0 +1,4 @@
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsReferenceLine = createTypes(import.meta.url, ChartsReferenceLine);
diff --git a/docs/pages/x/api/charts/types.charts-surface.ts b/docs/pages/x/api/charts/types.charts-surface.ts
new file mode 100644
index 0000000000000..24a04346b0de2
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-surface.ts
@@ -0,0 +1,4 @@
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsSurface = createTypes(import.meta.url, ChartsSurface);
diff --git a/docs/pages/x/api/charts/types.charts-text.ts b/docs/pages/x/api/charts/types.charts-text.ts
new file mode 100644
index 0000000000000..451185729d7ca
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-text.ts
@@ -0,0 +1,4 @@
+import { ChartsText } from '@mui/x-charts/ChartsText';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsText = createTypes(import.meta.url, ChartsText);
diff --git a/docs/pages/x/api/charts/types.charts-toolbar-image-export-trigger.ts b/docs/pages/x/api/charts/types.charts-toolbar-image-export-trigger.ts
new file mode 100644
index 0000000000000..cdf4b0b1f14d9
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-toolbar-image-export-trigger.ts
@@ -0,0 +1,4 @@
+import { ChartsToolbarImageExportTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsToolbarImageExportTrigger = createTypes(import.meta.url, ChartsToolbarImageExportTrigger);
diff --git a/docs/pages/x/api/charts/types.charts-toolbar-print-export-trigger.ts b/docs/pages/x/api/charts/types.charts-toolbar-print-export-trigger.ts
new file mode 100644
index 0000000000000..0292b7c652e96
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-toolbar-print-export-trigger.ts
@@ -0,0 +1,4 @@
+import { ChartsToolbarPrintExportTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsToolbarPrintExportTrigger = createTypes(import.meta.url, ChartsToolbarPrintExportTrigger);
diff --git a/docs/pages/x/api/charts/types.charts-toolbar-pro.ts b/docs/pages/x/api/charts/types.charts-toolbar-pro.ts
new file mode 100644
index 0000000000000..a64ec7b5f6a22
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-toolbar-pro.ts
@@ -0,0 +1,4 @@
+import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsToolbarPro = createTypes(import.meta.url, ChartsToolbarPro);
diff --git a/docs/pages/x/api/charts/types.charts-toolbar-zoom-in-trigger.ts b/docs/pages/x/api/charts/types.charts-toolbar-zoom-in-trigger.ts
new file mode 100644
index 0000000000000..674d6e8a72225
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-toolbar-zoom-in-trigger.ts
@@ -0,0 +1,4 @@
+import { ChartsToolbarZoomInTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsToolbarZoomInTrigger = createTypes(import.meta.url, ChartsToolbarZoomInTrigger);
diff --git a/docs/pages/x/api/charts/types.charts-toolbar-zoom-out-trigger.ts b/docs/pages/x/api/charts/types.charts-toolbar-zoom-out-trigger.ts
new file mode 100644
index 0000000000000..9c695124d04ea
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-toolbar-zoom-out-trigger.ts
@@ -0,0 +1,4 @@
+import { ChartsToolbarZoomOutTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsToolbarZoomOutTrigger = createTypes(import.meta.url, ChartsToolbarZoomOutTrigger);
diff --git a/docs/pages/x/api/charts/types.charts-tooltip-container.md b/docs/pages/x/api/charts/types.charts-tooltip-container.md
new file mode 100644
index 0000000000000..1b7a732d1090a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-tooltip-container.md
@@ -0,0 +1,2050 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.charts-tooltip-container.md'
+
+## API Reference
+
+### ChartsAxisTooltipContent
+
+**ChartsAxisTooltipContent Props:**
+
+| Prop    | Type                            | Default  | Description                                                                                                                                                                                   |
+| :------ | :------------------------------ | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes | `Partial<ChartsTooltipClasses>` | -        | Override or extend the styles applied to the component.                                                                                                                                       |
+| sort    | `'none' \| 'asc' \| 'desc'`     | `'none'` | The sort in which series items are displayed in the tooltip.&#xA;When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value. |
+| sx      | `SxProps<Theme>`                | -        | -                                                                                                                                                                                             |
+
+### ChartsItemTooltipContent
+
+**ChartsItemTooltipContent Props:**
+
+| Prop    | Type                            | Default | Description                                             |
+| :------ | :------------------------------ | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipClasses>` | -       | Override or extend the styles applied to the component. |
+| sx      | `SxProps<Theme>`                | -       | -                                                       |
+
+### ChartsTooltip
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                                                                                                                |
+| :-------- | :--------------------------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                                                                                                                    |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                                                                                                                  |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                                                                                                                    |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                                                                                                               |
+| sort      | `'none' \| 'desc' \| 'asc'`              | `'none'`    | Defines the sort order in which series items are displayed in the axis tooltip.&#xA;When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.&#xA;Only applies when `trigger='axis'`. |
+| trigger   | `'item' \| 'axis' \| 'none'`             | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip.                                                                                         |
+| anchor    | `'pointer' \| 'node' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                                                                                                          |
+
+### ChartsTooltipContainer
+
+Demos:
+
+- [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+
+API:
+
+- [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+
+**ChartsTooltipContainer Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                                                                                        |
+| :-------- | :--------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                                                                            |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                                                                          |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                                                                            |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                                                                                       |
+| trigger   | `TriggerOptions`                         | `'axis'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse;'axis': Shows values associated with the hovered x value;'none': Does not display tooltip. |
+| anchor    | `'pointer' \| 'node' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                                                                                  |
+| children  | `React.ReactNode`                        | -           | -                                                                                                                                                                                  |
+
+### useAxesTooltip
+
+Returns the axes to display in the tooltip and the series item related to them.
+
+**useAxesTooltip Parameters:**
+
+| Parameter | Type                   | Default | Description |
+| :-------- | :--------------------- | :------ | :---------- |
+| params    | `UseAxesTooltipParams` | -       | -           |
+
+**useAxesTooltip Return Value:**
+
+```tsx
+type ReturnValue =
+  | UseAxesTooltipReturnValue<'bar' | 'line' | 'scatter' | 'radar', string | number | Date>[]
+  | null;
+```
+
+### useItemTooltip
+
+Returns a config object when the tooltip contains a single item to display.
+Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+
+**useItemTooltip Return Value:**
+
+The tooltip item config
+
+```tsx
+type ReturnValue = UseItemTooltipReturnValue<'bar' | 'line' | 'scatter' | 'pie'> | null;
+```
+
+### useRadarItemTooltip
+
+Contains an object per value with their content and the label of the associated metric.
+
+**useRadarItemTooltip Return Value:**
+
+The tooltip item configs
+
+```tsx
+type ReturnValue = UseRadarItemTooltipReturnValue | null;
+```
+
+## Additional Types
+
+### ChartsAxisTooltipContentClasses
+
+```typescript
+type ChartsAxisTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsAxisTooltipContentProps
+
+```typescript
+type ChartsAxisTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
+};
+```
+
+### ChartsItemTooltipContentClasses
+
+```typescript
+type ChartsItemTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsItemTooltipContentProps
+
+```typescript
+type ChartsItemTooltipContentProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipClasses>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### ChartsTooltipCell
+
+```typescript
+type ChartsTooltipCell = StyledComponent<
+  Pick<
+    TypographyOwnProps &
+      CommonProps &
+      Omit<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+        | 'color'
+        | 'children'
+        | 'style'
+        | 'className'
+        | 'sx'
+        | 'classes'
+        | 'align'
+        | 'gutterBottom'
+        | 'noWrap'
+        | 'variant'
+        | 'variantMapping'
+      >,
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'ref'
+    | 'key'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'sx'
+    | 'classes'
+    | 'align'
+    | 'gutterBottom'
+    | 'noWrap'
+    | 'variant'
+    | 'variantMapping'
+  > &
+    MUIStyledCommonProps<Theme> & { component?: React.ElementType },
+  {},
+  {}
+>;
+```
+
+### chartsTooltipClasses
+
+```typescript
+type chartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClasses
+
+```typescript
+type ChartsTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipClassKey
+
+```typescript
+type ChartsTooltipClassKey = 'root' | 'paper' | 'table' | 'row' | 'cell' | 'mark' | 'axisValueCell';
+```
+
+### ChartsTooltipContainerClasses
+
+```typescript
+type ChartsTooltipContainerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### ChartsTooltipContainerProps
+
+```typescript
+type ChartsTooltipContainerProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'pointer' | 'node' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  children?: React.ReactNode;
+};
+```
+
+### ChartsTooltipContainerSlotProps
+
+```typescript
+type ChartsTooltipContainerSlotProps = {};
+```
+
+### ChartsTooltipContainerSlots
+
+```typescript
+type ChartsTooltipContainerSlots = {};
+```
+
+### ChartsTooltipPaper
+
+```typescript
+type ChartsTooltipPaper = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipProps
+
+```typescript
+type ChartsTooltipProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse;
+   * - 'axis': Shows values associated with the hovered x value;
+   * - 'none': Does not display tooltip.
+   * @default 'axis'
+   */
+  trigger?: 'item' | 'axis' | 'none';
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'pointer' | 'node' | 'chart';
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Defines the sort order in which series items are displayed in the axis tooltip.
+   * When set to `none`, series are displayed in the same order they are provided in the series property. Otherwise they are sorted by their value.
+   * Only applies when `trigger='axis'`.
+   * @default 'none'
+   */
+  sort?: 'none' | 'desc' | 'asc';
+};
+```
+
+### ChartsTooltipRow
+
+```typescript
+type ChartsTooltipRow = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
+    | 'ref'
+    | 'key'
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### ChartsTooltipSlotProps
+
+```typescript
+type ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<ChartsTooltipProps<T>>;
+};
+```
+
+### ChartsTooltipSlots
+
+```typescript
+type ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    ChartsTooltipProps<T>,
+    | 'symbol'
+    | 'object'
+    | 'table'
+    | 'mark'
+    | 'line'
+    | 'data'
+    | 'legend'
+    | 'circle'
+    | 'label'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### ChartsTooltipTable
+
+```typescript
+type ChartsTooltipTable = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
+    | 'ref'
+    | 'key'
+    | 'hidden'
+    | 'color'
+    | 'children'
+    | 'slot'
+    | 'style'
+    | 'summary'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'border'
+    | 'width'
+    | 'bgcolor'
+    | 'align'
+    | 'cellPadding'
+    | 'cellSpacing'
+    | 'frame'
+    | 'rules'
+  >,
+  {}
+>;
+```
+
+### ItemTooltip
+
+```typescript
+type ItemTooltip<SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar'> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### SeriesItem
+
+```typescript
+type SeriesItem<T extends 'bar' | 'line' | 'scatter' | 'radar'> = {
+  seriesId: string;
+  color: string;
+  value:
+    | { open: number; high: number; low: number; close: number }
+    | number
+    | ScatterValueType
+    | null;
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkType | undefined;
+  markShape: MarkShape | undefined;
+};
+```
+
+### UseAxesTooltipParams
+
+```typescript
+type UseAxesTooltipParams = {
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
+};
+```
+
+### UseAxesTooltipReturnValue
+
+```typescript
+type UseAxesTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'radar' = 'bar' | 'line' | 'scatter' | 'radar', AxisValueT extends string | number | Date = string | number | Date> = { axisDirection: 'x' | 'y' | 'rotation' | 'radius';
+mainAxis: { /** The data used by `'band'` and `'point'` scales. */
+data?: any[];
+/** The label of the axis. */
+label?: string;
+/**
+ * The props used for each component slot.
+ * @default {}
+ */
+slotProps?: Partial<ChartsAxisSlotProps>;
+/**
+ * Overridable component slots.
+ * @default {}
+ */
+slots?: Partial<ChartsAxisSlots>;
+/** A CSS class name applied to the root element. */
+className?: string;
+/**
+ * ID used to identify the axis.
+ *
+ * The ID must be unique across all axes in this chart.
+ */
+id: AxisId;
+sx?: SxProps;
+/** Override or extend the styles applied to the component. */
+classes?: Partial<ChartsAxisClasses>;
+/** If `true`, Reverse the axis scaleBand. */
+reverse?: boolean;
+/**
+ * If true, the axis line is disabled.
+ * @default false
+ */
+disableLine?: boolean;
+/**
+ * If true, the ticks are disabled.
+ * @default false
+ */
+disableTicks?: boolean;
+/** The style applied to ticks text. */
+tickLabelStyle?: ChartsTextStyle;
+/** The style applied to the axis label. */
+labelStyle?: ChartsTextStyle;
+/**
+ * Defines which ticks get its label displayed. Its value can be:
+ * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+ * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+ * @default 'auto'
+ */
+tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
+/**
+ * The minimum space between ticks when using an ordinal scale. It defines the minimum distance in pixels between two ticks.
+ * @default 0
+ */
+tickSpacing?: number;
+/**
+ * The size of the ticks.
+ * @default 6
+ */
+tickSize?: number;
+/**
+ * Maximal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMaxStep?: number;
+/**
+ * Minimal step between two ticks.
+ * When using time data, the value is assumed to be in ms.
+ * Not supported by categorical axis (band, points).
+ */
+tickMinStep?: number;
+/**
+ * The number of ticks. This number is not guaranteed.
+ * Not supported by categorical axis (band, points).
+ */
+tickNumber?: number;
+/**
+ * Defines which ticks are displayed.
+ * Its value can be:
+ * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+ * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
+ * - an array containing the values where ticks should be displayed.
+ * @default 'auto'
+ * @see
+ */
+tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+/**
+ * The placement of ticks in regard to the band interval.
+ * Only used if scale is 'band'.
+ * @default 'extremities'
+ */
+tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+/**
+ * The placement of ticks label. Can be the middle of the band, or the tick position.
+ * Only used if scale is 'band'.
+ * @default 'middle'
+ */
+tickLabelPlacement?: 'middle' | 'tick';
+colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig | { type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string); type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] } | { type: 'piecewise'; thresholds: (number | Date)[]; colors: string[]; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'continuous'; min?: number | Date; max?: number | Date; color: [string, string] | ((t: number) => string) } | { type: 'ordinal'; values?: (string | number | Date)[]; colors: string[]; unknownColor?: string; type: 'piecewise'; thresholds: (number | Date)[]; colors: string[] };
+/** The key used to retrieve `data` from the `dataset` prop. */
+dataKey?: string;
+/**
+ * A function to extract and transform the value from the `dataset` item.
+ * It receives the full dataset item and should return the axis value.
+ * Can be used as an alternative to `dataKey`.
+ * @returns The transformed value.
+ */
+valueGetter?: ((item: DatasetElementType<unknown>) => any);
+/**
+ * Formats the axis value.
+ * @returns The string to display.
+ */
+valueFormatter?: (<TScaleName extends S>(value: any, context: AxisValueFormatterContext<TScaleName>) => string);
+/** If `true`, hide this value in the tooltip */
+hideTooltip?: boolean;
+/**
+ * Defines the axis scale domain based on the min/max values of series linked to it.
+ * - 'nice': Rounds the domain at human friendly values.
+ * - 'strict': Set the domain to the min/max value provided. No extra space is added.
+ * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+ */
+domainLimit?: 'nice' | 'strict' | ((min: NumberValue, max: NumberValue) => { min: NumberValue; max: NumberValue });
+/** If `true`, the axis will be ignored by the tooltip with `trigger='axis'`. */
+ignoreTooltip?: boolean;
+/**
+ * The offset of the axis in pixels. It can be used to move the axis from its default position.
+ * X-axis: A top axis will move up, and a bottom axis will move down.
+ * Y-axis: A left axis will move left, and a right axis will move right.
+ * @default 0
+ */
+offset?: number;
+scaleType: 'time' | 'log' | 'linear' | 'symlog' | 'pow' | 'sqrt' | 'utc' | 'band' | 'point';
+scale: ScaleTime<number, number, never> | ScaleLogarithmic<number, number, never> | ScaleLinear<number, number, never> | ScaleSymLog<number, number, never> | ScalePower<number, number, never> | ScaleBand<{ toString: function toString() { [native code] } }> | ScalePoint<{ toString: function toString() { [native code] } }>;
+colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null, never> | ScaleThreshold<number, string | null, never> | ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null>;
+/** Indicate if the axis should be consider by a tooltip with `trigger='axis'`. */
+triggerTooltip?: boolean };
+axisId: AxisId;
+axisValue: AxisValueT;
+axisFormattedValue: string;
+dataIndex: number;
+seriesItems: SeriesItem<SeriesType>[] }
+```
+
+### UseItemTooltipReturnValue
+
+```typescript
+type UseItemTooltipReturnValue<SeriesType extends 'bar' | 'line' | 'scatter' | 'pie' | 'radar'> = {
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<SeriesType>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The value. */
+  value:
+    | number
+    | { open: number; high: number; low: number; close: number }
+    | ScatterValueType
+    | DefaultizedPieValueType
+    | null;
+  /** The value formatted with context set to "tooltip". */
+  formattedValue:
+    | { open: string | null; high: string | null; low: string | null; close: string | null }
+    | string
+    | null;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  /** The series mark shape. */
+  markShape?: MarkShape;
+};
+```
+
+### UseRadarItemTooltipReturnValue
+
+```typescript
+type UseRadarItemTooltipReturnValue = {
+  /** The series mark shape. */
+  markShape?: MarkShape;
+  /** An object that identifies the item to display. */
+  identifier: SeriesItemIdentifierWithType<'bar' | 'line' | 'scatter' | 'pie' | 'radar'>;
+  /** The color associated with the item. */
+  color: string;
+  /** The metric label. */
+  label: string | undefined;
+  /** The series mark type. */
+  markType: ChartsLabelMarkType | undefined;
+  values: ItemTooltipValue<'radar'>[];
+};
+```
+
+## External Types
+
+### MarkShape
+
+```typescript
+type MarkShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### TriggerOptions
+
+```typescript
+type TriggerOptions = 'item' | 'axis' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.charts-tooltip-container.ts b/docs/pages/x/api/charts/types.charts-tooltip-container.ts
new file mode 100644
index 0000000000000..a61918464d2f8
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-tooltip-container.ts
@@ -0,0 +1,4 @@
+import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsTooltipContainer = createTypes(import.meta.url, ChartsTooltipContainer);
diff --git a/docs/pages/x/api/charts/types.charts-tooltip.ts b/docs/pages/x/api/charts/types.charts-tooltip.ts
new file mode 100644
index 0000000000000..dacd734429a63
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-tooltip.ts
@@ -0,0 +1,4 @@
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsTooltip = createTypes(import.meta.url, ChartsTooltip);
diff --git a/docs/pages/x/api/charts/types.charts-wrapper.ts b/docs/pages/x/api/charts/types.charts-wrapper.ts
new file mode 100644
index 0000000000000..ea8b28593d7f4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-wrapper.ts
@@ -0,0 +1,4 @@
+import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsWrapper = createTypes(import.meta.url, ChartsWrapper);
diff --git a/docs/pages/x/api/charts/types.charts-x-axis.ts b/docs/pages/x/api/charts/types.charts-x-axis.ts
new file mode 100644
index 0000000000000..491ce76a88a6b
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-x-axis.ts
@@ -0,0 +1,4 @@
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsXAxis = createTypes(import.meta.url, ChartsXAxis);
diff --git a/docs/pages/x/api/charts/types.charts-y-axis.ts b/docs/pages/x/api/charts/types.charts-y-axis.ts
new file mode 100644
index 0000000000000..b1d150d520ab4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-y-axis.ts
@@ -0,0 +1,4 @@
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsYAxis = createTypes(import.meta.url, ChartsYAxis);
diff --git a/docs/pages/x/api/charts/types.charts-zoom-slider.ts b/docs/pages/x/api/charts/types.charts-zoom-slider.ts
new file mode 100644
index 0000000000000..2cbf7b2d6cde6
--- /dev/null
+++ b/docs/pages/x/api/charts/types.charts-zoom-slider.ts
@@ -0,0 +1,4 @@
+import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsZoomSlider = createTypes(import.meta.url, ChartsZoomSlider);
diff --git a/docs/pages/x/api/charts/types.continuous-color-legend.ts b/docs/pages/x/api/charts/types.continuous-color-legend.ts
new file mode 100644
index 0000000000000..8760ae923508d
--- /dev/null
+++ b/docs/pages/x/api/charts/types.continuous-color-legend.ts
@@ -0,0 +1,4 @@
+import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesContinuousColorLegend = createTypes(import.meta.url, ContinuousColorLegend);
diff --git a/docs/pages/x/api/charts/types.focused-funnel-section.ts b/docs/pages/x/api/charts/types.focused-funnel-section.ts
new file mode 100644
index 0000000000000..000f1920033e3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-funnel-section.ts
@@ -0,0 +1,4 @@
+import { FocusedFunnelSection } from '@mui/x-charts-pro/FunnelChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFocusedFunnelSection = createTypes(import.meta.url, FocusedFunnelSection);
diff --git a/docs/pages/x/api/charts/types.focused-heatmap-cell.ts b/docs/pages/x/api/charts/types.focused-heatmap-cell.ts
new file mode 100644
index 0000000000000..0041d0a0c80c4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-heatmap-cell.ts
@@ -0,0 +1,4 @@
+import { FocusedHeatmapCell } from '@mui/x-charts-pro/Heatmap';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFocusedHeatmapCell = createTypes(import.meta.url, FocusedHeatmapCell);
diff --git a/docs/pages/x/api/charts/types.focused-radar-mark.ts b/docs/pages/x/api/charts/types.focused-radar-mark.ts
new file mode 100644
index 0000000000000..1faa3d5fc31ce
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-radar-mark.ts
@@ -0,0 +1,4 @@
+import { FocusedRadarMark } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFocusedRadarMark = createTypes(import.meta.url, FocusedRadarMark);
diff --git a/docs/pages/x/api/charts/types.focused-range-bar.md b/docs/pages/x/api/charts/types.focused-range-bar.md
new file mode 100644
index 0000000000000..e51c510756ee9
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-range-bar.md
@@ -0,0 +1,1680 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.focused-range-bar.md'
+
+## API Reference
+
+### BarChartPremium
+
+Demos:
+
+- [Bars](https://mui.com/x/react-charts/bars/)
+- [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [BarChart API](https://mui.com/x/api/charts/bar-chart/)
+
+**BarChartPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The configuration of axes highlight.&#xA;Default is set to 'band' in the bar direction.&#xA;Depends on `layout` prop.                                                                                                                                                                                                                 |
+| borderRadius              | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Defines the border radius of the bar element.                                                                                                                                                                                                                                                                                         |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'horizontal' \| 'vertical'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'bar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' } \| VisibilityIdentifier<'bar'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| layout                    | `'horizontal' \| 'vertical'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'vertical'`          | The direction of the bar elements.                                                                                                                                                                                                                                                                                                    |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onItemClick               | `onItemClick`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Callback fired when a bar or range bar item is clicked.                                                                                                                                                                                                                                                                               |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: BarItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| plugins                   | `[ChartPlugin<UseChartZAxisSignature>, ChartPlugin<UseChartBrushSignature>, ChartPlugin<UseChartTooltipSignature<'bar'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartCartesianAxisSignature<'bar'>>, ChartPlugin<UseChartHighlightSignature<'bar'>>, ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>, ChartPlugin<UseChartKeyboardNavigationSignature>, ChartPlugin<UseChartProZoomSignature>, ChartPlugin<UseChartProExportSignature>]`                                                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                                                                                   |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`        | The type of renderer to use for the bar plot. `svg-single`: Renders every bar in a `<rect />` element.`svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/bars/#performance                            |
+| series\*                  | `(RangeBarSeriesType \| BarSeries)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The series to display in the bar chart.&#xA;An array of \[\[BarSeries]] or \[\[RangeBarSeries]] objects.                                                                                                                                                                                                                              |
+| seriesConfig              | `{ bar: ChartSeriesTypeConfig<'bar'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `BarChartPremiumSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `BarChartPremiumSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `BarItemIdentifier \| Omit<BarItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### FocusedRangeBar
+
+### RangeBarPlot
+
+Demos:
+
+- [Range Bar](https://mui.com/x/react-charts/range-bar/)
+
+API:
+
+- [RangeBarPlot API](https://mui.com/x/api/charts/range-bar-plot/)
+
+**RangeBarPlot Props:**
+
+| Prop          | Type                                                                                                     | Default     | Description                                   |
+| :------------ | :------------------------------------------------------------------------------------------------------- | :---------- | :-------------------------------------------- |
+| borderRadius  | `number`                                                                                                 | -           | Defines the border radius of the bar element. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void)` | -           | Callback fired when a bar item is clicked.    |
+| skipAnimation | `boolean`                                                                                                | `undefined` | If `true`, animations are skipped.            |
+| slotProps     | `RangeBarPlotSlotProps`                                                                                  | `{}`        | The props used for each component slot.       |
+| slots         | `RangeBarPlotSlots`                                                                                      | `{}`        | Overridable component slots.                  |
+
+## Additional Types
+
+### BAR_CHART_PREMIUM_PLUGINS
+
+```typescript
+type BAR_CHART_PREMIUM_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'bar'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+  ChartPlugin<UseChartHighlightSignature<'bar'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartProZoomSignature>,
+  ChartPlugin<UseChartProExportSignature>,
+];
+```
+
+### BarChartPremiumPluginSignatures
+
+```typescript
+type BarChartPremiumPluginSignatures = BarChartProPluginSignatures;
+```
+
+### BarChartPremiumProps
+
+````typescript
+type BarChartPremiumProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarChartPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartPremiumSlotProps;
+  /** Callback fired when a bar or range bar item is clicked. */
+  onItemClick?: onItemClick;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
+   */
+  series: (RangeBarSeriesType | BarSeries)[];
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  sx?: SxProps<Theme>;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'horizontal' | 'vertical'>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The direction of the bar elements.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  apiRef?: React.RefObject<ChartPublicAPI<BarChartProPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { bar: ChartSeriesTypeConfig<'bar'> };
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartZAxisSignature>,
+    ChartPlugin<UseChartBrushSignature>,
+    ChartPlugin<UseChartTooltipSignature<'bar'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartCartesianAxisSignature<'bar'>>,
+    ChartPlugin<UseChartHighlightSignature<'bar'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'bar'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+    ChartPlugin<UseChartProZoomSignature>,
+    ChartPlugin<UseChartProExportSignature>,
+  ];
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: BarItemIdentifier | Omit<BarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: BarItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'bar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'bar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'bar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'bar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'bar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'bar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'bar' }
+    | VisibilityIdentifier<'bar'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+};
+````
+
+### BarChartPremiumSlotProps
+
+```typescript
+type BarChartPremiumSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'pointer' | 'node'; sort?: undefined }
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'desc' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### BarChartPremiumSlots
+
+```typescript
+type BarChartPremiumSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { trigger?: 'none'; anchor?: 'pointer'; sort?: undefined }
+      | { trigger?: 'item'; anchor?: 'pointer' | 'node'; sort?: undefined }
+      | { trigger?: 'axis'; anchor?: 'pointer' | 'chart'; sort?: 'none' | 'desc' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'legend'
+    | 'line'
+    | 'circle'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+### rangeBarClasses
+
+```typescript
+type rangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClasses
+
+```typescript
+type RangeBarClasses = {
+  /** Styles applied to the range bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+};
+```
+
+### RangeBarClassKey
+
+```typescript
+type RangeBarClassKey = 'root' | 'series' | 'seriesLabels';
+```
+
+### RangeBarPlotProps
+
+```typescript
+type RangeBarPlotProps = {
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a bar item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    barItemIdentifier: RangeBarItemIdentifier,
+  ) => void;
+  /** Defines the border radius of the bar element. */
+  borderRadius?: number;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RangeBarPlotSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RangeBarPlotSlots;
+};
+```
+
+### RangeBarPlotSlotProps
+
+```typescript
+type RangeBarPlotSlotProps = {
+  bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
+  barLabel?: SlotComponentPropsFromProps<BarLabelProps, {}, BarLabelOwnerState>;
+};
+```
+
+### RangeBarPlotSlots
+
+```typescript
+type RangeBarPlotSlots = {
+  /**
+   * The component that renders the bar.
+   * @default BarElementPath
+   */
+  bar?: React.JSXElementConstructor<BarProps>;
+  /**
+   * The component that renders the bar label.
+   * @default BarLabel
+   */
+  barLabel?: React.JSXElementConstructor<BarLabelProps>;
+};
+```
+
+### RangeBarSeries
+
+```typescript
+type RangeBarSeries = {
+  type: 'rangeBar';
+  /** Data associated to each range bar. */
+  data?: (RangeBarValueType | null)[];
+  /**
+   * A function to transform the dataset item into a range bar value.
+   * @returns The transformed value.
+   */
+  valueGetter?: (item: DatasetElementType<unknown>) => RangeBarValueType | null;
+  /** The keys used to retrieve data from the dataset. Must be provided if the `dataset` prop is used. */
+  datasetKeys?: { start: string; end: string };
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * Layout of the bars. All bars should have the same layout.
+   * @default 'vertical'
+   */
+  layout?: 'horizontal' | 'vertical';
+  /** The id of this series. */
+  id?: SeriesId;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<RangeBarValueType | null>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<
+    | 'rangeBar'
+    | 'bar'
+    | 'line'
+    | 'scatter'
+    | 'pie'
+    | 'radar'
+    | 'heatmap'
+    | 'funnel'
+    | 'sankey'
+    | 'ohlc'
+  >;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<RangeBarValueType | null>) => string;
+  /** The id of the x-axis used to render the series. */
+  xAxisId?: AxisId;
+  /** The id of the y-axis used to render the series. */
+  yAxisId?: AxisId;
+};
+```
+
+## External Types
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (
+  value: unknown | null,
+  context: { dataIndex: number },
+) => string | null;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### onItemClick
+
+```typescript
+type onItemClick = (
+  event: MouseEvent,
+  itemIdentifier:
+    | { type: 'bar'; seriesId: string; dataIndex: number }
+    | { type: 'rangeBar'; seriesId: string; dataIndex: number },
+) => void;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
diff --git a/docs/pages/x/api/charts/types.focused-range-bar.ts b/docs/pages/x/api/charts/types.focused-range-bar.ts
new file mode 100644
index 0000000000000..df323fa1ae09b
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-range-bar.ts
@@ -0,0 +1,4 @@
+import { FocusedRangeBar } from '@mui/x-charts-premium/BarChartPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFocusedRangeBar = createTypes(import.meta.url, FocusedRangeBar);
diff --git a/docs/pages/x/api/charts/types.focused-sankey-link.ts b/docs/pages/x/api/charts/types.focused-sankey-link.ts
new file mode 100644
index 0000000000000..0ffd1c1a03a76
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-sankey-link.ts
@@ -0,0 +1,4 @@
+import { FocusedSankeyLink } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFocusedSankeyLink = createTypes(import.meta.url, FocusedSankeyLink);
diff --git a/docs/pages/x/api/charts/types.focused-sankey-node.ts b/docs/pages/x/api/charts/types.focused-sankey-node.ts
new file mode 100644
index 0000000000000..a3d4b34b85ad2
--- /dev/null
+++ b/docs/pages/x/api/charts/types.focused-sankey-node.ts
@@ -0,0 +1,4 @@
+import { FocusedSankeyNode } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFocusedSankeyNode = createTypes(import.meta.url, FocusedSankeyNode);
diff --git a/docs/pages/x/api/charts/types.funnel-chart.ts b/docs/pages/x/api/charts/types.funnel-chart.ts
new file mode 100644
index 0000000000000..dee632000801d
--- /dev/null
+++ b/docs/pages/x/api/charts/types.funnel-chart.ts
@@ -0,0 +1,4 @@
+import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFunnelChart = createTypes(import.meta.url, FunnelChart);
diff --git a/docs/pages/x/api/charts/types.funnel-plot.ts b/docs/pages/x/api/charts/types.funnel-plot.ts
new file mode 100644
index 0000000000000..95388e847b710
--- /dev/null
+++ b/docs/pages/x/api/charts/types.funnel-plot.ts
@@ -0,0 +1,4 @@
+import { FunnelPlot } from '@mui/x-charts-pro/FunnelChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFunnelPlot = createTypes(import.meta.url, FunnelPlot);
diff --git a/docs/pages/x/api/charts/types.funnel-series.ts b/docs/pages/x/api/charts/types.funnel-series.ts
new file mode 100644
index 0000000000000..4214d9d1482ad
--- /dev/null
+++ b/docs/pages/x/api/charts/types.funnel-series.ts
@@ -0,0 +1,4 @@
+import { FunnelSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFunnelSeries = createTypes(import.meta.url, FunnelSeries);
diff --git a/docs/pages/x/api/charts/types.gauge-container.ts b/docs/pages/x/api/charts/types.gauge-container.ts
new file mode 100644
index 0000000000000..72925684e3d57
--- /dev/null
+++ b/docs/pages/x/api/charts/types.gauge-container.ts
@@ -0,0 +1,4 @@
+import { GaugeContainer } from '@mui/x-charts/Gauge';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGaugeContainer = createTypes(import.meta.url, GaugeContainer);
diff --git a/docs/pages/x/api/charts/types.gauge.md b/docs/pages/x/api/charts/types.gauge.md
new file mode 100644
index 0000000000000..d0f5b4bb69987
--- /dev/null
+++ b/docs/pages/x/api/charts/types.gauge.md
@@ -0,0 +1,364 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.gauge.md'
+
+## API Reference
+
+### Gauge
+
+**Gauge Props:**
+
+| Prop          | Type                                                           | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                                               | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| classes       | `Partial<GaugeClasses>`                                        | -        | -                                                                                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`                                             | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`                                             | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`                                             | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                                                       | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                                                       | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                                                       | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`                                             | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number`                               | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`                                             | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                                                      | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                                                       | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                                               | -        | -                                                                                                                                                                                                                                                                            |
+| text          | `string \| ((params: GaugeFormatterParams) => string \| null)` | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                                                       | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                                                       | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                                                       | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                                                       | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                                                       | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                                              | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                                                       | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeContainer
+
+**GaugeContainer Props:**
+
+| Prop          | Type                             | Default  | Description                                                                                                                                                                                                                                                                  |
+| :------------ | :------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value         | `number \| null`                 | -        | The value of the gauge.&#xA;Set to `null` to not display a value.                                                                                                                                                                                                            |
+| cornerRadius  | `number \| string`               | `0`      | The radius applied to arc corners (similar to border radius).&#xA;Set it to '50%' to get rounded arc.                                                                                                                                                                        |
+| cx            | `number \| string`               | -        | The x coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the width the drawing area.                                                                                                                   |
+| cy            | `number \| string`               | -        | The y coordinate of the arc center.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the height the drawing area.                                                                                                                  |
+| desc          | `string`                         | -        | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| endAngle      | `number`                         | `360`    | The end angle (deg).                                                                                                                                                                                                                                                         |
+| height        | `number`                         | -        | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| innerRadius   | `number \| string`               | `'80%'`  | The radius between circle center and the beginning of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                 |
+| margin        | `Partial<ChartMargin> \| number` | -        | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| outerRadius   | `number \| string`               | `'100%'` | The radius between circle center and the end of the arc.&#xA;Can be a number (in px) or a string with a percentage such as '50%'.&#xA;The '100%' is the maximal radius that fit into the drawing area.                                                                       |
+| skipAnimation | `boolean`                        | -        | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| startAngle    | `number`                         | `0`      | The start angle (deg).                                                                                                                                                                                                                                                       |
+| sx            | `SxProps<Theme>`                 | -        | -                                                                                                                                                                                                                                                                            |
+| title         | `string`                         | -        | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| valueMax      | `number`                         | `100`    | The maximal value of the gauge.                                                                                                                                                                                                                                              |
+| valueMin      | `number`                         | `0`      | The minimal value of the gauge.                                                                                                                                                                                                                                              |
+| width         | `number`                         | -        | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id            | `string`                         | -        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children      | `React.ReactNode`                | -        | -                                                                                                                                                                                                                                                                            |
+| className     | `string`                         | -        | -                                                                                                                                                                                                                                                                            |
+
+### GaugeReferenceArc
+
+### GaugeValueArc
+
+**GaugeValueArc Props:**
+
+| Prop          | Type      | Default | Description |
+| :------------ | :-------- | :------ | :---------- |
+| skipAnimation | `boolean` | -       | -           |
+
+### GaugeValueText
+
+**GaugeValueText Props:**
+
+| Prop             | Type                                                           | Default | Description                            |
+| :--------------- | :------------------------------------------------------------- | :------ | :------------------------------------- |
+| lineHeight       | `number`                                                       | -       | Height of a text line (in `em`).       |
+| needsComputation | `boolean`                                                      | `false` | If `true`, the line width is computed. |
+| ownerState       | `any`                                                          | -       | -                                      |
+| text             | `string \| ((params: GaugeFormatterParams) => string \| null)` | -       | -                                      |
+| style            | `ChartsTextStyle`                                              | -       | Style applied to text elements.        |
+
+### useGaugeState
+
+**useGaugeState Return Value:**
+
+```tsx
+type ReturnValue = {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  cx: number;
+  cy: number;
+  maxRadius: number;
+  valueAngle: number | null;
+};
+```
+
+## Additional Types
+
+### gaugeClasses
+
+```typescript
+type gaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClasses
+
+```typescript
+type GaugeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+};
+```
+
+### GaugeClassKey
+
+```typescript
+type GaugeClassKey = 'root' | 'valueArc' | 'referenceArc' | 'valueText';
+```
+
+### GaugeContainerProps
+
+```typescript
+type GaugeContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+};
+```
+
+### GaugeFormatterParams
+
+```typescript
+type GaugeFormatterParams = { value: number | null; valueMin: number; valueMax: number };
+```
+
+### GaugeProps
+
+```typescript
+type GaugeProps = {
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+};
+```
+
+### GaugeValueTextProps
+
+```typescript
+type GaugeValueTextProps = {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+  /** Style applied to text elements. */
+  style?: ChartsTextStyle;
+  /** Height of a text line (in `em`). */
+  lineHeight?: number;
+  ownerState?: any;
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation?: boolean;
+};
+```
diff --git a/docs/pages/x/api/charts/types.gauge.ts b/docs/pages/x/api/charts/types.gauge.ts
new file mode 100644
index 0000000000000..655c922d03fc4
--- /dev/null
+++ b/docs/pages/x/api/charts/types.gauge.ts
@@ -0,0 +1,4 @@
+import { Gauge } from '@mui/x-charts/Gauge';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGauge = createTypes(import.meta.url, Gauge);
diff --git a/docs/pages/x/api/charts/types.heatmap-cell.ts b/docs/pages/x/api/charts/types.heatmap-cell.ts
new file mode 100644
index 0000000000000..b9e4c9cc7002c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-cell.ts
@@ -0,0 +1,4 @@
+import { HeatmapCell } from '@mui/x-charts-pro/Heatmap';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmapCell = createTypes(import.meta.url, HeatmapCell);
diff --git a/docs/pages/x/api/charts/types.heatmap-plot.ts b/docs/pages/x/api/charts/types.heatmap-plot.ts
new file mode 100644
index 0000000000000..a0cf2d10d4755
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-plot.ts
@@ -0,0 +1,4 @@
+import { HeatmapPlot } from '@mui/x-charts-pro/Heatmap';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmapPlot = createTypes(import.meta.url, HeatmapPlot);
diff --git a/docs/pages/x/api/charts/types.heatmap-premium.md b/docs/pages/x/api/charts/types.heatmap-premium.md
new file mode 100644
index 0000000000000..522ef79a394c0
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-premium.md
@@ -0,0 +1,1242 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.heatmap-premium.md'
+
+## API Reference
+
+### HeatmapPremium
+
+**HeatmapPremium Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                 | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> \| undefined>`                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| borderRadius              | `number`                                                                                                                                                                                                             | -                     | The border radius of the heatmap cells in pixels.                                                                                                                                                                                                                                                                                     |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                        | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                 | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                      | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                             | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                            | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                          | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| height                    | `number`                                                                                                                                                                                                             | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hideLegend                | `boolean`                                                                                                                                                                                                            | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'> \| null`                                               | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialZoom               | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.&#xA;Used to initialize the zoom in a specific configuration without controlling it.                                                                                                                                                                                                       |
+| loading                   | `boolean`                                                                                                                                                                                                            | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                          | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                     | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onHighlightChange         | `((highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } \| null) => void)`                                                                                                         | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<'line' \| 'heatmap' \| 'bar' \| 'scatter' \| 'pie' \| 'radar' \| 'funnel' \| 'sankey' \| 'rangeBar' \| 'ohlc'>) => void)` | -                     | The callback fired when an item is clicked.                                                                                                                                                                                                                                                                                           |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                        | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: HeatmapItemIdentifier \| null) => void)`                                                                                                                                                             | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| onZoomChange              | `((zoomData: ZoomData[]) => void)`                                                                                                                                                                                   | -                     | Callback fired when the zoom has changed.                                                                                                                                                                                                                                                                                             |
+| renderer                  | `'svg-single' \| 'webgl'`                                                                                                                                                                                            | -                     | The type of renderer to use for the heatmap plot. `svg-single`: Renders every scatter item in a `<rect />` element.`webgl`: Renders heatmap cells using WebGL for better performance, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/heatmap/#performance                                            |
+| series\*                  | `HeatmapSeries[]`                                                                                                                                                                                                    | -                     | The series to display in the bar chart.&#xA;An array of \[\[HeatmapSeries]] objects.                                                                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                            | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| slotProps                 | `HeatmapPremiumSlotProps`                                                                                                                                                                                            | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `HeatmapPremiumSlots`                                                                                                                                                                                                | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                     | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                  | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                             | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltip                   | `ChartsTooltipProps`                                                                                                                                                                                                 | -                     | The configuration of the tooltip.                                                                                                                                                                                                                                                                                                     |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                               | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `HeatmapItemIdentifier \| Omit<HeatmapItemIdentifier, 'type'> \| null`                                                                                                                                               | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                             | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis\*                   | `(MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>)[]`                                                                                                                       | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                | -                     | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| zoomData                  | `ZoomData[]`                                                                                                                                                                                                         | -                     | The list of zoom data related to each axis.                                                                                                                                                                                                                                                                                           |
+| zoomInteractionConfig     | `ZoomInteractionConfig`                                                                                                                                                                                              | -                     | Configuration for zoom interactions.                                                                                                                                                                                                                                                                                                  |
+| id                        | `string`                                                                                                                                                                                                             | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                    | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+## Additional Types
+
+### HeatmapPremiumProps
+
+```typescript
+type HeatmapPremiumProps = {
+  /**
+   * The type of renderer to use for the heatmap plot.
+   * - `svg-single`: Renders every scatter item in a `<rect />` element.
+   * - `webgl`: Renders heatmap cells using WebGL for better performance, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/heatmap/#performance
+   */
+  renderer?: 'svg-single' | 'webgl';
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: MakeOptional<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>, 'scaleType'>[];
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeries]] objects.
+   */
+  series: HeatmapSeries[];
+  /**
+   * The configuration of the tooltip.
+   * @see
+   */
+  tooltip?: ChartsTooltipProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The border radius of the heatmap cells in pixels. */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapSlotProps;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  sx?: SxProps<Theme>;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /** The callback fired when an item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    item: SeriesItemIdentifierWithType<
+      | 'line'
+      | 'heatmap'
+      | 'bar'
+      | 'scatter'
+      | 'pie'
+      | 'radar'
+      | 'funnel'
+      | 'sankey'
+      | 'rangeBar'
+      | 'ohlc'
+    >,
+  ) => void;
+  apiRef?: React.RefObject<ChartPublicAPI<HeatmapPluginSignatures> | undefined>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: HeatmapItemIdentifier | Omit<HeatmapItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: HeatmapItemIdentifier | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }
+    | Omit<{ type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'heatmap'; seriesId: string; xIndex: number; yIndex: number } | null,
+  ) => void;
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom?: ZoomData[];
+  /** Callback fired when the zoom has changed. */
+  onZoomChange?: (zoomData: ZoomData[]) => void;
+  /** The list of zoom data related to each axis. */
+  zoomData?: ZoomData[];
+  /** Configuration for zoom interactions. */
+  zoomInteractionConfig?: ZoomInteractionConfig;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+```
+
+### HeatmapPremiumSlotProps
+
+```typescript
+type HeatmapPremiumSlotProps = {
+  tooltip?: Partial<HeatmapTooltipProps>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  cell?: Partial<HeatmapCellProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProProps>;
+  baseDivider?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLHRElement>; orientation?: 'horizontal' | 'vertical' };
+  baseMenuItem?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    autoFocus?: boolean;
+    children?: React.ReactNode;
+    inert?: boolean;
+    dense?: boolean;
+    disabled?: boolean;
+    iconStart?: React.ReactNode;
+    iconEnd?: React.ReactNode;
+    selected?: boolean;
+    value?: number | string | string[];
+    style?: React.CSSProperties;
+  };
+  baseMenuList?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLUListElement>;
+    id?: string;
+    children?: React.ReactNode;
+    autoFocus?: boolean;
+    autoFocusItem?: boolean;
+  };
+  basePopper?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLDivElement>;
+    open: boolean;
+    children?: React.ReactNode;
+    clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+    clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+    flip?: boolean;
+    focusTrap?: boolean;
+    onExited?: (node: HTMLElement | null) => void;
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onDidShow?: () => void;
+    onDidHide?: () => void;
+    id?: string;
+    target?: Element | null;
+    transition?: boolean;
+    placement?: Placement;
+  };
+  baseTooltip?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    children: ReactElement;
+    enterDelay?: number;
+    title: React.ReactNode;
+    disableInteractive?: boolean;
+  };
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.DOMAttributes<SVGSVGElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { titleAccess?: string; fontSize?: 'small' | 'medium' | 'large' | 'inherit' };
+};
+```
+
+### HeatmapPremiumSlots
+
+```typescript
+type HeatmapPremiumSlots = {
+  /**
+   * Custom component for the tooltip.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    HeatmapTooltipProps,
+    | 'symbol'
+    | 'object'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the legend.
+   * @default ContinuousColorLegendProps
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * The component that renders the heatmap cell.
+   * @default HeatmapCell
+   */
+  cell?: React.ElementType;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProProps,
+    | 'symbol'
+    | 'object'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseDivider?: React.ComponentType<ChartBaseDividerProps>;
+  baseMenuItem?: React.ComponentType<ChartBaseMenuItemProps>;
+  baseMenuList?: React.ComponentType<ChartBaseMenuListProps>;
+  basePopper?: React.ComponentType<ChartBasePopperProps>;
+  baseTooltip?: React.ComponentType<ChartBaseTooltipProps>;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon?: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's export button.
+   * @default ChartsExportIcon
+   */
+  exportIcon?: React.ComponentType<ChartBaseIconProps>;
+};
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
diff --git a/docs/pages/x/api/charts/types.heatmap-premium.ts b/docs/pages/x/api/charts/types.heatmap-premium.ts
new file mode 100644
index 0000000000000..a541083c021f9
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-premium.ts
@@ -0,0 +1,4 @@
+import { HeatmapPremium } from '@mui/x-charts-premium/HeatmapPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmapPremium = createTypes(import.meta.url, HeatmapPremium);
diff --git a/docs/pages/x/api/charts/types.heatmap-series.ts b/docs/pages/x/api/charts/types.heatmap-series.ts
new file mode 100644
index 0000000000000..c196de77b0bee
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-series.ts
@@ -0,0 +1,4 @@
+import { HeatmapSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmapSeries = createTypes(import.meta.url, HeatmapSeries);
diff --git a/docs/pages/x/api/charts/types.heatmap-tooltip-content.ts b/docs/pages/x/api/charts/types.heatmap-tooltip-content.ts
new file mode 100644
index 0000000000000..d274d930e0475
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-tooltip-content.ts
@@ -0,0 +1,4 @@
+import { HeatmapTooltipContent } from '@mui/x-charts-pro/Heatmap';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmapTooltipContent = createTypes(import.meta.url, HeatmapTooltipContent);
diff --git a/docs/pages/x/api/charts/types.heatmap-tooltip.ts b/docs/pages/x/api/charts/types.heatmap-tooltip.ts
new file mode 100644
index 0000000000000..0de4d865a5e0c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap-tooltip.ts
@@ -0,0 +1,4 @@
+import { HeatmapTooltip } from '@mui/x-charts-pro/Heatmap';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmapTooltip = createTypes(import.meta.url, HeatmapTooltip);
diff --git a/docs/pages/x/api/charts/types.heatmap.ts b/docs/pages/x/api/charts/types.heatmap.ts
new file mode 100644
index 0000000000000..f3f26e49e8fc2
--- /dev/null
+++ b/docs/pages/x/api/charts/types.heatmap.ts
@@ -0,0 +1,4 @@
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesHeatmap = createTypes(import.meta.url, Heatmap);
diff --git a/docs/pages/x/api/charts/types.legend-item-params.ts b/docs/pages/x/api/charts/types.legend-item-params.ts
new file mode 100644
index 0000000000000..f331a65a86952
--- /dev/null
+++ b/docs/pages/x/api/charts/types.legend-item-params.ts
@@ -0,0 +1,4 @@
+import { LegendItemParams } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLegendItemParams = createTypes(import.meta.url, LegendItemParams);
diff --git a/docs/pages/x/api/charts/types.line-chart-pro.ts b/docs/pages/x/api/charts/types.line-chart-pro.ts
new file mode 100644
index 0000000000000..b0bf19fbe739f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-chart-pro.ts
@@ -0,0 +1,4 @@
+import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLineChartPro = createTypes(import.meta.url, LineChartPro);
diff --git a/docs/pages/x/api/charts/types.line-chart.ts b/docs/pages/x/api/charts/types.line-chart.ts
new file mode 100644
index 0000000000000..21a1c581a5ee6
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-chart.ts
@@ -0,0 +1,4 @@
+import { LineChart } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLineChart = createTypes(import.meta.url, LineChart);
diff --git a/docs/pages/x/api/charts/types.line-element.ts b/docs/pages/x/api/charts/types.line-element.ts
new file mode 100644
index 0000000000000..722504c437054
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-element.ts
@@ -0,0 +1,4 @@
+import { LineElement } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLineElement = createTypes(import.meta.url, LineElement);
diff --git a/docs/pages/x/api/charts/types.line-highlight-element.ts b/docs/pages/x/api/charts/types.line-highlight-element.ts
new file mode 100644
index 0000000000000..3a975b8ee431f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-highlight-element.ts
@@ -0,0 +1,4 @@
+import { LineHighlightElement } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLineHighlightElement = createTypes(import.meta.url, LineHighlightElement);
diff --git a/docs/pages/x/api/charts/types.line-highlight-plot.md b/docs/pages/x/api/charts/types.line-highlight-plot.md
new file mode 100644
index 0000000000000..2787aa15251e1
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-highlight-plot.md
@@ -0,0 +1,1963 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.line-highlight-plot.md'
+
+## API Reference
+
+### AnimatedArea
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+
+**AnimatedArea Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `AreaElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AnimatedLine
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+
+**AnimatedLine Props:**
+
+| Prop          | Type                    | Default | Description                        |
+| :------------ | :---------------------- | :------ | :--------------------------------- |
+| d\*           | `string`                | -       | -                                  |
+| ownerState\*  | `LineElementOwnerState` | -       | -                                  |
+| skipAnimation | `boolean`               | `false` | If `true`, animations are skipped. |
+
+### AreaElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+
+API:
+
+- [AreaElement API](https://mui.com/x/api/charts/area-element/)
+
+**AreaElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `AreaElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `AreaElementSlots`     | `{}`    | Overridable component slots.            |
+
+### AreaPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+- [Stacking](https://mui.com/x/react-charts/stacking/)
+
+API:
+
+- [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+
+**AreaPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line area item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.               |
+| slotProps     | `AreaElementSlotProps`                                                                                | `{}`    | The props used for each component slot.          |
+| slots         | `AreaElementSlots`                                                                                    | `{}`    | Overridable component slots.                     |
+
+### FocusedLineMark
+
+### LineChart
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineChart API](https://mui.com/x/api/charts/line-chart/)
+
+**LineChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                   | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'line' }`       | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableLineItemHighlight  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, render the line highlight item.                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `AnimatedAreaProps<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedAxis           | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis highlight.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                         |
+| highlightedItem           | `{ type: 'line'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| initialHiddenItems        | `({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' } \| VisibilityIdentifier<'line'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when an area element is clicked.                                                                                                                                                                                                                                                                                       |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onHighlightedAxisChange   | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onLineClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a line element is clicked.                                                                                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when a mark element is clicked.                                                                                                                                                                                                                                                                                        |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: LineItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| series\*                  | `LineSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the line chart.&#xA;An array of \[\[LineSeries]] objects.                                                                                                                                                                                                                                                    |
+| seriesConfig              | `{ line: ChartSeriesTypeConfig<'line'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, animations are skipped.                                                                                                                                                                                                                                                                                                    |
+| slotProps                 | `LineChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `LineChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `LineItemIdentifier \| Omit<LineItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>)[]` | -                     | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>)[]` | -                     | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### LineElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineElement API](https://mui.com/x/api/charts/line-element/)
+
+**LineElement Props:**
+
+| Prop          | Type                   | Default | Description                             |
+| :------------ | :--------------------- | :------ | :-------------------------------------- |
+| hidden        | `boolean`              | -       | If `true`, the line is hidden.          |
+| classes       | `Partial<LineClasses>` | -       | -                                       |
+| color\*       | `string`               | -       | -                                       |
+| d\*           | `string`               | -       | -                                       |
+| gradientId    | `string`               | -       | -                                       |
+| seriesId\*    | `string`               | -       | -                                       |
+| skipAnimation | `boolean`              | `false` | If `true`, animations are skipped.      |
+| slotProps     | `LineElementSlotProps` | `{}`    | The props used for each component slot. |
+| slots         | `LineElementSlots`     | `{}`    | Overridable component slots.            |
+
+### LineHighlightElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
+
+**LineHighlightElement Props:**
+
+| Prop       | Type                                                                            | Default | Description |
+| :--------- | :------------------------------------------------------------------------------ | :------ | :---------- |
+| color\*    | `string`                                                                        | -       | -           |
+| seriesId\* | `string`                                                                        | -       | -           |
+| shape\*    | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | -           |
+| x\*        | `number`                                                                        | -       | -           |
+| y\*        | `number`                                                                        | -       | -           |
+
+### LineHighlightPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
+
+**LineHighlightPlot Props:**
+
+| Prop      | Type                         | Default | Description                             |
+| :-------- | :--------------------------- | :------ | :-------------------------------------- |
+| slotProps | `LineHighlightPlotSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `LineHighlightPlotSlots`     | `{}`    | Overridable component slots.            |
+
+### LinePlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+
+**LinePlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                 |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------ |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line item is clicked. |
+| skipAnimation | `boolean`                                                                                             | `false` | If `true`, animations are skipped.          |
+| slotProps     | `LineElementSlotProps`                                                                                | `{}`    | The props used for each component slot.     |
+| slots         | `LineElementSlots`                                                                                    | `{}`    | Overridable component slots.                |
+
+### MarkElement
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkElement API](https://mui.com/x/api/charts/mark-element/)
+
+**MarkElement Props:**
+
+| Prop          | Type                                                                            | Default | Description                                         |
+| :------------ | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------- |
+| hidden        | `boolean`                                                                       | `false` | If `true`, the marker is hidden.                    |
+| classes       | `Partial<LineClasses>`                                                          | -       | -                                                   |
+| dataIndex\*   | `number`                                                                        | -       | The index to the element in the series' data array. |
+| isFaded       | `boolean`                                                                       | `false` | If `true`, the marker is faded.                     |
+| isHighlighted | `boolean`                                                                       | `false` | If `true`, the marker is highlighted.               |
+| seriesId\*    | `string`                                                                        | -       | -                                                   |
+| shape\*       | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | -       | The shape of the marker.                            |
+| skipAnimation | `boolean`                                                                       | -       | -                                                   |
+
+### MarkPlot
+
+Demos:
+
+- [Lines](https://mui.com/x/react-charts/lines/)
+- [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+
+API:
+
+- [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+
+**MarkPlot Props:**
+
+| Prop          | Type                                                                                                  | Default | Description                                      |
+| :------------ | :---------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void)` | -       | Callback fired when a line mark item is clicked. |
+| skipAnimation | `boolean`                                                                                             | -       | -                                                |
+| slotProps     | `MarkPlotSlotProps`                                                                                   | `{}`    | The props used for each component slot.          |
+| slots         | `MarkPlotSlots`                                                                                       | `{}`    | Overridable component slots.                     |
+
+## Additional Types
+
+### AnimatedAreaProps
+
+```typescript
+type AnimatedAreaProps = {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AnimatedLineProps
+
+```typescript
+type AnimatedLineProps = {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementOwnerState
+
+```typescript
+type AreaElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+};
+```
+
+### AreaElementProps
+
+```typescript
+type AreaElementProps = {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaElementSlotProps
+
+```typescript
+type AreaElementSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaElementSlots
+
+```typescript
+type AreaElementSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### AreaPlotProps
+
+```typescript
+type AreaPlotProps = {
+  /** Callback fired when a line area item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### AreaPlotSlotProps
+
+```typescript
+type AreaPlotSlotProps = {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+};
+```
+
+### AreaPlotSlots
+
+```typescript
+type AreaPlotSlots = {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+};
+```
+
+### LINE_CHART_PLUGINS
+
+```typescript
+type LINE_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'line'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'line'>>,
+  ChartPlugin<UseChartHighlightSignature<'line'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'line'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### LineChartPluginSignatures
+
+```typescript
+type LineChartPluginSignatures = LineChartPluginSignatures;
+```
+
+### LineChartProps
+
+````typescript
+type LineChartProps = {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeries]] objects.
+   */
+  series: LineSeries[];
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'line' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** If `true`, render the line highlight item. */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /** Callback fired when an area element is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a line element is clicked. */
+  onLineClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /** Callback fired when a mark element is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { line: ChartSeriesTypeConfig<'line'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: LineItemIdentifier | Omit<LineItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: LineItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'line'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'line'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'line'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'line';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'line';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'line'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'line' }
+    | VisibilityIdentifier<'line'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### LineChartSlotProps
+
+```typescript
+type LineChartSlotProps = {
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+  mark?: Partial<MarkElementProps>;
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### LineChartSlots
+
+```typescript
+type LineChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+  mark?: React.JSXElementConstructor<MarkElementProps>;
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'area'
+    | 'line'
+    | 'mark'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'marker'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### lineClasses
+
+```typescript
+type lineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClasses
+
+```typescript
+type LineClasses = {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+};
+```
+
+### LineClassKey
+
+```typescript
+type LineClassKey =
+  | 'area'
+  | 'line'
+  | 'mark'
+  | 'markAnimate'
+  | 'highlight'
+  | 'areaPlot'
+  | 'linePlot'
+  | 'markPlot';
+```
+
+### LineElementOwnerState
+
+```typescript
+type LineElementOwnerState = {
+  seriesId: string;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+};
+```
+
+### LineElementProps
+
+```typescript
+type LineElementProps = {
+  d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  color: string;
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  gradientId?: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LineElementSlotProps
+
+```typescript
+type LineElementSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LineElementSlots
+
+```typescript
+type LineElementSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineHighlightElementProps
+
+```typescript
+type LineHighlightElementProps = (
+  | { shape: 'circle' }
+  | { shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' }
+) & { seriesId: string; color: string; x: number; y: number };
+```
+
+### LineHighlightPlotProps
+
+```typescript
+type LineHighlightPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineHighlightPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineHighlightPlotSlotProps;
+};
+```
+
+### LineHighlightPlotSlotProps
+
+```typescript
+type LineHighlightPlotSlotProps = {
+  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
+};
+```
+
+### LineHighlightPlotSlots
+
+```typescript
+type LineHighlightPlotSlots = {
+  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+};
+```
+
+### LinePlotProps
+
+```typescript
+type LinePlotProps = {
+  /** Callback fired when a line item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineElementSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineElementSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+};
+```
+
+### LinePlotSlotProps
+
+```typescript
+type LinePlotSlotProps = {
+  line?: SlotComponentPropsFromProps<AnimatedLineProps, {}, LineElementOwnerState>;
+};
+```
+
+### LinePlotSlots
+
+```typescript
+type LinePlotSlots = {
+  /**
+   * The component that renders the line.
+   * @default LineElementPath
+   */
+  line?: React.JSXElementConstructor<AnimatedLineProps>;
+};
+```
+
+### LineSeries
+
+```typescript
+type LineSeries = MakeOptional<LineSeriesType, 'type'>;
+```
+
+### MarkElementProps
+
+```typescript
+type MarkElementProps = {
+  classes?: Partial<LineClasses>;
+  seriesId: string;
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The shape of the marker. */
+  shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+  /** The index to the element in the series' data array. */
+  dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
+};
+```
+
+### MarkPlotProps
+
+```typescript
+type MarkPlotProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MarkPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MarkPlotSlotProps;
+  /** Callback fired when a line mark item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    lineItemIdentifier: LineItemIdentifier,
+  ) => void;
+  skipAnimation?: boolean;
+};
+```
+
+### MarkPlotSlotProps
+
+```typescript
+type MarkPlotSlotProps = { mark?: Partial<MarkElementProps> };
+```
+
+### MarkPlotSlots
+
+```typescript
+type MarkPlotSlots = { mark?: React.JSXElementConstructor<MarkElementProps> };
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.line-highlight-plot.ts b/docs/pages/x/api/charts/types.line-highlight-plot.ts
new file mode 100644
index 0000000000000..5aa4a6ee82e2f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-highlight-plot.ts
@@ -0,0 +1,4 @@
+import { LineHighlightPlot } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLineHighlightPlot = createTypes(import.meta.url, LineHighlightPlot);
diff --git a/docs/pages/x/api/charts/types.line-plot.ts b/docs/pages/x/api/charts/types.line-plot.ts
new file mode 100644
index 0000000000000..6700a98e46bcd
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-plot.ts
@@ -0,0 +1,4 @@
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLinePlot = createTypes(import.meta.url, LinePlot);
diff --git a/docs/pages/x/api/charts/types.line-series.ts b/docs/pages/x/api/charts/types.line-series.ts
new file mode 100644
index 0000000000000..fb0f49055ec11
--- /dev/null
+++ b/docs/pages/x/api/charts/types.line-series.ts
@@ -0,0 +1,4 @@
+import { LineSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLineSeries = createTypes(import.meta.url, LineSeries);
diff --git a/docs/pages/x/api/charts/types.mark-element.ts b/docs/pages/x/api/charts/types.mark-element.ts
new file mode 100644
index 0000000000000..29c46f019bc80
--- /dev/null
+++ b/docs/pages/x/api/charts/types.mark-element.ts
@@ -0,0 +1,4 @@
+import { MarkElement } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMarkElement = createTypes(import.meta.url, MarkElement);
diff --git a/docs/pages/x/api/charts/types.mark-plot.ts b/docs/pages/x/api/charts/types.mark-plot.ts
new file mode 100644
index 0000000000000..a4c2008a67445
--- /dev/null
+++ b/docs/pages/x/api/charts/types.mark-plot.ts
@@ -0,0 +1,4 @@
+import { MarkPlot } from '@mui/x-charts/LineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMarkPlot = createTypes(import.meta.url, MarkPlot);
diff --git a/docs/pages/x/api/charts/types.pie-arc-label-plot.ts b/docs/pages/x/api/charts/types.pie-arc-label-plot.ts
new file mode 100644
index 0000000000000..ba4b5d9b622d1
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-arc-label-plot.ts
@@ -0,0 +1,4 @@
+import { PieArcLabelPlot } from '@mui/x-charts/PieChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieArcLabelPlot = createTypes(import.meta.url, PieArcLabelPlot);
diff --git a/docs/pages/x/api/charts/types.pie-arc-label.ts b/docs/pages/x/api/charts/types.pie-arc-label.ts
new file mode 100644
index 0000000000000..a2a4129040ce3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-arc-label.ts
@@ -0,0 +1,4 @@
+import { PieArcLabel } from '@mui/x-charts/PieChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieArcLabel = createTypes(import.meta.url, PieArcLabel);
diff --git a/docs/pages/x/api/charts/types.pie-arc-plot.ts b/docs/pages/x/api/charts/types.pie-arc-plot.ts
new file mode 100644
index 0000000000000..9d23cc47c63d6
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-arc-plot.ts
@@ -0,0 +1,4 @@
+import { PieArcPlot } from '@mui/x-charts/PieChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieArcPlot = createTypes(import.meta.url, PieArcPlot);
diff --git a/docs/pages/x/api/charts/types.pie-arc.ts b/docs/pages/x/api/charts/types.pie-arc.ts
new file mode 100644
index 0000000000000..ec76ea0cb8552
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-arc.ts
@@ -0,0 +1,4 @@
+import { PieArc } from '@mui/x-charts/PieChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieArc = createTypes(import.meta.url, PieArc);
diff --git a/docs/pages/x/api/charts/types.pie-chart-pro.ts b/docs/pages/x/api/charts/types.pie-chart-pro.ts
new file mode 100644
index 0000000000000..46029cd229ef7
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-chart-pro.ts
@@ -0,0 +1,4 @@
+import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieChartPro = createTypes(import.meta.url, PieChartPro);
diff --git a/docs/pages/x/api/charts/types.pie-chart.md b/docs/pages/x/api/charts/types.pie-chart.md
new file mode 100644
index 0000000000000..359043384832e
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-chart.md
@@ -0,0 +1,2013 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.pie-chart.md'
+
+## API Reference
+
+### FocusedPieArc
+
+**FocusedPieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color           | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius    | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| outerRadius     | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle    | `number`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+
+### getPieCoordinates
+
+**Parameters:**
+
+| Parameter | Type                                          | Default | Description |
+| :-------- | :-------------------------------------------- | :------ | :---------- |
+| series    | `Pick<PieArcPlotProps, 'cx' \| 'cy'>`         | -       | -           |
+| drawing   | `Pick<ChartDrawingArea, 'width' \| 'height'>` | -       | -           |
+
+**Return Value:**
+
+| Property          | Type     | Description |
+| :---------------- | :------- | :---------- |
+| `cx`              | `number` | -           |
+| `cy`              | `number` | -           |
+| `availableRadius` | `number` | -           |
+
+### PieArc
+
+**PieArc Props:**
+
+| Prop            | Type                                                              | Default | Description                                                                                                                              |
+| :-------------- | :---------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGPathElement, MouseEvent>) => void)` | -       | -                                                                                                                                        |
+| classes         | `Partial<PieClasses>`                                             | -       | -                                                                                                                                        |
+| color\*         | `string`                                                          | -       | -                                                                                                                                        |
+| cornerRadius\*  | `number`                                                          | -       | -                                                                                                                                        |
+| dataIndex\*     | `number`                                                          | -       | -                                                                                                                                        |
+| endAngle\*      | `number`                                                          | -       | -                                                                                                                                        |
+| innerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| isFaded\*       | `boolean`                                                         | -       | -                                                                                                                                        |
+| isFocused\*     | `boolean`                                                         | -       | -                                                                                                                                        |
+| isHighlighted\* | `boolean`                                                         | -       | -                                                                                                                                        |
+| outerRadius\*   | `number`                                                          | -       | -                                                                                                                                        |
+| paddingAngle\*  | `number`                                                          | -       | -                                                                                                                                        |
+| seriesId\*      | `string`                                                          | -       | -                                                                                                                                        |
+| skipAnimation   | `boolean`                                                         | -       | If `true`, the animation is disabled.                                                                                                    |
+| skipInteraction | `boolean`                                                         | -       | If `true`, the default event handlers are disabled.&#xA;Those are used, for example, to display a tooltip or highlight the arc on hover. |
+| startAngle\*    | `number`                                                          | -       | -                                                                                                                                        |
+
+### PieArcLabel
+
+**PieArcLabel Props:**
+
+| Prop              | Type                  | Default | Description |
+| :---------------- | :-------------------- | :------ | :---------- |
+| hidden            | `boolean`             | -       | -           |
+| arcLabelRadius\*  | `number`              | -       | -           |
+| classes           | `Partial<PieClasses>` | -       | -           |
+| color\*           | `string`              | -       | -           |
+| cornerRadius\*    | `number`              | -       | -           |
+| endAngle\*        | `number`              | -       | -           |
+| formattedArcLabel | `string \| null`      | -       | -           |
+| isFaded\*         | `boolean`             | -       | -           |
+| isHighlighted\*   | `boolean`             | -       | -           |
+| paddingAngle\*    | `number`              | -       | -           |
+| seriesId\*        | `string`              | -       | -           |
+| skipAnimation\*   | `boolean`             | -       | -           |
+| startAngle\*      | `number`              | -       | -           |
+
+### PieArcLabelPlot
+
+**PieArcLabelPlot Props:**
+
+| Prop             | Type                                                                                                                                                                                                           | Default                           | Description                                                    |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabel         | `'formattedValue' \| 'label' \| 'value' \| ((item: { color: string; id?: PieItemId; hidden: boolean; value: number; labelMarkType?: ChartsLabelMarkType; formattedValue: string; label?: string }) => string)` | -                                 | The label displayed into the arc.                              |
+| arcLabelMinAngle | `number`                                                                                                                                                                                                       | `0`                               | The minimal angle required to display the arc label.           |
+| arcLabelRadius   | `number`                                                                                                                                                                                                       | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius     | `number`                                                                                                                                                                                                       | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*           | `DefaultizedPieValueType[]`                                                                                                                                                                                    | -                                 | -                                                              |
+| faded            | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted      | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }`                                             | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius      | `number`                                                                                                                                                                                                       | `0`                               | The radius between circle center and the beginning of the arc. |
+| outerRadius\*    | `number`                                                                                                                                                                                                       | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle     | `number`                                                                                                                                                                                                       | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*       | `string`                                                                                                                                                                                                       | -                                 | The id of this series.                                         |
+| skipAnimation    | `boolean`                                                                                                                                                                                                      | `false`                           | If `true`, animations are skipped.                             |
+| slotProps        | `PieArcLabelPlotSlotProps`                                                                                                                                                                                     | `{}`                              | The props used for each component slot.                        |
+| slots            | `PieArcLabelPlotSlots`                                                                                                                                                                                         | `{}`                              | Overridable component slots.                                   |
+
+### PieArcPlot
+
+**PieArcPlot Props:**
+
+| Prop           | Type                                                                                                                                                               | Default                           | Description                                                    |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------- |
+| arcLabelRadius | `number`                                                                                                                                                           | `(innerRadius - outerRadius) / 2` | The radius between circle center and the arc label in px.      |
+| cornerRadius   | `number`                                                                                                                                                           | `0`                               | The radius applied to arc corners (similar to border radius).  |
+| data\*         | `DefaultizedPieValueType[]`                                                                                                                                        | -                                 | -                                                              |
+| faded          | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | `{ additionalRadius: -5 }`        | Override the arc attributes when it is faded.                  |
+| highlighted    | `{ additionalRadius?: number; innerRadius?: number; outerRadius?: number; cornerRadius?: number; paddingAngle?: number; arcLabelRadius?: number; color?: string }` | -                                 | Override the arc attributes when it is highlighted.            |
+| innerRadius    | `number`                                                                                                                                                           | `0`                               | The radius between circle center and the beginning of the arc. |
+| onItemClick    | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                             | -                                 | Callback fired when a pie item is clicked.                     |
+| outerRadius\*  | `number`                                                                                                                                                           | -                                 | The radius between circle center and the end of the arc.       |
+| paddingAngle   | `number`                                                                                                                                                           | `0`                               | The padding angle (deg) between two arcs.                      |
+| seriesId\*     | `string`                                                                                                                                                           | -                                 | The id of this series.                                         |
+| skipAnimation  | `boolean`                                                                                                                                                          | `false`                           | If `true`, animations are skipped.                             |
+| slotProps      | `PieArcPlotSlotProps`                                                                                                                                              | `{}`                              | The props used for each component slot.                        |
+| slots          | `PieArcPlotSlots`                                                                                                                                                  | `{}`                              | Overridable component slots.                                   |
+
+### PieChart
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+
+**PieChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                     | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                        |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlightedItem           | `{ type: 'pie'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' } \| VisibilityIdentifier<'pie'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onItemClick               | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                     | Callback fired when a pie arc is clicked.                                                                                                                                                                                                                                    |
+| onTooltipItemChange       | `((tooltipItem: PieItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| plugins                   | `[ChartPlugin<UseChartTooltipSignature<'pie'>>, ChartPlugin<UseChartInteractionSignature>, ChartPlugin<UseChartHighlightSignature<'pie'>>, ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>, ChartPlugin<UseChartKeyboardNavigationSignature>]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| series\*                  | `PieSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                     | The series to display in the pie chart.&#xA;An array of \[\[PieSeries]] objects.                                                                                                                                                                                             |
+| seriesConfig              | `{ pie: { seriesProcessor: SeriesProcessor<'pie'>; seriesLayout?: SeriesLayoutGetter<'pie'>; colorProcessor: ColorProcessor<'pie'>; legendGetter: LegendGetter<'pie'>; tooltipGetter: TooltipGetter<'pie'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>; keyboardFocusHandler?: KeyboardFocusHandler<'pie'>; identifierSerializer: IdentifierSerializer<'pie'>; identifierCleaner: IdentifierCleaner<'pie'>; getItemAtPosition?: GetItemAtPosition<'pie'>; descriptionGetter: DescriptionGetter<'pie'>; isHighlightedCreator: HighlightCreator<'pie'>; isFadedCreator: HighlightCreator<'pie'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `PieChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `PieChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `PieItemIdentifier \| Omit<PieItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### PiePlot
+
+Demos:
+
+- [Pie](https://mui.com/x/react-charts/pie/)
+- [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+
+API:
+
+- [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+
+**PiePlot Props:**
+
+| Prop          | Type                                                                                                                                   | Default | Description                                |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------- |
+| onItemClick   | `((event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void)` | -       | Callback fired when a pie item is clicked. |
+| skipAnimation | `boolean`                                                                                                                              | `false` | If `true`, animations are skipped.         |
+| slotProps     | `PiePlotSlotProps`                                                                                                                     | `{}`    | The props used for each component slot.    |
+| slots         | `PiePlotSlots`                                                                                                                         | `{}`    | Overridable component slots.               |
+| className     | `string`                                                                                                                               | -       | -                                          |
+
+## Additional Types
+
+### PIE_CHART_PLUGINS
+
+```typescript
+type PIE_CHART_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<'pie'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartHighlightSignature<'pie'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### PieArcLabelPlotProps
+
+```typescript
+type PieArcLabelPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcLabelPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcLabelPlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** The label displayed into the arc. */
+  arcLabel?:
+    | 'formattedValue'
+    | 'label'
+    | 'value'
+    | ((item: {
+        color: string;
+        id?: PieItemId;
+        hidden: boolean;
+        value: number;
+        labelMarkType?: ChartsLabelMarkType;
+        formattedValue: string;
+        label?: string;
+      }) => string);
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * The minimal angle required to display the arc label.
+   * @default 0
+   */
+  arcLabelMinAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcLabelPlotSlotProps
+
+```typescript
+type PieArcLabelPlotSlotProps = { pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PieArcLabelPlotSlots
+
+```typescript
+type PieArcLabelPlotSlots = { pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps> };
+```
+
+### PieArcLabelProps
+
+```typescript
+type PieArcLabelProps = {
+  seriesId: string;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  skipAnimation: boolean;
+  classes?: Partial<PieClasses>;
+  startAngle: number;
+  endAngle: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+  hidden?: boolean;
+};
+```
+
+### PieArcOwnerState
+
+```typescript
+type PieArcOwnerState = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+};
+```
+
+### PieArcPlotProps
+
+```typescript
+type PieArcPlotProps = {
+  /** The id of this series. */
+  seriesId: string;
+  /**
+   * Override the arc attributes when it is faded.
+   * @default { additionalRadius: -5 }
+   */
+  faded?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieArcPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieArcPlotSlotProps;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  data: DefaultizedPieValueType[];
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * The padding angle (deg) between two arcs.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /** Override the arc attributes when it is highlighted. */
+  highlighted?: {
+    additionalRadius?: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cornerRadius?: number;
+    paddingAngle?: number;
+    arcLabelRadius?: number;
+    color?: string;
+  };
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * @default 0
+   */
+  innerRadius?: number;
+  /** The radius between circle center and the end of the arc. */
+  outerRadius: number;
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius?: number;
+};
+```
+
+### PieArcPlotSlotProps
+
+```typescript
+type PieArcPlotSlotProps = { pieArc?: Partial<PieArcProps> };
+```
+
+### PieArcPlotSlots
+
+```typescript
+type PieArcPlotSlots = { pieArc?: React.JSXElementConstructor<PieArcProps> };
+```
+
+### PieArcProps
+
+```typescript
+type PieArcProps = {
+  seriesId: string;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** If `true`, the animation is disabled. */
+  skipAnimation?: boolean;
+  /**
+   * If `true`, the default event handlers are disabled.
+   * Those are used, for example, to display a tooltip or highlight the arc on hover.
+   */
+  skipInteraction?: boolean;
+};
+```
+
+### PieChartPluginSignatures
+
+```typescript
+type PieChartPluginSignatures = PieChartPluginSignatures;
+```
+
+### PieChartProps
+
+````typescript
+type PieChartProps = {
+  /**
+   * The series to display in the pie chart.
+   * An array of [[PieSeries]] objects.
+   */
+  series: PieSeries[];
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /** Callback fired when a pie arc is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PieChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PieChartSlotProps;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  sx?: SxProps<Theme>;
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [
+    ChartPlugin<UseChartTooltipSignature<'pie'>>,
+    ChartPlugin<UseChartInteractionSignature>,
+    ChartPlugin<UseChartHighlightSignature<'pie'>>,
+    ChartPlugin<UseChartVisibilityManagerSignature<'pie'>>,
+    ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ];
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    pie: {
+      seriesProcessor: SeriesProcessor<'pie'>;
+      seriesLayout?: SeriesLayoutGetter<'pie'>;
+      colorProcessor: ColorProcessor<'pie'>;
+      legendGetter: LegendGetter<'pie'>;
+      tooltipGetter: TooltipGetter<'pie'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'pie'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'pie'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'pie'>;
+      identifierSerializer: IdentifierSerializer<'pie'>;
+      identifierCleaner: IdentifierCleaner<'pie'>;
+      getItemAtPosition?: GetItemAtPosition<'pie'>;
+      descriptionGetter: DescriptionGetter<'pie'>;
+      isHighlightedCreator: HighlightCreator<'pie'>;
+      isFadedCreator: HighlightCreator<'pie'>;
+    };
+  };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: PieItemIdentifier | Omit<PieItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: PieItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'pie'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'pie'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'pie';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'pie';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'pie'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'pie' }
+    | VisibilityIdentifier<'pie'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+};
+````
+
+### PieChartSlotProps
+
+```typescript
+type PieChartSlotProps = {
+  pieArc?: Partial<PieArcProps>;
+  pieArcLabel?: Partial<PieArcLabelProps>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item' }
+      | { anchor?: 'pointer'; trigger?: 'none' }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      sort?: undefined;
+    }
+  >;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### PieChartSlots
+
+```typescript
+type PieChartSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'animate'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'mark'
+    | 'label'
+    | 'marker'
+    | 'p'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'animate'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'mark'
+    | 'label'
+    | 'marker'
+    | 'p'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item' }
+      | { anchor?: 'pointer'; trigger?: 'none' }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'animate'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'mark'
+    | 'label'
+    | 'marker'
+    | 'p'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'animate'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'mark'
+    | 'label'
+    | 'marker'
+    | 'p'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### pieClasses
+
+```typescript
+type pieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClasses
+
+```typescript
+type PieClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the `g` element that contains all pie arcs of a series. */
+  series: string;
+  /** Styles applied to the `g` element that contains all pie arc labels of a series. */
+  seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
+};
+```
+
+### PieClassKey
+
+```typescript
+type PieClassKey =
+  | 'root'
+  | 'series'
+  | 'seriesLabels'
+  | 'arc'
+  | 'arcLabel'
+  | 'animate'
+  | 'focusIndicator';
+```
+
+### PiePlotProps
+
+```typescript
+type PiePlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PiePlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PiePlotSlotProps;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /** Callback fired when a pie item is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGPathElement, MouseEvent>,
+    pieItemIdentifier: PieItemIdentifier,
+    item: DefaultizedPieValueType,
+  ) => void;
+};
+```
+
+### PiePlotSlotProps
+
+```typescript
+type PiePlotSlotProps = { pieArc?: Partial<PieArcProps>; pieArcLabel?: Partial<PieArcLabelProps> };
+```
+
+### PiePlotSlots
+
+```typescript
+type PiePlotSlots = {
+  pieArc?: React.JSXElementConstructor<PieArcProps>;
+  pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+};
+```
+
+### PieSeries
+
+```typescript
+type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: unknown;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    color?: string | undefined;
+    type: 'pie';
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    paddingAngle?: number | undefined;
+    startAngle?: number | undefined;
+    arcLabelRadius?: number | string | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    colorGetter?: unknown | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: unknown;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    color?: string | undefined;
+    type: 'pie';
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    paddingAngle?: number | undefined;
+    startAngle?: number | undefined;
+    arcLabelRadius?: number | string | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    colorGetter?: unknown | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+}) => {
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number };
+  color: string;
+  label: string | undefined;
+  value: unknown;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { pie?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: { type: 'pie'; seriesId: string; dataIndex: number } | null;
+  seriesLayout: { pie?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    type: 'pie';
+    data: unknown;
+    innerRadius?: number | string | undefined;
+    outerRadius?: number | string | undefined;
+    arcLabelRadius?: number | string | undefined;
+    cornerRadius?: number | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    paddingAngle?: number | undefined;
+    sortingValues?: 'none' | 'asc' | 'desc' | unknown | undefined;
+    arcLabel?: 'formattedValue' | 'label' | 'value' | unknown | undefined;
+    arcLabelMinAngle?: number | undefined;
+    cx?: number | string | undefined;
+    cy?: number | string | undefined;
+    highlighted?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    faded?:
+      | {
+          additionalRadius?: number | undefined;
+          innerRadius?: number | undefined;
+          outerRadius?: number | undefined;
+          cornerRadius?: number | undefined;
+          paddingAngle?: number | undefined;
+          arcLabelRadius?: number | undefined;
+          color?: string | undefined;
+        }
+      | undefined;
+    id?: string | undefined;
+    valueFormatter?: unknown | undefined;
+    highlightScope?:
+      | {
+          highlight?: 'none' | 'item' | 'series' | undefined;
+          fade?: 'none' | 'series' | 'global' | undefined;
+        }
+      | undefined;
+    labelMarkType?: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+    color?: string | undefined;
+    colorGetter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => unknown;
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+}) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: { type: 'pie'; seriesId: string; dataIndex: number }) => {
+  type: 'pie';
+  seriesId: string;
+  dataIndex: number;
+};
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (
+  state: unknown,
+  point: { x: number; y: number },
+) => { type: 'pie'; seriesId: string; dataIndex: number } | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        highlight?: 'none' | 'item' | 'series' | undefined;
+        fade?: 'none' | 'series' | 'global' | undefined;
+      }
+    | null
+    | undefined,
+  highlightedItem: { type: 'pie'; seriesId: string; dataIndex?: number | undefined } | null,
+) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.pie-chart.ts b/docs/pages/x/api/charts/types.pie-chart.ts
new file mode 100644
index 0000000000000..db3b65c511b5f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-chart.ts
@@ -0,0 +1,4 @@
+import { PieChart } from '@mui/x-charts/PieChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieChart = createTypes(import.meta.url, PieChart);
diff --git a/docs/pages/x/api/charts/types.pie-plot.ts b/docs/pages/x/api/charts/types.pie-plot.ts
new file mode 100644
index 0000000000000..95a4778077bc3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-plot.ts
@@ -0,0 +1,4 @@
+import { PiePlot } from '@mui/x-charts/PieChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPiePlot = createTypes(import.meta.url, PiePlot);
diff --git a/docs/pages/x/api/charts/types.pie-series.ts b/docs/pages/x/api/charts/types.pie-series.ts
new file mode 100644
index 0000000000000..cd30e0ea304fc
--- /dev/null
+++ b/docs/pages/x/api/charts/types.pie-series.ts
@@ -0,0 +1,4 @@
+import { PieSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPieSeries = createTypes(import.meta.url, PieSeries);
diff --git a/docs/pages/x/api/charts/types.piecewise-color-legend.ts b/docs/pages/x/api/charts/types.piecewise-color-legend.ts
new file mode 100644
index 0000000000000..949084f2add01
--- /dev/null
+++ b/docs/pages/x/api/charts/types.piecewise-color-legend.ts
@@ -0,0 +1,4 @@
+import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPiecewiseColorLegend = createTypes(import.meta.url, PiecewiseColorLegend);
diff --git a/docs/pages/x/api/charts/types.radar-axis-highlight.ts b/docs/pages/x/api/charts/types.radar-axis-highlight.ts
new file mode 100644
index 0000000000000..3a4315e364420
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-axis-highlight.ts
@@ -0,0 +1,4 @@
+import { RadarAxisHighlight } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarAxisHighlight = createTypes(import.meta.url, RadarAxisHighlight);
diff --git a/docs/pages/x/api/charts/types.radar-axis.ts b/docs/pages/x/api/charts/types.radar-axis.ts
new file mode 100644
index 0000000000000..2e5f3596b448c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-axis.ts
@@ -0,0 +1,4 @@
+import { RadarAxis } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarAxis = createTypes(import.meta.url, RadarAxis);
diff --git a/docs/pages/x/api/charts/types.radar-chart-pro.ts b/docs/pages/x/api/charts/types.radar-chart-pro.ts
new file mode 100644
index 0000000000000..4a4db02215fc0
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-chart-pro.ts
@@ -0,0 +1,4 @@
+import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarChartPro = createTypes(import.meta.url, RadarChartPro);
diff --git a/docs/pages/x/api/charts/types.radar-chart.ts b/docs/pages/x/api/charts/types.radar-chart.ts
new file mode 100644
index 0000000000000..9720243c712ce
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-chart.ts
@@ -0,0 +1,4 @@
+import { RadarChart } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarChart = createTypes(import.meta.url, RadarChart);
diff --git a/docs/pages/x/api/charts/types.radar-grid.ts b/docs/pages/x/api/charts/types.radar-grid.ts
new file mode 100644
index 0000000000000..9170b9cbf30b2
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-grid.ts
@@ -0,0 +1,4 @@
+import { RadarGrid } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarGrid = createTypes(import.meta.url, RadarGrid);
diff --git a/docs/pages/x/api/charts/types.radar-metric-labels.ts b/docs/pages/x/api/charts/types.radar-metric-labels.ts
new file mode 100644
index 0000000000000..1b275ac9945f8
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-metric-labels.ts
@@ -0,0 +1,4 @@
+import { RadarMetricLabels } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarMetricLabels = createTypes(import.meta.url, RadarMetricLabels);
diff --git a/docs/pages/x/api/charts/types.radar-series-area.md b/docs/pages/x/api/charts/types.radar-series-area.md
new file mode 100644
index 0000000000000..603acd5effeb2
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-series-area.md
@@ -0,0 +1,1830 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.radar-series-area.md'
+
+## API Reference
+
+### FocusedRadarMark
+
+### RadarAxis
+
+**RadarAxis Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default        | Description                                                                                                                                                                              |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| angle            | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The absolute rotation angle of the metrics (in degree)&#xA;If not defined the metric angle will be used.                                                                                 |
+| classes          | `Partial<Pick<RadarClasses, 'axisLine' \| 'axisLabel' \| 'axisRoot'>>`                                                                                                                                                                                                                                                                                                                                                                               | -              | Override or extend the styles applied to the component.                                                                                                                                  |
+| divisions        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `1`            | The number of divisions with label.                                                                                                                                                      |
+| dominantBaseline | `'auto' \| 'use-script' \| 'no-change' \| 'reset-size' \| 'ideographic' \| 'alphabetic' \| 'hanging' \| 'mathematical' \| 'central' \| 'middle' \| 'text-after-edge' \| 'text-before-edge' \| 'inherit' \| ((angle: number) => 'alphabetic' \| 'hanging' \| 'ideographic' \| 'mathematical' \| 'inherit' \| 'auto' \| 'text-before-edge' \| 'middle' \| 'central' \| 'text-after-edge' \| 'use-script' \| 'no-change' \| 'reset-size' \| undefined)` | -              | The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).                                                                           |
+| labelOrientation | `'horizontal' \| 'rotated'`                                                                                                                                                                                                                                                                                                                                                                                                                          | `'horizontal'` | Defines how label align with the axis. 'horizontal': labels stay horizontal and their placement change with the axis angle.'rotated': labels are rotated 90deg relatively to their axis. |
+| metric           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | The metric to get.&#xA;If `undefined`, the hook returns `null`                                                                                                                           |
+| textAnchor       | `'start' \| 'middle' \| 'end' \| 'inherit' \| ((angle: number) => 'end' \| 'inherit' \| 'middle' \| 'start' \| undefined)`                                                                                                                                                                                                                                                                                                                           | -              | The labels text anchor or a function returning the text anchor for a given axis angle (in degree).                                                                                       |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -              | A CSS class name applied to the root element.                                                                                                                                            |
+
+### RadarAxisHighlight
+
+**RadarAxisHighlight Props:**
+
+| Prop      | Type                                                                                            | Default | Description                                             |
+| :-------- | :---------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| classes   | `Partial<Pick<RadarClasses, 'axisHighlightRoot' \| 'axisHighlightLine' \| 'axisHighlightDot'>>` | -       | Override or extend the styles applied to the component. |
+| className | `string`                                                                                        | -       | A CSS class name applied to the root element.           |
+
+### RadarChart
+
+Demos:
+
+- [Radar Chart](https://mui.com/x/react-charts/radar/)
+
+API:
+
+- [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+
+**RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                       | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                       | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                   | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                  | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                  | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                   | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                   | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`          | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                  | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                             | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`          | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                  | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                           | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                   | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                              | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                  | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                             | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                   | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                     | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                              | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                  | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                    | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                  | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                  | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                      | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                          | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                      | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                           | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                        | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                   | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| Omit<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                   | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                   | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                          | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                   | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### RadarDataProvider
+
+**RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### RadarGrid
+
+**RadarGrid Props:**
+
+| Prop        | Type                                  | Default                                                                                | Description                                               |
+| :---------- | :------------------------------------ | :------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
+| divisions   | `number`                              | `5`                                                                                    | The number of divisions in the radar grid.                |
+| shape       | `'sharp' \| 'circular'`               | `'sharp'`                                                                              | The grid shape.                                           |
+| stripeColor | `((index: number) => string) \| null` | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes |
+
+### RadarMetricLabels
+
+### RadarSeriesArea
+
+**RadarSeriesArea Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesMarks
+
+**RadarSeriesMarks Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### RadarSeriesPlot
+
+**RadarSeriesPlot Props:**
+
+| Prop        | Type                                                                                                     | Default | Description                                                                 |
+| :---------- | :------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------- |
+| classes     | `Partial<RadarClasses>`                                                                                  | -       | Override or extend the styles applied to the component.                     |
+| onAreaClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when an area is clicked.                                     |
+| onMarkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)` | -       | Callback fired when a mark is clicked.                                      |
+| seriesId    | `string`                                                                                                 | -       | The id of the series to display.&#xA;If undefined all series are displayed. |
+| className   | `string`                                                                                                 | -       | A CSS class name applied to the root element.                               |
+
+### Unstable_RadarChart
+
+**Unstable_RadarChart Props:**
+
+| Prop                      | Type                                                                                                                                       | Default                                                                                | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                       | `rainbowSurgePalette`                                                                  | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                   | -                                                                                      | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableAxisListener       | `boolean`                                                                                                                                  | `false`                                                                                | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                        |
+| disableKeyboardNavigation | `boolean`                                                                                                                                  | -                                                                                      | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| divisions                 | `number`                                                                                                                                   | `5`                                                                                    | The number of divisions in the radar grid.                                                                                                                                                                                                                                   |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                | -                                                                                      | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                   | -                                                                                      | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| hiddenItems               | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`          | -                                                                                      | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                |
+| hideLegend                | `boolean`                                                                                                                                  | -                                                                                      | If `true`, the legend is not rendered.                                                                                                                                                                                                                                       |
+| highlight                 | `'axis' \| 'series' \| 'none'`                                                                                                             | `'axis'`                                                                               | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| highlightedItem           | `{ type: 'radar'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'> \| null` | -                                                                                      | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| initialHiddenItems        | `({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' } \| VisibilityIdentifier<'radar'>)[]`          | -                                                                                      | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                     |
+| loading                   | `boolean`                                                                                                                                  | `false`                                                                                | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                | -                                                                                      | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                           | -                                                                                      | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onAreaClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                   | -                                                                                      | Callback fired when an area is clicked.                                                                                                                                                                                                                                      |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                              | -                                                                                      | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                              |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' })[]) => void)`                  | -                                                                                      | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                           |
+| onHighlightChange         | `((highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } \| null) => void)`                                             | -                                                                                      | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onMarkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void)`                                   | -                                                                                      | Callback fired when a mark is clicked.                                                                                                                                                                                                                                       |
+| onTooltipItemChange       | `((tooltipItem: RadarItemIdentifier \| null) => void)`                                                                                     | -                                                                                      | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| radar\*                   | `RadarConfig`                                                                                                                              | -                                                                                      | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*                  | `Readonly<RadarSeries>[]`                                                                                                                  | -                                                                                      | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig              | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                | -                                                                                      | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| shape                     | `'sharp' \| 'circular'`                                                                                                                    | `'sharp'`                                                                              | The grid shape.                                                                                                                                                                                                                                                              |
+| showToolbar               | `boolean`                                                                                                                                  | `false`                                                                                | If true, shows the default chart toolbar.                                                                                                                                                                                                                                    |
+| skipAnimation             | `boolean`                                                                                                                                  | -                                                                                      | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps                 | `RadarChartSlotProps`                                                                                                                      | `{}`                                                                                   | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `RadarChartSlots`                                                                                                                          | `{}`                                                                                   | Overridable component slots.                                                                                                                                                                                                                                                 |
+| stripeColor               | `((index: number) => string) \| null`                                                                                                      | `(index) => index % 2 === 1 ? (theme.vars \|\| theme).palette.text.secondary : 'none'` | Get stripe fill color. Set it to `null` to remove stripes                                                                                                                                                                                                                    |
+| sx                        | `SxProps<Theme>`                                                                                                                           | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                        | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                   | -                                                                                      | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `RadarItemIdentifier \| Omit<RadarItemIdentifier, 'type'> \| null`                                                                         | -                                                                                      | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                   | -                                                                                      | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                   | -                                                                                      | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                          | -                                                                                      | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                   | -                                                                                      | A CSS class name applied to the root element.                                                                                                                                                                                                                                |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### Unstable_RadarDataProvider
+
+**Unstable_RadarDataProvider Props:**
+
+| Prop                 | Type                                                                                                                                                     | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef               | `React.RefObject<ChartPublicAPI<ChartAnyPluginSignature[]> \| undefined>`                                                                                | -                     | -                                                                                                                                                                                                                                                                            |
+| colors               | `ChartsColorPalette`                                                                                                                                     | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| experimentalFeatures | `{}`                                                                                                                                                     | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height               | `number`                                                                                                                                                 | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlight            | `'axis' \| 'series' \| 'none'`                                                                                                                           | `'axis'`              | Indicates if the chart should highlight items per axis or per series.                                                                                                                                                                                                        |
+| localeText           | `Partial<ChartsLocaleText>`                                                                                                                              | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin               | `number \| Partial<ChartMargin>`                                                                                                                         | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| plugins              | `[] \| [ChartPlugin<ChartAnyPluginSignature>]`                                                                                                           | -                     | Array of plugins used to add features to the chart.                                                                                                                                                                                                                          |
+| radar\*              | `RadarConfig`                                                                                                                                            | -                     | The configuration of the radar scales.                                                                                                                                                                                                                                       |
+| series\*             | `Readonly<RadarSeries>[]`                                                                                                                                | -                     | The series to display in the bar chart.&#xA;An array of \[\[RadarSeries]] objects.                                                                                                                                                                                           |
+| seriesConfig         | `{ radar: ChartSeriesTypeConfig<'radar'> }`                                                                                                              | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| skipAnimation        | `boolean`                                                                                                                                                | -                     | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                             |
+| slotProps            | `Partial<ChartsDataProviderSlotProps>`                                                                                                                   | -                     | The props for the slots.                                                                                                                                                                                                                                                     |
+| slots                | `Partial<ChartsDataProviderSlots>`                                                                                                                       | -                     | Slots to customize charts' components.                                                                                                                                                                                                                                       |
+| theme                | `'light' \| 'dark'`                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+| width                | `number`                                                                                                                                                 | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                   | `string`                                                                                                                                                 | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children             | `string \| number \| bigint \| boolean \| ReactElement \| Iterable<React.ReactNode, any, any> \| React.ReactPortal \| Promise<AwaitedReactNode> \| null` | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useRadarAxis
+
+Returns an array with one item per metric with the different points to label.
+
+**useRadarAxis Parameters:**
+
+| Parameter | Type                 | Default | Description |
+| :-------- | :------------------- | :------ | :---------- |
+| params    | `UseRadarAxisParams` | -       | -           |
+
+**useRadarAxis Return Value:**
+
+```tsx
+type ReturnValue = {
+  metric: string;
+  angle: number;
+  center: { x: number; y: number };
+  labels: { x: number; y: number; value: number | Date; formattedValue: string }[];
+} | null;
+```
+
+## Additional Types
+
+### RADAR_PLUGINS
+
+```typescript
+type RADAR_PLUGINS = [
+  ChartPlugin<UseChartTooltipSignature<any>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartPolarAxisSignature<any>>,
+  ChartPlugin<UseChartHighlightSignature<any>>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+  ChartPlugin<UseChartVisibilityManagerSignature<any>>,
+];
+```
+
+### RadarAxisHighlightProps
+
+```typescript
+type RadarAxisHighlightProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<
+    Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>
+  >;
+};
+```
+
+### RadarAxisProps
+
+```typescript
+type RadarAxisProps = {
+  /**
+   * Defines how label align with the axis.
+   * - 'horizontal': labels stay horizontal and their placement change with the axis angle.
+   * - 'rotated': labels are rotated 90deg relatively to their axis.
+   * @default 'horizontal'
+   */
+  labelOrientation?: 'horizontal' | 'rotated';
+  /** The labels text anchor or a function returning the text anchor for a given axis angle (in degree). */
+  textAnchor?:
+    | 'start'
+    | 'middle'
+    | 'end'
+    | 'inherit'
+    | ((angle: number) => 'end' | 'inherit' | 'middle' | 'start' | undefined);
+  /** The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree). */
+  dominantBaseline?:
+    | 'auto'
+    | 'use-script'
+    | 'no-change'
+    | 'reset-size'
+    | 'ideographic'
+    | 'alphabetic'
+    | 'hanging'
+    | 'mathematical'
+    | 'central'
+    | 'middle'
+    | 'text-after-edge'
+    | 'text-before-edge'
+    | 'inherit'
+    | ((
+        angle: number,
+      ) =>
+        | 'alphabetic'
+        | 'hanging'
+        | 'ideographic'
+        | 'mathematical'
+        | 'inherit'
+        | 'auto'
+        | 'text-before-edge'
+        | 'middle'
+        | 'central'
+        | 'text-after-edge'
+        | 'use-script'
+        | 'no-change'
+        | 'reset-size'
+        | undefined);
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<Pick<RadarClasses, 'axisLine' | 'axisLabel' | 'axisRoot'>>;
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+### RadarChartPluginSignatures
+
+```typescript
+type RadarChartPluginSignatures = RadarChartPluginSignatures;
+```
+
+### RadarChartProps
+
+````typescript
+type RadarChartProps = {
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RadarChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RadarChartSlotProps;
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  children?: React.ReactNode;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: RadarItemIdentifier | Omit<RadarItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: RadarItemIdentifier | null) => void;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'radar'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'radar'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'radar'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'radar';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'radar';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'radar'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'radar' }
+    | VisibilityIdentifier<'radar'>
+  )[];
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  sx?: SxProps<Theme>;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+};
+````
+
+### RadarChartSlotProps
+
+```typescript
+type RadarChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### RadarChartSlots
+
+```typescript
+type RadarChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'data'
+    | 'label'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'data'
+    | 'label'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'data'
+    | 'label'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'data'
+    | 'label'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### radarClasses
+
+```typescript
+type radarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClasses
+
+```typescript
+type RadarClasses = {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+};
+```
+
+### RadarClassKey
+
+```typescript
+type RadarClassKey =
+  | 'axisLine'
+  | 'axisLabel'
+  | 'axisRoot'
+  | 'gridRadial'
+  | 'gridDivider'
+  | 'gridStripe'
+  | 'seriesRoot'
+  | 'seriesArea'
+  | 'seriesMark'
+  | 'axisHighlightRoot'
+  | 'axisHighlightLine'
+  | 'axisHighlightDot';
+```
+
+### RadarDataProviderProps
+
+```typescript
+type RadarDataProviderProps<
+  TSignatures extends ChartAnyPluginSignature[] = RadarChartPluginSignatures,
+> = {
+  /** Array of plugins used to add features to the chart. */
+  plugins?: [] | [ChartPlugin<ChartAnyPluginSignature>];
+  apiRef?: React.RefObject<ChartPublicAPI<TSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { radar: ChartSeriesTypeConfig<'radar'> };
+  children?:
+    | string
+    | number
+    | bigint
+    | boolean
+    | ReactElement
+    | Iterable<React.ReactNode, any, any>
+    | React.ReactPortal
+    | Promise<AwaitedReactNode>
+    | null;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /** Slots to customize charts' components. */
+  slots?: Partial<ChartsDataProviderSlots>;
+  /** The props for the slots. */
+  slotProps?: Partial<ChartsDataProviderSlotProps>;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: {};
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: number | Partial<ChartMargin>;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /**
+   * The series to display in the bar chart.
+   * An array of [[RadarSeries]] objects.
+   */
+  series: Readonly<RadarSeries>[];
+  /** The configuration of the radar scales. */
+  radar: RadarConfig;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
+};
+```
+
+### RadarGridProps
+
+```typescript
+type RadarGridProps = {
+  /**
+   * The number of divisions in the radar grid.
+   * @default 5
+   */
+  divisions?: number;
+  /**
+   * The grid shape.
+   * @default 'sharp'
+   */
+  shape?: 'sharp' | 'circular';
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   * @returns The color to fill the stripe.
+   */
+  stripeColor?: ((index: number) => string) | null;
+};
+```
+
+### RadarSeries
+
+```typescript
+type RadarSeries = {
+  /** The id of this series. */
+  id?: SeriesId;
+  data: number[];
+  /** The label to display on the tooltip or the legend. It can be a string or a function. */
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /** If `true` hide marks at value position. */
+  hideMark?: boolean;
+  /** If `true` fill the series area. */
+  fillArea?: boolean;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The string to display or null if the value should not be shown.
+   */
+  valueFormatter?: SeriesValueFormatter<number>;
+  /** The scope to apply when the series is highlighted. */
+  highlightScope?: HighlightScope<'radar' | 'bar' | 'line' | 'scatter' | 'pie'>;
+  /**
+   * Defines the mark type for the series.
+   *
+   * There is a default mark type for each series type.
+   */
+  labelMarkType?: ChartsLabelMarkType;
+  /**
+   * Color to use when displaying the series.
+   * If `colorGetter` is provided, it will be used to get the color for each data point instead.
+   * Otherwise, this color will be used for all data points in the series.
+   */
+  color?: string;
+  /**
+   * A function that returns a color based on the value and/or the data index of a point.
+   * The returned color is used when displaying the specific data point, e.g., a marker in a line chart.
+   * When the color of the entire series is required, e.g., in legends, the `color` property is used instead.
+   * @returns The color to use for the specific data point.
+   */
+  colorGetter?: (data: ColorCallbackValue<number>) => string;
+  type?: 'radar';
+};
+```
+
+### RadarSeriesAreaProps
+
+```typescript
+type RadarSeriesAreaProps = {
+  /** Callback fired when an area is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesMarksProps
+
+```typescript
+type RadarSeriesMarksProps = {
+  /** Callback fired when a mark is clicked. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### RadarSeriesPlotProps
+
+```typescript
+type RadarSeriesPlotProps = {
+  /** Callback fired when an area is clicked. */
+  onAreaClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** Callback fired when a mark is clicked. */
+  onMarkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    radarItemIdentifier: RadarClickIdentifier,
+  ) => void;
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /**
+   * The id of the series to display.
+   * If undefined all series are displayed.
+   */
+  seriesId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RadarClasses>;
+};
+```
+
+### UseRadarAxisParams
+
+```typescript
+type UseRadarAxisParams = {
+  /**
+   * The metric to get.
+   * If `undefined`, the hook returns `null`
+   */
+  metric?: string;
+  /**
+   * The absolute rotation angle of the metrics (in degree)
+   * If not defined the metric angle will be used.
+   */
+  angle?: number;
+  /**
+   * The number of divisions with label.
+   * @default 1
+   */
+  divisions?: number;
+};
+```
+
+## External Types
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: any;
+  params: any;
+  store: { state: any; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### SeriesValueFormatter
+
+```typescript
+type SeriesValueFormatter = (value: number, context: { dataIndex: number }) => string | null;
+```
diff --git a/docs/pages/x/api/charts/types.radar-series-area.ts b/docs/pages/x/api/charts/types.radar-series-area.ts
new file mode 100644
index 0000000000000..14d2723be5445
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-series-area.ts
@@ -0,0 +1,4 @@
+import { RadarSeriesArea } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarSeriesArea = createTypes(import.meta.url, RadarSeriesArea);
diff --git a/docs/pages/x/api/charts/types.radar-series-marks.ts b/docs/pages/x/api/charts/types.radar-series-marks.ts
new file mode 100644
index 0000000000000..015075f9bee1f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-series-marks.ts
@@ -0,0 +1,4 @@
+import { RadarSeriesMarks } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarSeriesMarks = createTypes(import.meta.url, RadarSeriesMarks);
diff --git a/docs/pages/x/api/charts/types.radar-series-plot.ts b/docs/pages/x/api/charts/types.radar-series-plot.ts
new file mode 100644
index 0000000000000..b246b70fb9dce
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-series-plot.ts
@@ -0,0 +1,4 @@
+import { RadarSeriesPlot } from '@mui/x-charts/RadarChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarSeriesPlot = createTypes(import.meta.url, RadarSeriesPlot);
diff --git a/docs/pages/x/api/charts/types.radar-series.ts b/docs/pages/x/api/charts/types.radar-series.ts
new file mode 100644
index 0000000000000..f6ce7da689e3a
--- /dev/null
+++ b/docs/pages/x/api/charts/types.radar-series.ts
@@ -0,0 +1,4 @@
+import { RadarSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRadarSeries = createTypes(import.meta.url, RadarSeries);
diff --git a/docs/pages/x/api/charts/types.range-bar-plot.ts b/docs/pages/x/api/charts/types.range-bar-plot.ts
new file mode 100644
index 0000000000000..fd5bfdfdc8901
--- /dev/null
+++ b/docs/pages/x/api/charts/types.range-bar-plot.ts
@@ -0,0 +1,4 @@
+import { RangeBarPlot } from '@mui/x-charts-premium/BarChartPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRangeBarPlot = createTypes(import.meta.url, RangeBarPlot);
diff --git a/docs/pages/x/api/charts/types.sankey-chart.md b/docs/pages/x/api/charts/types.sankey-chart.md
new file mode 100644
index 0000000000000..be8a7308365ff
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-chart.md
@@ -0,0 +1,2559 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.sankey-chart.md'
+
+## API Reference
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+## Additional Types
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'link'
+  | 'nodes'
+  | 'links'
+  | 'node'
+  | 'root'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+## External Types
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: unknown | null;
+}) => {
+  identifier: unknown;
+  color: string;
+  label: string | undefined;
+  value: number;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { sankey?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: unknown | null;
+  seriesLayout: { sankey?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    id?: string | undefined;
+    type: 'sankey';
+    data: { nodes?: unknown | undefined; links: unknown };
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    valueFormatter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => {
+  data: { nodes: unknown; links: unknown };
+  highlightScope: {
+    nodes: {
+      highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+    links: {
+      highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+  };
+  type: 'sankey';
+  nodeOptions?: unknown | undefined;
+  linkOptions?: unknown | undefined;
+  iterations?: number | undefined;
+  id: string;
+  valueFormatter: unknown;
+};
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: unknown) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: unknown) => unknown;
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (state: unknown, point: { x: number; y: number }) => unknown | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        nodes: {
+          highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+        links: {
+          highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+      }
+    | null
+    | undefined,
+  highlightedItem: unknown | null,
+) => unknown;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.sankey-chart.ts b/docs/pages/x/api/charts/types.sankey-chart.ts
new file mode 100644
index 0000000000000..2803ae579766c
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-chart.ts
@@ -0,0 +1,4 @@
+import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSankeyChart = createTypes(import.meta.url, SankeyChart);
diff --git a/docs/pages/x/api/charts/types.sankey-data-provider.md b/docs/pages/x/api/charts/types.sankey-data-provider.md
new file mode 100644
index 0000000000000..ab420b336c11f
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-data-provider.md
@@ -0,0 +1,2559 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.sankey-data-provider.md'
+
+## API Reference
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+## Additional Types
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'link'
+  | 'nodes'
+  | 'links'
+  | 'node'
+  | 'root'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+## External Types
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: unknown | null;
+}) => {
+  identifier: unknown;
+  color: string;
+  label: string | undefined;
+  value: number;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { sankey?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: unknown | null;
+  seriesLayout: { sankey?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    id?: string | undefined;
+    type: 'sankey';
+    data: { nodes?: unknown | undefined; links: unknown };
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    valueFormatter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => {
+  data: { nodes: unknown; links: unknown };
+  highlightScope: {
+    nodes: {
+      highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+    links: {
+      highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+  };
+  type: 'sankey';
+  nodeOptions?: unknown | undefined;
+  linkOptions?: unknown | undefined;
+  iterations?: number | undefined;
+  id: string;
+  valueFormatter: unknown;
+};
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: unknown) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: unknown) => unknown;
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (state: unknown, point: { x: number; y: number }) => unknown | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        nodes: {
+          highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+        links: {
+          highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+      }
+    | null
+    | undefined,
+  highlightedItem: unknown | null,
+) => unknown;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.sankey-data-provider.ts b/docs/pages/x/api/charts/types.sankey-data-provider.ts
new file mode 100644
index 0000000000000..0a65524ec401d
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-data-provider.ts
@@ -0,0 +1,4 @@
+import { SankeyDataProvider } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSankeyDataProvider = createTypes(import.meta.url, SankeyDataProvider);
diff --git a/docs/pages/x/api/charts/types.sankey-plot.md b/docs/pages/x/api/charts/types.sankey-plot.md
new file mode 100644
index 0000000000000..4b58201fca537
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-plot.md
@@ -0,0 +1,2559 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.sankey-plot.md'
+
+## API Reference
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+## Additional Types
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'link'
+  | 'nodes'
+  | 'links'
+  | 'node'
+  | 'root'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+## External Types
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: unknown | null;
+}) => {
+  identifier: unknown;
+  color: string;
+  label: string | undefined;
+  value: number;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { sankey?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: unknown | null;
+  seriesLayout: { sankey?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    id?: string | undefined;
+    type: 'sankey';
+    data: { nodes?: unknown | undefined; links: unknown };
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    valueFormatter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => {
+  data: { nodes: unknown; links: unknown };
+  highlightScope: {
+    nodes: {
+      highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+    links: {
+      highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+  };
+  type: 'sankey';
+  nodeOptions?: unknown | undefined;
+  linkOptions?: unknown | undefined;
+  iterations?: number | undefined;
+  id: string;
+  valueFormatter: unknown;
+};
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: unknown) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: unknown) => unknown;
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (state: unknown, point: { x: number; y: number }) => unknown | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        nodes: {
+          highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+        links: {
+          highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+      }
+    | null
+    | undefined,
+  highlightedItem: unknown | null,
+) => unknown;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.sankey-plot.ts b/docs/pages/x/api/charts/types.sankey-plot.ts
new file mode 100644
index 0000000000000..87cbcbf3809ab
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-plot.ts
@@ -0,0 +1,4 @@
+import { SankeyPlot } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSankeyPlot = createTypes(import.meta.url, SankeyPlot);
diff --git a/docs/pages/x/api/charts/types.sankey-tooltip-content.md b/docs/pages/x/api/charts/types.sankey-tooltip-content.md
new file mode 100644
index 0000000000000..af531c6b6b9e3
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-tooltip-content.md
@@ -0,0 +1,2559 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.sankey-tooltip-content.md'
+
+## API Reference
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+## Additional Types
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'link'
+  | 'nodes'
+  | 'links'
+  | 'node'
+  | 'root'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+## External Types
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: unknown | null;
+}) => {
+  identifier: unknown;
+  color: string;
+  label: string | undefined;
+  value: number;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { sankey?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: unknown | null;
+  seriesLayout: { sankey?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    id?: string | undefined;
+    type: 'sankey';
+    data: { nodes?: unknown | undefined; links: unknown };
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    valueFormatter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => {
+  data: { nodes: unknown; links: unknown };
+  highlightScope: {
+    nodes: {
+      highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+    links: {
+      highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+  };
+  type: 'sankey';
+  nodeOptions?: unknown | undefined;
+  linkOptions?: unknown | undefined;
+  iterations?: number | undefined;
+  id: string;
+  valueFormatter: unknown;
+};
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: unknown) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: unknown) => unknown;
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (state: unknown, point: { x: number; y: number }) => unknown | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        nodes: {
+          highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+        links: {
+          highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+      }
+    | null
+    | undefined,
+  highlightedItem: unknown | null,
+) => unknown;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.sankey-tooltip-content.ts b/docs/pages/x/api/charts/types.sankey-tooltip-content.ts
new file mode 100644
index 0000000000000..41d339b58a0be
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-tooltip-content.ts
@@ -0,0 +1,4 @@
+import { SankeyTooltipContent } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSankeyTooltipContent = createTypes(import.meta.url, SankeyTooltipContent);
diff --git a/docs/pages/x/api/charts/types.sankey-tooltip.md b/docs/pages/x/api/charts/types.sankey-tooltip.md
new file mode 100644
index 0000000000000..223fa97b45354
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-tooltip.md
@@ -0,0 +1,2559 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.sankey-tooltip.md'
+
+## API Reference
+
+### FocusedSankeyLink
+
+### FocusedSankeyNode
+
+### SankeyChart
+
+Sankey Chart component
+
+Displays a Sankey diagram, visualizing flows between nodes where the width
+of the links is proportional to the flow quantity.
+
+Demos:
+
+- [Sankey Chart](https://mui.com/x/react-charts/sankey/)
+
+API:
+
+- [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
+
+**SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyDataProvider
+
+Orchestrates the data providers for the sankey chart components and hooks.
+
+Use this component if you have custom HTML components that need to access the chart data.
+
+Demos:
+
+- [Composition](https://mui.com/x/api/charts/composition/)
+
+**SankeyDataProvider Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeriesType[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                     | -                                                                                                                                                                                                                                                                            |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### SankeyLinkLabelPlot
+
+**SankeyLinkLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyLinkPlot
+
+**SankeyLinkPlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyNodeLabelPlot
+
+**SankeyNodeLabelPlot Props:**
+
+| Prop    | Type                     | Default | Description                              |
+| :------ | :----------------------- | :------ | :--------------------------------------- |
+| classes | `Partial<SankeyClasses>` | -       | Classes applied to the various elements. |
+
+### SankeyNodePlot
+
+**SankeyNodePlot Props:**
+
+| Prop    | Type                                                                                              | Default | Description                                   |
+| :------ | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| onClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| classes | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+
+### SankeyPlot
+
+Renders a Sankey diagram plot.
+
+**SankeyPlot Props:**
+
+| Prop        | Type                                                                                              | Default | Description                                   |
+| :---------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------- |
+| classes     | `Partial<SankeyClasses>`                                                                          | -       | Classes applied to the various elements.      |
+| onLinkClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| onNodeClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)` | -       | Callback fired when a sankey item is clicked. |
+| className   | `string`                                                                                          | -       | A CSS class name applied to the root element. |
+
+### SankeyTooltip
+
+**SankeyTooltip Props:**
+
+| Prop      | Type                                     | Default     | Description                                                                                                              |
+| :-------- | :--------------------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChartsTooltipContainerClasses>` | -           | Override or extend the styles applied to the component.                                                                  |
+| position  | `'top' \| 'bottom' \| 'left' \| 'right'` | -           | Determines the tooltip position relatively to the anchor.                                                                |
+| slotProps | `ChartsTooltipContainerSlotProps`        | `{}`        | The props used for each component slot.                                                                                  |
+| slots     | `ChartsTooltipContainerSlots`            | `{}`        | Overridable component slots.                                                                                             |
+| trigger   | `'item' \| 'none'`                       | `'item'`    | Select the kind of tooltip to display 'item': Shows data about the item below the mouse.'none': Does not display tooltip |
+| anchor    | `'node' \| 'pointer' \| 'chart'`         | `'pointer'` | Determine if the tooltip should be placed on the pointer location or on the node.                                        |
+
+### SankeyTooltipContent
+
+**SankeyTooltipContent Props:**
+
+| Prop    | Type                                     | Default | Description                                             |
+| :------ | :--------------------------------------- | :------ | :------------------------------------------------------ |
+| classes | `Partial<ChartsTooltipContainerClasses>` | -       | Override or extend the styles applied to the component. |
+
+### Unstable_SankeyChart
+
+**Unstable_SankeyChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default               | Description                                                                                                                                                                                                                                                                  |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                    | `React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | -                                                                                                                                                                                                                                                                            |
+| classes                   | `Partial<SankeyClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | Classes applied to the various elements.                                                                                                                                                                                                                                     |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette` | Color palette used to colorize multiple series.                                                                                                                                                                                                                              |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                   |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                     | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                       |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Options to enable features planned for the next major.                                                                                                                                                                                                                       |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                    |
+| highlightedItem           | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                             |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`               | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                   |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | Localized text for chart components.                                                                                                                                                                                                                                         |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. |
+| onHighlightChange         | `((highlightedItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                     | The callback fired when the highlighted item changes.                                                                                                                                                                                                                        |
+| onLinkClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onNodeClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | Callback fired when a sankey item is clicked.                                                                                                                                                                                                                                |
+| onTooltipItemChange       | `((tooltipItem: SankeyItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                     | The callback fired when the tooltip item changes.                                                                                                                                                                                                                            |
+| series\*                  | `SankeySeries`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                     | The series to display in the Sankey chart.&#xA;A single object is expected.                                                                                                                                                                                                  |
+| seriesConfig              | `{ sankey: { seriesProcessor: SeriesProcessor<'sankey'>; seriesLayout?: SeriesLayoutGetter<'sankey'>; colorProcessor: ColorProcessor<'sankey'>; legendGetter: LegendGetter<'sankey'>; tooltipGetter: TooltipGetter<'sankey'>; ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>; tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>; getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>; keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>; identifierSerializer: IdentifierSerializer<'sankey'>; identifierCleaner: IdentifierCleaner<'sankey'>; getItemAtPosition?: GetItemAtPosition<'sankey'>; descriptionGetter: DescriptionGetter<'sankey'>; isHighlightedCreator: HighlightCreator<'sankey'>; isFadedCreator: HighlightCreator<'sankey'> } }` | -                     | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                         |
+| slotProps                 | `SankeyChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `{}`                  | The props used for each component slot.                                                                                                                                                                                                                                      |
+| slots                     | `SankeyChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{}`                  | Overridable component slots.                                                                                                                                                                                                                                                 |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                     | -                                                                                                                                                                                                                                                                            |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                     | -                                                                                                                                                                                                                                                                            |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                               |
+| tooltipItem               | `SankeyItemIdentifier \| Omit<SankeyNodeIdentifier, 'type'> \| Omit<SankeyLinkIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                     | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                   |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                   |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                     | -                                                                                                                                                                                                                                                                            |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                     | -                                                                                                                                                                                                                                                                            |
+
+### useSankeyLayout
+
+Get access to the sankey layout.
+
+**useSankeyLayout Return Value:**
+
+the sankey layout
+
+```tsx
+type ReturnValue = SankeyLayout | undefined;
+```
+
+### useSankeyLinkHighlightState
+
+**useSankeyLinkHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| linkIdentifier | `SankeyLinkIdentifier` | -       | -           |
+
+**useSankeyLinkHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeyNodeHighlightState
+
+**useSankeyNodeHighlightState Parameters:**
+
+| Parameter      | Type                   | Default | Description |
+| :------------- | :--------------------- | :------ | :---------- |
+| nodeIdentifier | `SankeyNodeIdentifier` | -       | -           |
+
+**useSankeyNodeHighlightState Return Value:**
+
+```tsx
+type ReturnValue = HighlightState;
+```
+
+### useSankeySeries
+
+Get access to the internal state of sankey series.
+
+**useSankeySeries Parameters:**
+
+| Parameter | Type     | Default | Description                  |
+| :-------- | :------- | :------ | :--------------------------- |
+| seriesId  | `string` | -       | The id of the series to get. |
+
+**useSankeySeries Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue = DefaultizedSankeySeriesType | undefined;
+```
+
+### useSankeySeriesContext
+
+Get access to the internal state of sankey series.
+The returned object contains:
+
+- series: a mapping from ids to series attributes.
+- seriesOrder: the array of series ids.
+
+**useSankeySeriesContext Return Value:**
+
+the sankey series
+
+```tsx
+type ReturnValue =
+  | { series: Record<string, ChartSeriesDefaultized>; seriesOrder: string[] }
+  | undefined;
+```
+
+## Additional Types
+
+### DefaultizedSankeySeriesType
+
+```typescript
+type DefaultizedSankeySeriesType = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyChartProps
+
+```typescript
+type SankeyChartProps = {
+  /**
+   * The series to display in the Sankey chart.
+   * A single object is expected.
+   */
+  series: SankeySeries;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotExtension
+
+```typescript
+type SankeyChartSlotExtension = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+};
+```
+
+### SankeyChartSlotProps
+
+```typescript
+type SankeyChartSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    }
+  >;
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### SankeyChartSlots
+
+```typescript
+type SankeyChartSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none' }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      sort?: undefined;
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### sankeyClasses
+
+```typescript
+type sankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClasses
+
+```typescript
+type SankeyClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the node label container. */
+  nodeLabels: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
+};
+```
+
+### SankeyClassKey
+
+```typescript
+type SankeyClassKey =
+  | 'link'
+  | 'nodes'
+  | 'links'
+  | 'node'
+  | 'root'
+  | 'nodeLabels'
+  | 'linkLabels'
+  | 'nodeLabel'
+  | 'linkLabel';
+```
+
+### SankeyData
+
+```typescript
+type SankeyData = {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: SankeyLink[];
+};
+```
+
+### SankeyDataProviderProps
+
+```typescript
+type SankeyDataProviderProps = {
+  children?: React.ReactNode;
+  series: SankeySeriesType[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<ChartPublicAPI<SankeyChartPluginSignatures> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: {
+    sankey: {
+      seriesProcessor: SeriesProcessor<'sankey'>;
+      seriesLayout?: SeriesLayoutGetter<'sankey'>;
+      colorProcessor: ColorProcessor<'sankey'>;
+      legendGetter: LegendGetter<'sankey'>;
+      tooltipGetter: TooltipGetter<'sankey'>;
+      ItemTooltipContent?: React.ComponentType<ItemTooltipContentProps<'sankey'>>;
+      tooltipItemPositionGetter?: TooltipItemPositionGetter<'sankey'>;
+      getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;
+      keyboardFocusHandler?: KeyboardFocusHandler<'sankey'>;
+      identifierSerializer: IdentifierSerializer<'sankey'>;
+      identifierCleaner: IdentifierCleaner<'sankey'>;
+      getItemAtPosition?: GetItemAtPosition<'sankey'>;
+      descriptionGetter: DescriptionGetter<'sankey'>;
+      isHighlightedCreator: HighlightCreator<'sankey'>;
+      isFadedCreator: HighlightCreator<'sankey'>;
+    };
+  };
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: SankeyItemIdentifier | null) => void;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | SankeyItemIdentifier
+    | Omit<SankeyNodeIdentifier, 'type'>
+    | Omit<SankeyLinkIdentifier, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (highlightedItem: SankeyItemIdentifier | null) => void;
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  sx?: SxProps<Theme>;
+};
+```
+
+### SankeyItemIdentifier
+
+```typescript
+type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+```
+
+### SankeyItemIdentifierWithData
+
+```typescript
+type SankeyItemIdentifierWithData<WithPosition extends boolean = true> =
+  | SankeyNodeIdentifierWithData<WithPosition>
+  | SankeyLinkIdentifierWithData<WithPosition>;
+```
+
+### SankeyLayout
+
+Calculated layout for the Sankey diagram
+
+```typescript
+type SankeyLayout<WithPosition extends boolean = true> = {
+  nodes: SankeyLayoutNode<WithPosition>[];
+  links: SankeyLayoutLink<WithPosition>[];
+};
+```
+
+### SankeyLayoutLink
+
+Represents the calculated positions and paths for a link in the Sankey diagram
+
+```typescript
+type SankeyLayoutLink<WithPosition extends boolean = true> = {
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithoutPosition
+
+```typescript
+type SankeyLayoutLinkWithoutPosition = {
+  source: SankeyLayoutNodeWithoutPosition;
+  target: SankeyLayoutNodeWithoutPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+};
+```
+
+### SankeyLayoutLinkWithPosition
+
+```typescript
+type SankeyLayoutLinkWithPosition = {
+  path?: string | null;
+  source: SankeyLayoutNodeWithPosition;
+  target: SankeyLayoutNodeWithPosition;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color: string;
+  /** Optional custom data for the link */
+  data?: any;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Link's zero-based index within the array of links calculated by Sankey layout generator. */
+  index?: number;
+  /** Link's vertical starting position (at source node) calculated by Sankey layout generator. */
+  y0?: number;
+  /** Link's vertical end position (at target node) calculated by Sankey layout generator. */
+  y1?: number;
+  /** Link's width (proportional to its value) calculated by Sankey layout generator. */
+  width?: number;
+};
+```
+
+### SankeyLayoutNode
+
+Represents the calculated positions and dimensions for a node in the Sankey diagram
+
+```typescript
+type SankeyLayoutNode<WithPosition extends boolean = true> = {
+  targetLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[] | SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithoutPosition
+
+```typescript
+type SankeyLayoutNodeWithoutPosition = {
+  targetLinks: SankeyLayoutLinkWithoutPosition[];
+  sourceLinks: SankeyLayoutLinkWithoutPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+};
+```
+
+### SankeyLayoutNodeWithPosition
+
+```typescript
+type SankeyLayoutNodeWithPosition = {
+  targetLinks: SankeyLayoutLinkWithPosition[];
+  sourceLinks: SankeyLayoutLinkWithPosition[];
+  value: number;
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color: string;
+  /** The node label to display */
+  label: string;
+  /** Node's fixedValue (user-defined) */
+  fixedValue?: number;
+  /** Node's zero-based index within the array of nodes calculated by Sankey layout generator. */
+  index?: number;
+  /** Node's zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. */
+  depth?: number;
+  /** Node's zero-based graph height, derived from the graph topology calculated by Sankey layout generator. */
+  height?: number;
+  /** Link's layer in case of layered layout, calculated by Sankey layout generator. */
+  layer?: number;
+  /** Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. */
+  x0?: number;
+  /** Node's maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. */
+  x1?: number;
+  /** Node's minimum vertical position calculated by Sankey layout generator. */
+  y0?: number;
+  /** Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. */
+  y1?: number;
+};
+```
+
+### SankeyLink
+
+```typescript
+type SankeyLink = {
+  /** Source node ID */
+  source: SankeyNodeId;
+  /** Target node ID */
+  target: SankeyNodeId;
+  /** The value/weight of the link (affects width) */
+  value: number;
+  /** Optional custom data for the link */
+  data?: any;
+  /**
+   * Optional color override for the link.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+};
+```
+
+### SankeyLinkIdentifier
+
+```typescript
+type SankeyLinkIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+};
+```
+
+### SankeyLinkIdentifierWithData
+
+```typescript
+type SankeyLinkIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'link';
+  /** The id of the source node */
+  sourceId: SankeyNodeId;
+  /** The id of the target node */
+  targetId: SankeyNodeId;
+  /** The link object with all the calculated properties */
+  link: SankeyLayoutLink<WithPosition>;
+};
+```
+
+### SankeyLinkLabelPlotProps
+
+```typescript
+type SankeyLinkLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyLinkOptions
+
+```typescript
+type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors.
+   * Can be a color string, or a keyword:
+   * - 'source': Use the color of the source node
+   * - 'target': Use the color of the target node
+   * @default 'source'
+   */
+  color?: string;
+  /** Opacity of the links (0-1) */
+  opacity?: number;
+  /** Whether to show link values */
+  showValues?: boolean;
+  /**
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};
+```
+
+### SankeyLinkPlotProps
+
+```typescript
+type SankeyLinkPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyNode
+
+```typescript
+type SankeyNode = {
+  /** Unique identifier for the node */
+  id: SankeyNodeId;
+  /** The node label to display */
+  label?: string;
+  /** Optional custom data for the node */
+  data?: any;
+  /** Optional color override for the node */
+  color?: string;
+};
+```
+
+### SankeyNodeId
+
+```typescript
+type SankeyNodeId = string | number;
+```
+
+### SankeyNodeIdentifier
+
+```typescript
+type SankeyNodeIdentifier = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+};
+```
+
+### SankeyNodeIdentifierWithData
+
+```typescript
+type SankeyNodeIdentifierWithData<WithPosition extends boolean = true> = {
+  type: 'sankey';
+  /** Unique identifier for the series */
+  seriesId: string;
+  /** Subtype to differentiate between node and link */
+  subType: 'node';
+  /** The id of the node */
+  nodeId: SankeyNodeId;
+  /** The node object with all the calculated properties */
+  node: SankeyLayoutNode<WithPosition>;
+};
+```
+
+### SankeyNodeLabelPlotProps
+
+```typescript
+type SankeyNodeLabelPlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+};
+```
+
+### SankeyNodeOptions
+
+```typescript
+type SankeyNodeOptions = {
+  /** Default color for nodes without specified colors */
+  color?: string;
+  /** Width of the nodes in pixels */
+  width?: number;
+  /** Padding between nodes in pixels */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /** Whether to show node labels */
+  showLabels?: boolean;
+  /**
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   * @default 'auto'
+   * @returns Comparison result
+   */
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+```
+
+### SankeyNodePlotProps
+
+```typescript
+type SankeyNodePlotProps = {
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeyPlotProps
+
+```typescript
+type SankeyPlotProps = {
+  /** A CSS class name applied to the root element. */
+  className?: string;
+  /** Classes applied to the various elements. */
+  classes?: Partial<SankeyClasses>;
+  /** Callback fired when a sankey item is clicked. */
+  onNodeClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    node: SankeyNodeIdentifierWithData,
+  ) => void;
+  /** Callback fired when a sankey item is clicked. */
+  onLinkClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    link: SankeyLinkIdentifierWithData,
+  ) => void;
+};
+```
+
+### SankeySeries
+
+```typescript
+type SankeySeries = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+  /** Type identifier for Sankey series */
+  type?: 'sankey';
+};
+```
+
+### SankeySeriesType
+
+```typescript
+type SankeySeriesType = {
+  /** Unique identifier for the series */
+  id?: string;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** The data for the Sankey diagram */
+  data: SankeyData;
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter?: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+### SankeyTooltipClasses
+
+```typescript
+type SankeyTooltipClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipContentClasses
+
+```typescript
+type SankeyTooltipContentClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+};
+```
+
+### SankeyTooltipProps
+
+```typescript
+type SankeyTooltipProps = {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+  /**
+   * Determine if the tooltip should be placed on the pointer location or on the node.
+   * @default 'pointer'
+   */
+  anchor?: 'node' | 'pointer' | 'chart';
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsTooltipContainerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsTooltipContainerSlots;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChartsTooltipContainerClasses>;
+  /** Determines the tooltip position relatively to the anchor. */
+  position?: 'top' | 'bottom' | 'left' | 'right';
+};
+```
+
+### SankeyTooltipSlotProps
+
+```typescript
+type SankeyTooltipSlotProps = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    }
+  >;
+};
+```
+
+### SankeyTooltipSlots
+
+```typescript
+type SankeyTooltipSlots = {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+      | { anchor?: 'node' | 'pointer'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'desc' | 'none' | 'asc' }
+    ) & {
+      slotProps?: ChartsTooltipContainerSlotProps;
+      slots?: ChartsTooltipContainerSlots;
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+    },
+    | 'symbol'
+    | 'object'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'line'
+    | 'slot'
+    | 'style'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'title'
+    | 'desc'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'linearGradient'
+    | 'marker'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+};
+```
+
+### SankeyValueFormatterContext
+
+```typescript
+type SankeyValueFormatterContext =
+  | { location: 'tooltip' | 'label'; type: 'node'; nodeId: SankeyNodeId }
+  | { location: 'tooltip' | 'label'; type: 'link'; sourceId: SankeyNodeId; targetId: SankeyNodeId };
+```
+
+### UseSankeySeriesContextReturnValue
+
+```typescript
+type UseSankeySeriesContextReturnValue = {
+  series: Record<string, ChartSeriesDefaultized>;
+  seriesOrder: string[];
+};
+```
+
+### UseSankeySeriesLayoutReturnValue
+
+```typescript
+type UseSankeySeriesLayoutReturnValue = { sankeyLayout: SankeyLayout };
+```
+
+### UseSankeySeriesReturnValue
+
+```typescript
+type UseSankeySeriesReturnValue = {
+  data: SankeyLayout<false>;
+  /** Highlight scope for the series derived from nodeOptions and linksOptions */
+  highlightScope: SankeyHighlightScope;
+  /** Type identifier for Sankey series */
+  type: 'sankey';
+  /** Optional configuration for the nodes style, layout, and behavior */
+  nodeOptions?: SankeyNodeOptions;
+  /** Optional configuration for the links style, layout, and behavior */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+  /** Unique identifier for the series */
+  id: string;
+  /**
+   * Formatter used to render values in tooltip or other data display.
+   * @returns The formatted value to display.
+   */
+  valueFormatter: (value: number, context: SankeyValueFormatterContext) => string | null;
+};
+```
+
+## External Types
+
+### SeriesProcessor
+
+```typescript
+type SeriesProcessor = (
+  params: { series: Record; seriesOrder: unknown },
+  dataset?: unknown | undefined,
+  isItemVisible?: unknown | undefined,
+) => { series: Record; seriesOrder: unknown };
+```
+
+### SeriesLayoutGetter
+
+```typescript
+type SeriesLayoutGetter = (
+  params: { series: Record; seriesOrder: unknown },
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  },
+) => {};
+```
+
+### ColorProcessor
+
+```typescript
+type ColorProcessor = (
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  },
+  xAxis?: unknown | undefined,
+  yAxis?: unknown | undefined,
+  zAxis?:
+    | {
+        colorScale?: ScaleOrdinal | ScaleSequential | ScaleThreshold | undefined;
+        id: string;
+        data?: unknown | undefined;
+        dataKey?: string | undefined;
+        valueGetter?: unknown | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        colorMap?:
+          | {
+              type: 'ordinal';
+              values?: unknown | undefined;
+              colors: unknown;
+              unknownColor?: string | undefined;
+            }
+          | {
+              type: 'continuous';
+              min?: number | Date | undefined;
+              max?: number | Date | undefined;
+              color: unknown;
+            }
+          | { type: 'piecewise'; thresholds: unknown; colors: unknown }
+          | undefined;
+      }
+    | undefined,
+) => unknown;
+```
+
+### LegendGetter
+
+```typescript
+type LegendGetter = (series: { series: Record; seriesOrder: unknown }) => unknown;
+```
+
+### TooltipGetter
+
+```typescript
+type TooltipGetter = (params: {
+  series: {
+    data: { nodes: unknown; links: unknown };
+    highlightScope: {
+      nodes: {
+        highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+      links: {
+        highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+        fade?: 'global' | 'none' | undefined;
+      };
+    };
+    type: 'sankey';
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    id: string;
+    valueFormatter: unknown;
+  };
+  axesConfig: { x?: unknown | undefined; y?: unknown | undefined; rotation?: any; radius?: any };
+  getColor: unknown;
+  identifier: unknown | null;
+}) => {
+  identifier: unknown;
+  color: string;
+  label: string | undefined;
+  value: number;
+  formattedValue: string | null;
+  markType: 'square' | 'circle' | 'line' | 'line+mark' | ComponentType | undefined;
+  markShape?: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | undefined;
+} | null;
+```
+
+### TooltipItemPositionGetter
+
+```typescript
+type TooltipItemPositionGetter = (params: {
+  series: { sankey?: { series: Record; seriesOrder: unknown } | undefined };
+  axesConfig: {
+    x?: unknown | undefined;
+    y?: unknown | undefined;
+    rotationAxes?: { axis: {}; axisIds: unknown } | undefined;
+    radiusAxes?: { axis: {}; axisIds: unknown } | undefined;
+  };
+  drawingArea: {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+  };
+  identifier: unknown | null;
+  seriesLayout: { sankey?: {} | undefined };
+  placement: 'top' | 'bottom' | 'left' | 'right';
+}) => { x: number; y: number } | null;
+```
+
+### GetSeriesWithDefaultValues
+
+```typescript
+type GetSeriesWithDefaultValues = (
+  series: {
+    id?: string | undefined;
+    type: 'sankey';
+    data: { nodes?: unknown | undefined; links: unknown };
+    nodeOptions?: unknown | undefined;
+    linkOptions?: unknown | undefined;
+    iterations?: number | undefined;
+    valueFormatter?: unknown | undefined;
+  },
+  seriesIndex: number,
+  colors: unknown,
+  theme: 'light' | 'dark',
+) => {
+  data: { nodes: unknown; links: unknown };
+  highlightScope: {
+    nodes: {
+      highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+    links: {
+      highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+      fade?: 'global' | 'none' | undefined;
+    };
+  };
+  type: 'sankey';
+  nodeOptions?: unknown | undefined;
+  linkOptions?: unknown | undefined;
+  iterations?: number | undefined;
+  id: string;
+  valueFormatter: unknown;
+};
+```
+
+### KeyboardFocusHandler
+
+```typescript
+type KeyboardFocusHandler = (event: KeyboardEvent) => unknown | null;
+```
+
+### IdentifierSerializer
+
+```typescript
+type IdentifierSerializer = (identifier: unknown) => string;
+```
+
+### IdentifierCleaner
+
+```typescript
+type IdentifierCleaner = (identifier: unknown) => unknown;
+```
+
+### GetItemAtPosition
+
+```typescript
+type GetItemAtPosition = (state: unknown, point: { x: number; y: number }) => unknown | undefined;
+```
+
+### DescriptionGetter
+
+```typescript
+type DescriptionGetter = (params: unknown) => string;
+```
+
+### HighlightCreator
+
+```typescript
+type HighlightCreator = (
+  highlightScope:
+    | {
+        nodes: {
+          highlight?: 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+        links: {
+          highlight?: 'links' | 'nodes' | 'source' | 'target' | 'none' | undefined;
+          fade?: 'global' | 'none' | undefined;
+        };
+      }
+    | null
+    | undefined,
+  highlightedItem: unknown | null,
+) => unknown;
+```
+
+### HighlightState
+
+```typescript
+type HighlightState = 'highlighted' | 'faded' | 'none';
+```
diff --git a/docs/pages/x/api/charts/types.sankey-tooltip.ts b/docs/pages/x/api/charts/types.sankey-tooltip.ts
new file mode 100644
index 0000000000000..d7e02cd0ea179
--- /dev/null
+++ b/docs/pages/x/api/charts/types.sankey-tooltip.ts
@@ -0,0 +1,4 @@
+import { SankeyTooltip } from '@mui/x-charts-pro/SankeyChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSankeyTooltip = createTypes(import.meta.url, SankeyTooltip);
diff --git a/docs/pages/x/api/charts/types.scatter-chart-pro.ts b/docs/pages/x/api/charts/types.scatter-chart-pro.ts
new file mode 100644
index 0000000000000..f299ff2447b12
--- /dev/null
+++ b/docs/pages/x/api/charts/types.scatter-chart-pro.ts
@@ -0,0 +1,4 @@
+import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesScatterChartPro = createTypes(import.meta.url, ScatterChartPro);
diff --git a/docs/pages/x/api/charts/types.scatter-chart.ts b/docs/pages/x/api/charts/types.scatter-chart.ts
new file mode 100644
index 0000000000000..5d9c0c1d2aafa
--- /dev/null
+++ b/docs/pages/x/api/charts/types.scatter-chart.ts
@@ -0,0 +1,4 @@
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesScatterChart = createTypes(import.meta.url, ScatterChart);
diff --git a/docs/pages/x/api/charts/types.scatter-plot.ts b/docs/pages/x/api/charts/types.scatter-plot.ts
new file mode 100644
index 0000000000000..b7296d8e58bfe
--- /dev/null
+++ b/docs/pages/x/api/charts/types.scatter-plot.ts
@@ -0,0 +1,4 @@
+import { ScatterPlot } from '@mui/x-charts/ScatterChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesScatterPlot = createTypes(import.meta.url, ScatterPlot);
diff --git a/docs/pages/x/api/charts/types.scatter-series.ts b/docs/pages/x/api/charts/types.scatter-series.ts
new file mode 100644
index 0000000000000..b8d75de8b2f46
--- /dev/null
+++ b/docs/pages/x/api/charts/types.scatter-series.ts
@@ -0,0 +1,4 @@
+import { ScatterSeries } from '@mui/x-charts-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesScatterSeries = createTypes(import.meta.url, ScatterSeries);
diff --git a/docs/pages/x/api/charts/types.scatter.md b/docs/pages/x/api/charts/types.scatter.md
new file mode 100644
index 0000000000000..d176e02473899
--- /dev/null
+++ b/docs/pages/x/api/charts/types.scatter.md
@@ -0,0 +1,1594 @@
+# Charts
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.scatter.md'
+
+## API Reference
+
+### FocusedScatterMark
+
+### Scatter
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [Scatter API](https://mui.com/x/api/charts/scatter/)
+
+**Scatter Props:**
+
+| Prop          | Type                                                                                                        | Default | Description                                                                                                                                                                                                                                    |
+| :------------ | :---------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes       | `Partial<ScatterClasses>`                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| color\*       | `string`                                                                                                    | -       | -                                                                                                                                                                                                                                              |
+| colorGetter\* | `((dataIndex?: number) => string)`                                                                          | -       | Function to get the color of a scatter item given its data index.&#xA;The data index argument is optional. If not provided, the color for the entire series is returned.&#xA;If provided, the color for the specific scatter item is returned. |
+| onItemClick   | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -       | Callback fired when clicking on a scatter item.                                                                                                                                                                                                |
+| series\*      | `DefaultizedScatterSeriesType`                                                                              | -       | -                                                                                                                                                                                                                                              |
+| slotProps     | `ScatterSlotProps`                                                                                          | -       | -                                                                                                                                                                                                                                              |
+| slots         | `ScatterSlots`                                                                                              | -       | -                                                                                                                                                                                                                                              |
+| xScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+| yScale\*      | `D3Scale`                                                                                                   | -       | -                                                                                                                                                                                                                                              |
+
+### ScatterChart
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+
+**ScatterChart Props:**
+
+| Prop                      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                    | Description                                                                                                                                                                                                                                                                                                                           |
+| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| apiRef                    | `React.RefObject<Partial<{}> \| undefined>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| axesGap                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `0`                        | A gap added between axes when multiple axes are rendered on the same side of the chart.                                                                                                                                                                                                                                               |
+| axisHighlight             | `ChartsAxisHighlightProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{ x: 'none', y: 'none' }` | The configuration of axes highlight.                                                                                                                                                                                                                                                                                                  |
+| brushConfig               | `BrushConfig`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Configuration for the brush interaction.                                                                                                                                                                                                                                                                                              |
+| colors                    | `ChartsColorPalette`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `rainbowSurgePalette`      | Color palette used to colorize multiple series.                                                                                                                                                                                                                                                                                       |
+| dataset                   | `DatasetElementType<unknown>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | An array of objects that can be used to populate series and axes data using their `dataKey` property.                                                                                                                                                                                                                                 |
+| desc                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The description of the chart.&#xA;Used to provide an accessible description for the chart.                                                                                                                                                                                                                                            |
+| disableAxisListener       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, the charts will not listen to the mouse move event.&#xA;It might break interactive features, but will improve performance.                                                                                                                                                                                                 |
+| disableClosestPoint       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the closest point interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                    |
+| disableHitArea            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the hit area interaction is disabled and falls back to hover events.                                                                                                                                                                                                                                                         |
+| disableKeyboardNavigation | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, disables keyboard navigation for the chart.                                                                                                                                                                                                                                                                                |
+| disableVoronoi            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, the interaction will not use the Voronoi cell and fall back to hover events.                                                                                                                                                                                                                                                 |
+| experimentalFeatures      | `ChartExperimentalFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Options to enable features planned for the next major.                                                                                                                                                                                                                                                                                |
+| grid                      | `Pick<ChartsGridProps, 'vertical' \| 'horizontal'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | Option to display a cartesian grid in the background.                                                                                                                                                                                                                                                                                 |
+| height                    | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The height of the chart in px. If not defined, it takes the height of the parent element.                                                                                                                                                                                                                                             |
+| hiddenItems               | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of hidden series and/or items. Different chart types use different keys.                                                                                                                                                                                                                                                         |
+| hideLegend                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, the legend is not rendered.                                                                                                                                                                                                                                                                                                |
+| highlightedItem           | `{ type: 'scatter'; seriesId: string; dataIndex?: number } \| Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                          | The highlighted item.&#xA;Used when the highlight is controlled.                                                                                                                                                                                                                                                                      |
+| hitAreaRadius             | `'item' \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                          | Defines the maximum distance between a scatter point and the pointer that triggers the interaction.&#xA;If set to `'item'`, the radius is the `markerSize`.&#xA;If `undefined`, the radius is assumed to be infinite.                                                                                                                 |
+| initialHiddenItems        | `({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' } \| VisibilityIdentifier<'scatter'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                          | List of initially hidden series and/or items.&#xA;Used for uncontrolled state. Different chart types use different keys.                                                                                                                                                                                                              |
+| loading                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                            |
+| localeText                | `Partial<ChartsLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                          | Localized text for chart components.                                                                                                                                                                                                                                                                                                  |
+| margin                    | `Partial<ChartMargin> \| number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The margin between the SVG and the drawing area.&#xA;It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.                                                          |
+| onAxisClick               | `((event: MouseEvent, data: ChartsAxisData \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called for onClick events.&#xA;The second argument contains information about all line/bar elements at the current mouse position.                                                                                                                                                                                       |
+| onHiddenItemsChange       | `((hiddenItems: ({ type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' })[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | Callback fired when any hidden identifiers change.                                                                                                                                                                                                                                                                                    |
+| onHighlightChange         | `((highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | The callback fired when the highlighted item changes.                                                                                                                                                                                                                                                                                 |
+| onItemClick               | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void) \| ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                    | -                          | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| onTooltipAxisChange       | `((axisItems: AxisItemIdentifier[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                          | The function called when the pointer position corresponds to a new axis data item.&#xA;This update can either be caused by a pointer movement, or an axis update.&#xA;In case of multiple axes, the function is called if at least one axis is updated.&#xA;The argument contains the identifier for all axes with a `data` property. |
+| onTooltipItemChange       | `((tooltipItem: ScatterItemIdentifier \| null) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The callback fired when the tooltip item changes.                                                                                                                                                                                                                                                                                     |
+| renderer                  | `RendererType`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'svg-single'`             | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| series\*                  | `ScatterSeries[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | The series to display in the scatter chart.&#xA;An array of \[\[ScatterSeries]] objects.                                                                                                                                                                                                                                              |
+| seriesConfig              | `{ scatter: ChartSeriesTypeConfig<'scatter'> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                          | The configuration for the series types.&#xA;This is used to define how each series type should be processed, colored, and displayed.                                                                                                                                                                                                  |
+| showToolbar               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                    | If true, shows the default chart toolbar.                                                                                                                                                                                                                                                                                             |
+| skipAnimation             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                          | If `true`, animations are skipped.&#xA;If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.                                                                                                                                                                                                      |
+| slotProps                 | `ScatterChartSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{}`                       | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots                     | `ScatterChartSlots`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `{}`                       | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| sx                        | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| theme                     | `'light' \| 'dark'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| title                     | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The title of the chart.&#xA;Used to provide an accessible label for the chart.                                                                                                                                                                                                                                                        |
+| tooltipAxis               | `AxisItemIdentifier[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The controlled axis tooltip.&#xA;Identified by the axis id, and data index.                                                                                                                                                                                                                                                           |
+| tooltipItem               | `ScatterItemIdentifier \| Omit<ScatterItemIdentifier, 'type'> \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                          | The tooltip item.&#xA;Used when the tooltip is controlled.                                                                                                                                                                                                                                                                            |
+| width                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | The width of the chart in px. If not defined, it takes the width of the parent element.                                                                                                                                                                                                                                               |
+| xAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>)[]` | -                          | The configuration of the x-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| yAxis                     | `(MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'> \| MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>)[]` | -                          | The configuration of the y-axes.&#xA;If not provided, a default axis config is used.&#xA;An array of \[\[AxisConfig]] objects.                                                                                                                                                                                                        |
+| zAxis                     | `(MakeOptional<ZAxisConfig, 'id'>)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                          | The configuration of the z-axes.                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                            |
+| children                  | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+| className                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                          | -                                                                                                                                                                                                                                                                                                                                     |
+
+**`hiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+**`initialHiddenItems` Prop Example:**
+
+```ts
+[
+  {
+    type: 'pie',
+    seriesId: 'series-1',
+    dataIndex: 3,
+  },
+  {
+    type: 'line',
+    seriesId: 'series-2',
+  },
+];
+```
+
+### ScatterMarker
+
+**ScatterMarker Props:**
+
+| Prop            | Type                                                          | Default | Description                                     |
+| :-------------- | :------------------------------------------------------------ | :------ | :---------------------------------------------- |
+| onClick         | `((event: React.MouseEvent<SVGElement, MouseEvent>) => void)` | -       | Callback fired when clicking on a scatter item. |
+| color\*         | `string`                                                      | -       | The fill color of the marker.                   |
+| dataIndex\*     | `number`                                                      | -       | The index of the data point.                    |
+| isFaded\*       | `boolean`                                                     | -       | If `true`, the marker is faded.                 |
+| isHighlighted\* | `boolean`                                                     | -       | If `true`, the marker is highlighted.           |
+| seriesId\*      | `string`                                                      | -       | The series ID.                                  |
+| size\*          | `number`                                                      | -       | The size of the marker.                         |
+| x\*             | `number`                                                      | -       | The x coordinate of the data point.             |
+| y\*             | `number`                                                      | -       | The y coordinate of the data point.             |
+
+### ScatterPlot
+
+Demos:
+
+- [Scatter](https://mui.com/x/react-charts/scatter/)
+- [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+
+API:
+
+- [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+
+**ScatterPlot Props:**
+
+| Prop        | Type                                                                                                        | Default        | Description                                                                                                                                                                                                                                                                                                                           |
+| :---------- | :---------------------------------------------------------------------------------------------------------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classes     | `Partial<ScatterClasses>`                                                                                   | -              | -                                                                                                                                                                                                                                                                                                                                     |
+| onItemClick | `((event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void)` | -              | Callback fired when clicking on a scatter item.                                                                                                                                                                                                                                                                                       |
+| renderer    | `RendererType`                                                                                              | `'svg-single'` | The type of renderer to use for the scatter plot. `svg-single`: Renders every scatter item in a `<circle />` element.`svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.&#xA;Read more: https\://mui.com/x/react-charts/scatter/#performance |
+| slotProps   | `ScatterPlotSlotProps`                                                                                      | `{}`           | The props used for each component slot.                                                                                                                                                                                                                                                                                               |
+| slots       | `ScatterPlotSlots`                                                                                          | `{}`           | Overridable component slots.                                                                                                                                                                                                                                                                                                          |
+| className   | `string`                                                                                                    | -              | -                                                                                                                                                                                                                                                                                                                                     |
+
+## Additional Types
+
+### RendererType
+
+```typescript
+type RendererType = 'svg-single' | 'svg-batch';
+```
+
+### SCATTER_CHART_PLUGINS
+
+```typescript
+type SCATTER_CHART_PLUGINS = [
+  ChartPlugin<UseChartZAxisSignature>,
+  ChartPlugin<UseChartBrushSignature>,
+  ChartPlugin<UseChartTooltipSignature<'scatter'>>,
+  ChartPlugin<UseChartInteractionSignature>,
+  ChartPlugin<UseChartCartesianAxisSignature<'scatter'>>,
+  ChartPlugin<UseChartHighlightSignature<'scatter'>>,
+  ChartPlugin<UseChartVisibilityManagerSignature<'scatter'>>,
+  ChartPlugin<UseChartClosestPointSignature>,
+  ChartPlugin<UseChartKeyboardNavigationSignature>,
+];
+```
+
+### ScatterChartPluginSignatures
+
+```typescript
+type ScatterChartPluginSignatures = ScatterChartPluginSignatures;
+```
+
+### ScatterChartProps
+
+````typescript
+type ScatterChartProps = {
+  /**
+   * The series to display in the scatter chart.
+   * An array of [[ScatterSeries]] objects.
+   */
+  series: ScatterSeries[];
+  /**
+   * The configuration of axes highlight.
+   * @default { x: 'none', y: 'none' }
+   * @see
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /** Option to display a cartesian grid in the background. */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableVoronoi?: boolean;
+  /** If `true`, the legend is not rendered. */
+  hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartSlotProps;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?:
+    | ((
+        event: React.MouseEvent<SVGElement, MouseEvent>,
+        scatterItemIdentifier: ScatterItemIdentifier,
+      ) => void)
+    | ((event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void);
+  /** The width of the chart in px. If not defined, it takes the width of the parent element. */
+  width?: number;
+  className?: string;
+  /** The height of the chart in px. If not defined, it takes the height of the parent element. */
+  height?: number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  children?: React.ReactNode;
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   */
+  margin?: Partial<ChartMargin> | number;
+  sx?: SxProps<Theme>;
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsXAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsXAxisProps>, 'id'>
+  )[];
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: (
+    | MakeOptional<AxisConfig<'time', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'log', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'point', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'symlog', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'pow', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'sqrt', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'utc', any, ChartsYAxisProps>, 'id'>
+    | MakeOptional<AxisConfig<'linear', any, ChartsYAxisProps>, 'id'>
+  )[];
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
+  apiRef?: React.RefObject<Partial<{}> | undefined>;
+  /**
+   * The configuration for the series types.
+   * This is used to define how each series type should be processed, colored, and displayed.
+   */
+  seriesConfig?: { scatter: ChartSeriesTypeConfig<'scatter'> };
+  /** Localized text for chart components. */
+  localeText?: Partial<ChartsLocaleText>;
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap?: number;
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius?: 'item' | number;
+  /** Options to enable features planned for the next major. */
+  experimentalFeatures?: ChartExperimentalFeatures;
+  /** An array of objects that can be used to populate series and axes data using their `dataKey` property. */
+  dataset?: DatasetElementType<unknown>[];
+  /**
+   * Color palette used to colorize multiple series.
+   * @default rainbowSurgePalette
+   */
+  colors?: ChartsColorPalette;
+  theme?: 'light' | 'dark';
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation?: boolean;
+  /** The configuration of the z-axes. */
+  zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+  /** Configuration for the brush interaction. */
+  brushConfig?: BrushConfig;
+  /**
+   * The tooltip item.
+   * Used when the tooltip is controlled.
+   */
+  tooltipItem?: ScatterItemIdentifier | Omit<ScatterItemIdentifier, 'type'> | null;
+  /** The callback fired when the tooltip item changes. */
+  onTooltipItemChange?: (tooltipItem: ScatterItemIdentifier | null) => void;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   */
+  onAxisClick?: (event: MouseEvent, data: ChartsAxisData | null) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   */
+  onTooltipAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?:
+    | { type: 'scatter'; seriesId: string; dataIndex?: number }
+    | Omit<{ type: 'scatter'; seriesId: string; dataIndex?: number }, 'type'>
+    | null;
+  /** The callback fired when the highlighted item changes. */
+  onHighlightChange?: (
+    highlightedItem: { type: 'scatter'; seriesId: string; dataIndex?: number } | null,
+  ) => void;
+  /** Callback fired when any hidden identifiers change. */
+  onHiddenItemsChange?: (
+    hiddenItems: {
+      type?: 'scatter';
+      seriesId?: string;
+      dataIndex?: number;
+      seriesId: string;
+      type: 'scatter';
+    }[],
+  ) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /**
+   * List of initially hidden series and/or items.
+   * Used for uncontrolled state.
+   *
+   * Different chart types use different keys.
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  initialHiddenItems?: (
+    | { type?: 'scatter'; seriesId?: string; dataIndex?: number; seriesId: string; type: 'scatter' }
+    | VisibilityIdentifier<'scatter'>
+  )[];
+  /** If `true`, disables keyboard navigation for the chart. */
+  disableKeyboardNavigation?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+};
+````
+
+### ScatterChartSlotProps
+
+```typescript
+type ScatterChartSlotProps = {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
+  axisTickLabel?: Partial<ChartsTextProps>;
+  axisLabel?: Partial<ChartsTextProps>;
+  xAxis?: Partial<ChartsXAxisProps>;
+  yAxis?: Partial<ChartsYAxisProps>;
+  scatter?: Partial<ScatterProps>;
+  marker?: ScatterMarkerProps;
+  legend?: (
+    | {
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: SeriesLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<ChartsLegendClasses>;
+        toggleVisibilityOnClick?: boolean;
+      }
+    | {
+        minLabel?: string | LabelFormatter;
+        maxLabel?: string | LabelFormatter;
+        gradientId?: string;
+        labelPosition?: 'start' | 'end' | 'extremes';
+        reverse?: boolean;
+        classes?: Partial<ContinuousColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        rotateGradient?: boolean;
+        thickness?: number;
+      }
+    | {
+        labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+        labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
+        onItemClick?: (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+          legendItem: PiecewiseColorLegendItemContext,
+          index: number,
+        ) => void;
+        classes?: Partial<PiecewiseColorLegendClasses>;
+        axisDirection?: 'x' | 'y' | 'z';
+        axisId?: AxisId;
+        markType?: ChartsLabelMarkType;
+      }
+  ) & {
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+    className?: string;
+    sx?: SxProps<Theme>;
+    tabIndex?: number;
+    /**
+     * The position of the legend in relation to the chart.
+     * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+     * If customization is needed, simply use the composition pattern.
+     */
+    position?: Position;
+  };
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  /** Props for the toolbar component. */
+  toolbar?: Partial<ChartsToolbarProps>;
+  baseButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & { ref?: React.Ref<HTMLButtonElement>; id?: string; disabled?: boolean; tabIndex?: number };
+  baseIconButton?: React.DOMAttributes<HTMLElement> & {
+    className?: string;
+    style?: React.CSSProperties;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    size?: 'small' | 'medium' | 'large';
+  };
+};
+```
+
+### ScatterChartSlots
+
+```typescript
+type ScatterChartSlots = {
+  /**
+   * Custom component for the axis main line.
+   * @default 'line'
+   */
+  axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for the axis tick.
+   * @default 'line'
+   */
+  axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+  /**
+   * Custom component for tick label.
+   * @default ChartsText
+   */
+  axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for axis label.
+   * @default ChartsText
+   */
+  axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
+  /**
+   * Custom component for the x-axis.
+   * @default ChartsXAxis
+   */
+  xAxis?: React.JSXElementConstructor<ChartsXAxisProps>;
+  /**
+   * Custom component for the y-axis.
+   * @default ChartsYAxis
+   */
+  yAxis?: React.JSXElementConstructor<ChartsYAxisProps>;
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?:
+    | React.JSXElementConstructor<ChartsLegendProps>
+    | React.JSXElementConstructor<ContinuousColorLegendProps>
+    | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'marker'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'data'
+    | 'legend'
+    | 'circle'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<
+    CommonOverlayProps,
+    | 'symbol'
+    | 'object'
+    | 'marker'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'data'
+    | 'legend'
+    | 'circle'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<
+    (
+      | { anchor?: 'pointer' | 'node'; trigger?: 'item'; sort?: undefined }
+      | { anchor?: 'pointer' | 'chart'; trigger?: 'axis'; sort?: 'none' | 'desc' | 'asc' }
+      | { anchor?: 'pointer'; trigger?: 'none'; sort?: undefined }
+    ) & {
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      classes?: Partial<ChartsTooltipContainerClasses>;
+      slots?: ChartsTooltipContainerSlots;
+      slotProps?: ChartsTooltipContainerSlotProps;
+    },
+    | 'symbol'
+    | 'object'
+    | 'marker'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'data'
+    | 'legend'
+    | 'circle'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<
+    ChartsToolbarProps,
+    | 'symbol'
+    | 'object'
+    | 'marker'
+    | 'style'
+    | 'slot'
+    | 'clipPath'
+    | 'filter'
+    | 'mask'
+    | 'path'
+    | 'line'
+    | 'label'
+    | 'text'
+    | 'p'
+    | 'data'
+    | 'legend'
+    | 'circle'
+    | 'mark'
+    | 'g'
+    | 'search'
+    | 'big'
+    | 'link'
+    | 'small'
+    | 'sub'
+    | 'sup'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'li'
+    | 'main'
+    | 'map'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'summary'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'image'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  baseButton?: React.ComponentType<ChartBaseButtonProps>;
+  baseIconButton?: React.ComponentType<ChartBaseIconButtonProps>;
+};
+```
+
+### scatterClasses
+
+```typescript
+type scatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClasses
+
+```typescript
+type ScatterClasses = {
+  /** Styles applied to the scatter plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
+};
+```
+
+### ScatterClassKey
+
+```typescript
+type ScatterClassKey = 'root' | 'series' | 'marker' | 'focusedMark';
+```
+
+### ScatterMarkerProps
+
+```typescript
+type ScatterMarkerProps = {
+  /** The series ID. */
+  seriesId: string;
+  /** The index of the data point. */
+  dataIndex: number;
+  /** The x coordinate of the data point. */
+  x: number;
+  /** The y coordinate of the data point. */
+  y: number;
+  /** The fill color of the marker. */
+  color: string;
+  /** The size of the marker. */
+  size: number;
+  /** If `true`, the marker is highlighted. */
+  isHighlighted: boolean;
+  /** If `true`, the marker is faded. */
+  isFaded: boolean;
+  /** Callback fired when clicking on a scatter item. */
+  onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+};
+```
+
+### ScatterMarkerSlotExtension
+
+```typescript
+type ScatterMarkerSlotExtension = {
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterMarkerSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterMarkerSlots;
+};
+```
+
+### ScatterMarkerSlotProps
+
+```typescript
+type ScatterMarkerSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterMarkerSlots
+
+```typescript
+type ScatterMarkerSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterPlotProps
+
+```typescript
+type ScatterPlotProps = {
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ScatterPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
+  classes?: Partial<ScatterClasses>;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+};
+```
+
+### ScatterPlotSlotProps
+
+```typescript
+type ScatterPlotSlotProps = { scatter?: Partial<ScatterProps>; marker?: ScatterMarkerProps };
+```
+
+### ScatterPlotSlots
+
+```typescript
+type ScatterPlotSlots = {
+  scatter?: React.JSXElementConstructor<ScatterProps>;
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+### ScatterProps
+
+```typescript
+type ScatterProps = {
+  series: DefaultizedScatterSeriesType;
+  xScale: D3Scale;
+  yScale: D3Scale;
+  color: string;
+  /**
+   * Function to get the color of a scatter item given its data index.
+   * The data index argument is optional. If not provided, the color for the entire series is returned.
+   * If provided, the color for the specific scatter item is returned.
+   */
+  colorGetter: (dataIndex?: number) => string;
+  /** Callback fired when clicking on a scatter item. */
+  onItemClick?: (
+    event: React.MouseEvent<SVGElement, MouseEvent>,
+    scatterItemIdentifier: ScatterItemIdentifier,
+  ) => void;
+  classes?: Partial<ScatterClasses>;
+  slots?: ScatterSlots;
+  slotProps?: ScatterSlotProps;
+};
+```
+
+### ScatterSeries
+
+```typescript
+type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
+```
+
+### ScatterSlotProps
+
+```typescript
+type ScatterSlotProps = { marker?: ScatterMarkerProps };
+```
+
+### ScatterSlots
+
+```typescript
+type ScatterSlots = {
+  /**
+   * The component that renders the marker for a scatter point.
+   * @default ScatterMarker
+   */
+  marker?: React.JSXElementConstructor<ScatterMarkerProps>;
+};
+```
+
+## External Types
+
+### Direction
+
+```typescript
+type Direction = 'vertical' | 'horizontal';
+```
+
+### LabelFormatter
+
+```typescript
+type LabelFormatter = (params: { value: number | Date; formattedValue: string }) => string;
+```
+
+### AxisId
+
+```typescript
+type AxisId = string | number;
+```
+
+### ChartPlugin
+
+```typescript
+type ChartPlugin = (options: {
+  instance: unknown;
+  params: unknown;
+  store: { state: unknown; subscribe: unknown; getSnapshot: unknown; use: unknown };
+  plugins: unknown;
+}) => unknown;
+```
diff --git a/docs/pages/x/api/charts/types.scatter.ts b/docs/pages/x/api/charts/types.scatter.ts
new file mode 100644
index 0000000000000..3d81855d75317
--- /dev/null
+++ b/docs/pages/x/api/charts/types.scatter.ts
@@ -0,0 +1,4 @@
+import { Scatter } from '@mui/x-charts/ScatterChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesScatter = createTypes(import.meta.url, Scatter);
diff --git a/docs/pages/x/api/charts/types.spark-line-chart.ts b/docs/pages/x/api/charts/types.spark-line-chart.ts
new file mode 100644
index 0000000000000..a3bd7888d4312
--- /dev/null
+++ b/docs/pages/x/api/charts/types.spark-line-chart.ts
@@ -0,0 +1,4 @@
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSparkLineChart = createTypes(import.meta.url, SparkLineChart);
diff --git a/docs/pages/x/api/charts/types.toolbar-button.ts b/docs/pages/x/api/charts/types.toolbar-button.ts
new file mode 100644
index 0000000000000..e1978e7323077
--- /dev/null
+++ b/docs/pages/x/api/charts/types.toolbar-button.ts
@@ -0,0 +1,4 @@
+import { ToolbarButton } from '@mui/x-charts/Toolbar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesToolbarButton = createTypes(import.meta.url, ToolbarButton);
diff --git a/docs/pages/x/api/charts/types.toolbar.ts b/docs/pages/x/api/charts/types.toolbar.ts
new file mode 100644
index 0000000000000..656047c013a8b
--- /dev/null
+++ b/docs/pages/x/api/charts/types.toolbar.ts
@@ -0,0 +1,4 @@
+import { Toolbar } from '@mui/x-charts/Toolbar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesToolbar = createTypes(import.meta.url, Toolbar);
diff --git a/docs/pages/x/api/chat/chat-box.js b/docs/pages/x/api/chat/chat-box.js
index 3d46dac5f4f00..f52f97768b557 100644
--- a/docs/pages/x/api/chat/chat-box.js
+++ b/docs/pages/x/api/chat/chat-box.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-box.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatBox } from './types.chat-box';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'currentUser', 'density', 'features', 'initialActiveConversationId', 'initialComposerValue', 'initialConversations', 'initialMessages', 'members', 'slotProps', 'slots', 'storeClass', 'streamFlushInterval', 'suggestions', 'suggestionsAutoSubmit', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-box',
-    false,
-    /\.\/chat-box.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatBox" allowedProps={allowedProps}>
+      <TypesChatBox />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-code-block.js b/docs/pages/x/api/chat/chat-code-block.js
index 0644805bcded5..a0b4db17e82da 100644
--- a/docs/pages/x/api/chat/chat-code-block.js
+++ b/docs/pages/x/api/chat/chat-code-block.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-code-block.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatCodeBlock } from './types.chat-code-block';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['children', 'highlighter', 'language'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-code-block',
-    false,
-    /\.\/chat-code-block.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatCodeBlock" allowedProps={allowedProps}>
+      <TypesChatCodeBlock />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-attach-button.js b/docs/pages/x/api/chat/chat-composer-attach-button.js
index d33e020358f39..0ec557da0d1f8 100644
--- a/docs/pages/x/api/chat/chat-composer-attach-button.js
+++ b/docs/pages/x/api/chat/chat-composer-attach-button.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-attach-button.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerAttachButton } from './types.chat-composer-attach-button';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-attach-button',
-    false,
-    /\.\/chat-composer-attach-button.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerAttachButton" allowedProps={allowedProps}>
+      <TypesChatComposerAttachButton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-attachment-list.js b/docs/pages/x/api/chat/chat-composer-attachment-list.js
index abf08de5fda07..19f83010ede1d 100644
--- a/docs/pages/x/api/chat/chat-composer-attachment-list.js
+++ b/docs/pages/x/api/chat/chat-composer-attachment-list.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-attachment-list.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerAttachmentList } from './types.chat-composer-attachment-list';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-attachment-list',
-    false,
-    /\.\/chat-composer-attachment-list.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerAttachmentList" allowedProps={allowedProps}>
+      <TypesChatComposerAttachmentList />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-helper-text.js b/docs/pages/x/api/chat/chat-composer-helper-text.js
index 49ed57b7c13d6..8076216b408c0 100644
--- a/docs/pages/x/api/chat/chat-composer-helper-text.js
+++ b/docs/pages/x/api/chat/chat-composer-helper-text.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-helper-text.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerHelperText } from './types.chat-composer-helper-text';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-helper-text',
-    false,
-    /\.\/chat-composer-helper-text.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerHelperText" allowedProps={allowedProps}>
+      <TypesChatComposerHelperText />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-label.js b/docs/pages/x/api/chat/chat-composer-label.js
index 84acfd9d2d9ab..bdf8927155ce7 100644
--- a/docs/pages/x/api/chat/chat-composer-label.js
+++ b/docs/pages/x/api/chat/chat-composer-label.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerLabel } from './types.chat-composer-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['children', 'htmlFor'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-label',
-    false,
-    /\.\/chat-composer-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerLabel" allowedProps={allowedProps}>
+      <TypesChatComposerLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-send-button.js b/docs/pages/x/api/chat/chat-composer-send-button.js
index 987fd52638d4a..0cd884d3ab750 100644
--- a/docs/pages/x/api/chat/chat-composer-send-button.js
+++ b/docs/pages/x/api/chat/chat-composer-send-button.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-send-button.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerSendButton } from './types.chat-composer-send-button';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-send-button',
-    false,
-    /\.\/chat-composer-send-button.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerSendButton" allowedProps={allowedProps}>
+      <TypesChatComposerSendButton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-text-area.js b/docs/pages/x/api/chat/chat-composer-text-area.js
index 7c55a681d4bae..025adc5f8cf34 100644
--- a/docs/pages/x/api/chat/chat-composer-text-area.js
+++ b/docs/pages/x/api/chat/chat-composer-text-area.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-text-area.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerTextArea } from './types.chat-composer-text-area';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['maxRows'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-text-area',
-    false,
-    /\.\/chat-composer-text-area.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerTextArea" allowedProps={allowedProps}>
+      <TypesChatComposerTextArea />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-composer-toolbar.js b/docs/pages/x/api/chat/chat-composer-toolbar.js
index 963453c41dc3b..d0dc6edb0dba8 100644
--- a/docs/pages/x/api/chat/chat-composer-toolbar.js
+++ b/docs/pages/x/api/chat/chat-composer-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-composer-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatComposerToolbar } from './types.chat-composer-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-composer-toolbar',
-    false,
-    /\.\/chat-composer-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatComposerToolbar" allowedProps={allowedProps}>
+      <TypesChatComposerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-confirmation.js b/docs/pages/x/api/chat/chat-confirmation.js
index e52295ce9aa24..14cce507c3a8f 100644
--- a/docs/pages/x/api/chat/chat-confirmation.js
+++ b/docs/pages/x/api/chat/chat-confirmation.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-confirmation.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConfirmation } from './types.chat-confirmation';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['cancelLabel', 'confirmLabel', 'message', 'onCancel', 'onConfirm'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-confirmation',
-    false,
-    /\.\/chat-confirmation.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConfirmation" allowedProps={allowedProps}>
+      <TypesChatConfirmation />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation-header-actions.js b/docs/pages/x/api/chat/chat-conversation-header-actions.js
index 3b1e740de4cbd..e28e9ffbcf06f 100644
--- a/docs/pages/x/api/chat/chat-conversation-header-actions.js
+++ b/docs/pages/x/api/chat/chat-conversation-header-actions.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation-header-actions.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversationHeaderActions } from './types.chat-conversation-header-actions';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation-header-actions',
-    false,
-    /\.\/chat-conversation-header-actions.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversationHeaderActions" allowedProps={allowedProps}>
+      <TypesChatConversationHeaderActions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation-header-info.js b/docs/pages/x/api/chat/chat-conversation-header-info.js
index 83d9151d5ddda..47ca734864c66 100644
--- a/docs/pages/x/api/chat/chat-conversation-header-info.js
+++ b/docs/pages/x/api/chat/chat-conversation-header-info.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation-header-info.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversationHeaderInfo } from './types.chat-conversation-header-info';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation-header-info',
-    false,
-    /\.\/chat-conversation-header-info.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversationHeaderInfo" allowedProps={allowedProps}>
+      <TypesChatConversationHeaderInfo />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation-header.js b/docs/pages/x/api/chat/chat-conversation-header.js
index a8cfa1a507899..16f5ec68abcc7 100644
--- a/docs/pages/x/api/chat/chat-conversation-header.js
+++ b/docs/pages/x/api/chat/chat-conversation-header.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation-header.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversationHeader } from './types.chat-conversation-header';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation-header',
-    false,
-    /\.\/chat-conversation-header.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversationHeader" allowedProps={allowedProps}>
+      <TypesChatConversationHeader />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation-list.js b/docs/pages/x/api/chat/chat-conversation-list.js
index cfaedfb0c3980..ab5c57000c133 100644
--- a/docs/pages/x/api/chat/chat-conversation-list.js
+++ b/docs/pages/x/api/chat/chat-conversation-list.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation-list.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversationList } from './types.chat-conversation-list';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation-list',
-    false,
-    /\.\/chat-conversation-list.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversationList" allowedProps={allowedProps}>
+      <TypesChatConversationList />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation-subtitle.js b/docs/pages/x/api/chat/chat-conversation-subtitle.js
index 403a1905786f2..734bdfb573eac 100644
--- a/docs/pages/x/api/chat/chat-conversation-subtitle.js
+++ b/docs/pages/x/api/chat/chat-conversation-subtitle.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation-subtitle.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversationSubtitle } from './types.chat-conversation-subtitle';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation-subtitle',
-    false,
-    /\.\/chat-conversation-subtitle.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversationSubtitle" allowedProps={allowedProps}>
+      <TypesChatConversationSubtitle />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation-title.js b/docs/pages/x/api/chat/chat-conversation-title.js
index cf094cf43571c..0fe11d9e20e06 100644
--- a/docs/pages/x/api/chat/chat-conversation-title.js
+++ b/docs/pages/x/api/chat/chat-conversation-title.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation-title.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversationTitle } from './types.chat-conversation-title';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation-title',
-    false,
-    /\.\/chat-conversation-title.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversationTitle" allowedProps={allowedProps}>
+      <TypesChatConversationTitle />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-conversation.js b/docs/pages/x/api/chat/chat-conversation.js
index d48a6a3c2d8c5..25eb37e1a1634 100644
--- a/docs/pages/x/api/chat/chat-conversation.js
+++ b/docs/pages/x/api/chat/chat-conversation.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-conversation.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatConversation } from './types.chat-conversation';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-conversation',
-    false,
-    /\.\/chat-conversation.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatConversation" allowedProps={allowedProps}>
+      <TypesChatConversation />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-date-divider.js b/docs/pages/x/api/chat/chat-date-divider.js
index 697e3570e4dc3..28b0665174ef3 100644
--- a/docs/pages/x/api/chat/chat-date-divider.js
+++ b/docs/pages/x/api/chat/chat-date-divider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-date-divider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatDateDivider } from './types.chat-date-divider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-date-divider',
-    false,
-    /\.\/chat-date-divider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatDateDivider" allowedProps={allowedProps}>
+      <TypesChatDateDivider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-layout.js b/docs/pages/x/api/chat/chat-layout.js
index 0ad07378240d7..eaa6e4ecb31e0 100644
--- a/docs/pages/x/api/chat/chat-layout.js
+++ b/docs/pages/x/api/chat/chat-layout.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-layout.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatLayout } from './types.chat-layout';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-layout',
-    false,
-    /\.\/chat-layout.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatLayout" allowedProps={allowedProps}>
+      <TypesChatLayout />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-actions.js b/docs/pages/x/api/chat/chat-message-actions.js
index 8d2c4655a64fd..1b2b690123cbb 100644
--- a/docs/pages/x/api/chat/chat-message-actions.js
+++ b/docs/pages/x/api/chat/chat-message-actions.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-actions.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageActions } from './types.chat-message-actions';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-actions',
-    false,
-    /\.\/chat-message-actions.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageActions" allowedProps={allowedProps}>
+      <TypesChatMessageActions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-author-label.js b/docs/pages/x/api/chat/chat-message-author-label.js
index e5eea69525aa8..8d02d75c79b0f 100644
--- a/docs/pages/x/api/chat/chat-message-author-label.js
+++ b/docs/pages/x/api/chat/chat-message-author-label.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-author-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageAuthorLabel } from './types.chat-message-author-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-author-label',
-    false,
-    /\.\/chat-message-author-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageAuthorLabel" allowedProps={allowedProps}>
+      <TypesChatMessageAuthorLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-avatar.js b/docs/pages/x/api/chat/chat-message-avatar.js
index 3b3c4434c9118..532f149ec18b7 100644
--- a/docs/pages/x/api/chat/chat-message-avatar.js
+++ b/docs/pages/x/api/chat/chat-message-avatar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-avatar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageAvatar } from './types.chat-message-avatar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-avatar',
-    false,
-    /\.\/chat-message-avatar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageAvatar" allowedProps={allowedProps}>
+      <TypesChatMessageAvatar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-content.js b/docs/pages/x/api/chat/chat-message-content.js
index 8a67fd98fe649..05c2f178050ba 100644
--- a/docs/pages/x/api/chat/chat-message-content.js
+++ b/docs/pages/x/api/chat/chat-message-content.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-content.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageContent } from './types.chat-message-content';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['afterContent', 'partProps'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-content',
-    false,
-    /\.\/chat-message-content.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageContent" allowedProps={allowedProps}>
+      <TypesChatMessageContent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-group.js b/docs/pages/x/api/chat/chat-message-group.js
index cf27d66635f64..28881f17d429a 100644
--- a/docs/pages/x/api/chat/chat-message-group.js
+++ b/docs/pages/x/api/chat/chat-message-group.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-group.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageGroup } from './types.chat-message-group';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['groupKey'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-group',
-    false,
-    /\.\/chat-message-group.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageGroup" allowedProps={allowedProps}>
+      <TypesChatMessageGroup />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-inline-meta.js b/docs/pages/x/api/chat/chat-message-inline-meta.js
index d03f38357e033..b6a8eb583fba6 100644
--- a/docs/pages/x/api/chat/chat-message-inline-meta.js
+++ b/docs/pages/x/api/chat/chat-message-inline-meta.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-inline-meta.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageInlineMeta } from './types.chat-message-inline-meta';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-inline-meta',
-    false,
-    /\.\/chat-message-inline-meta.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageInlineMeta" allowedProps={allowedProps}>
+      <TypesChatMessageInlineMeta />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-list.js b/docs/pages/x/api/chat/chat-message-list.js
index eb1b9979fcdae..d0c01ed580d13 100644
--- a/docs/pages/x/api/chat/chat-message-list.js
+++ b/docs/pages/x/api/chat/chat-message-list.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-list.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageList } from './types.chat-message-list';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoScroll'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-list',
-    false,
-    /\.\/chat-message-list.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageList" allowedProps={allowedProps}>
+      <TypesChatMessageList />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-meta.js b/docs/pages/x/api/chat/chat-message-meta.js
index 43e4ca739f5e4..b36e87f530130 100644
--- a/docs/pages/x/api/chat/chat-message-meta.js
+++ b/docs/pages/x/api/chat/chat-message-meta.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-meta.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageMeta } from './types.chat-message-meta';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-meta',
-    false,
-    /\.\/chat-message-meta.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageMeta" allowedProps={allowedProps}>
+      <TypesChatMessageMeta />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-skeleton.js b/docs/pages/x/api/chat/chat-message-skeleton.js
index 731f480d2a5ba..51da667048ceb 100644
--- a/docs/pages/x/api/chat/chat-message-skeleton.js
+++ b/docs/pages/x/api/chat/chat-message-skeleton.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-skeleton.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageSkeleton } from './types.chat-message-skeleton';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['lines'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-skeleton',
-    false,
-    /\.\/chat-message-skeleton.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageSkeleton" allowedProps={allowedProps}>
+      <TypesChatMessageSkeleton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-source.js b/docs/pages/x/api/chat/chat-message-source.js
index 9984e5a7022ec..ead46f224053a 100644
--- a/docs/pages/x/api/chat/chat-message-source.js
+++ b/docs/pages/x/api/chat/chat-message-source.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-source.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageSource } from './types.chat-message-source';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['href', 'index', 'title'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-source',
-    false,
-    /\.\/chat-message-source.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageSource" allowedProps={allowedProps}>
+      <TypesChatMessageSource />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-message-sources.js b/docs/pages/x/api/chat/chat-message-sources.js
index b1031d8390279..f4e028445d58e 100644
--- a/docs/pages/x/api/chat/chat-message-sources.js
+++ b/docs/pages/x/api/chat/chat-message-sources.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-message-sources.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatMessageSources } from './types.chat-message-sources';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['label'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-message-sources',
-    false,
-    /\.\/chat-message-sources.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatMessageSources" allowedProps={allowedProps}>
+      <TypesChatMessageSources />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-provider.js b/docs/pages/x/api/chat/chat-provider.js
index efc59933f95f5..9495d6e39c27f 100644
--- a/docs/pages/x/api/chat/chat-provider.js
+++ b/docs/pages/x/api/chat/chat-provider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-provider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatProvider } from './types.chat-provider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-provider',
-    false,
-    /\.\/chat-provider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatProvider" allowedProps={allowedProps}>
+      <TypesChatProvider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-root.js b/docs/pages/x/api/chat/chat-root.js
index 3b5befcf21eb9..5a560a40c2f95 100644
--- a/docs/pages/x/api/chat/chat-root.js
+++ b/docs/pages/x/api/chat/chat-root.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-root.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatRoot } from './types.chat-root';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-root',
-    false,
-    /\.\/chat-root.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatRoot" allowedProps={allowedProps}>
+      <TypesChatRoot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-scroll-to-bottom-affordance.js b/docs/pages/x/api/chat/chat-scroll-to-bottom-affordance.js
index 488edbd1d5407..76236efb21f0d 100644
--- a/docs/pages/x/api/chat/chat-scroll-to-bottom-affordance.js
+++ b/docs/pages/x/api/chat/chat-scroll-to-bottom-affordance.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-scroll-to-bottom-affordance.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatScrollToBottomAffordance } from './types.chat-scroll-to-bottom-affordance';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-scroll-to-bottom-affordance',
-    false,
-    /\.\/chat-scroll-to-bottom-affordance.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatScrollToBottomAffordance" allowedProps={allowedProps}>
+      <TypesChatScrollToBottomAffordance />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-suggestions.js b/docs/pages/x/api/chat/chat-suggestions.js
index 1cd9dce8fc31c..fc37b03da6398 100644
--- a/docs/pages/x/api/chat/chat-suggestions.js
+++ b/docs/pages/x/api/chat/chat-suggestions.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-suggestions.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatSuggestions } from './types.chat-suggestions';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoSubmit', 'suggestions'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-suggestions',
-    false,
-    /\.\/chat-suggestions.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatSuggestions" allowedProps={allowedProps}>
+      <TypesChatSuggestions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-typing-indicator.js b/docs/pages/x/api/chat/chat-typing-indicator.js
index b8d50e1e0f480..3ab327a1b18cb 100644
--- a/docs/pages/x/api/chat/chat-typing-indicator.js
+++ b/docs/pages/x/api/chat/chat-typing-indicator.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-typing-indicator.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatTypingIndicator } from './types.chat-typing-indicator';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-typing-indicator',
-    false,
-    /\.\/chat-typing-indicator.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatTypingIndicator" allowedProps={allowedProps}>
+      <TypesChatTypingIndicator />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/chat-unread-marker.js b/docs/pages/x/api/chat/chat-unread-marker.js
index e174ad8fdf59e..7176d2482d431 100644
--- a/docs/pages/x/api/chat/chat-unread-marker.js
+++ b/docs/pages/x/api/chat/chat-unread-marker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './chat-unread-marker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChatUnreadMarker } from './types.chat-unread-marker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/chat-unread-marker',
-    false,
-    /\.\/chat-unread-marker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChatUnreadMarker" allowedProps={allowedProps}>
+      <TypesChatUnreadMarker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-attach-button.js b/docs/pages/x/api/chat/composer-attach-button.js
index fcde0244365d0..de9f25463d2a6 100644
--- a/docs/pages/x/api/chat/composer-attach-button.js
+++ b/docs/pages/x/api/chat/composer-attach-button.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-attach-button.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerAttachButton } from './types.composer-attach-button';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-attach-button',
-    false,
-    /\.\/composer-attach-button.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerAttachButton" allowedProps={allowedProps}>
+      <TypesComposerAttachButton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-attachment-list.js b/docs/pages/x/api/chat/composer-attachment-list.js
index 08a3bd60b0d90..b8396605cf8d1 100644
--- a/docs/pages/x/api/chat/composer-attachment-list.js
+++ b/docs/pages/x/api/chat/composer-attachment-list.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-attachment-list.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerAttachmentList } from './types.composer-attachment-list';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-attachment-list',
-    false,
-    /\.\/composer-attachment-list.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerAttachmentList" allowedProps={allowedProps}>
+      <TypesComposerAttachmentList />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-helper-text.js b/docs/pages/x/api/chat/composer-helper-text.js
index 16b9ca1bf2a0b..572fcf9cb0e82 100644
--- a/docs/pages/x/api/chat/composer-helper-text.js
+++ b/docs/pages/x/api/chat/composer-helper-text.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-helper-text.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerHelperText } from './types.composer-helper-text';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-helper-text',
-    false,
-    /\.\/composer-helper-text.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerHelperText" allowedProps={allowedProps}>
+      <TypesComposerHelperText />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-label.js b/docs/pages/x/api/chat/composer-label.js
index 02e063a29d6cb..08a083617bc82 100644
--- a/docs/pages/x/api/chat/composer-label.js
+++ b/docs/pages/x/api/chat/composer-label.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerLabel } from './types.composer-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-label',
-    false,
-    /\.\/composer-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerLabel" allowedProps={allowedProps}>
+      <TypesComposerLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-root.js b/docs/pages/x/api/chat/composer-root.js
index d8039897404a9..aab89b65bff90 100644
--- a/docs/pages/x/api/chat/composer-root.js
+++ b/docs/pages/x/api/chat/composer-root.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-root.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerRoot } from './types.composer-root';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-root',
-    false,
-    /\.\/composer-root.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerRoot" allowedProps={allowedProps}>
+      <TypesComposerRoot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-send-button.js b/docs/pages/x/api/chat/composer-send-button.js
index dfbb37d3a2886..5b8a993ffebee 100644
--- a/docs/pages/x/api/chat/composer-send-button.js
+++ b/docs/pages/x/api/chat/composer-send-button.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-send-button.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerSendButton } from './types.composer-send-button';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-send-button',
-    false,
-    /\.\/composer-send-button.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerSendButton" allowedProps={allowedProps}>
+      <TypesComposerSendButton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-text-area.js b/docs/pages/x/api/chat/composer-text-area.js
index b95a222b3a914..6287b8edf0187 100644
--- a/docs/pages/x/api/chat/composer-text-area.js
+++ b/docs/pages/x/api/chat/composer-text-area.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-text-area.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerTextArea } from './types.composer-text-area';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-text-area',
-    false,
-    /\.\/composer-text-area.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerTextArea" allowedProps={allowedProps}>
+      <TypesComposerTextArea />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/composer-toolbar.js b/docs/pages/x/api/chat/composer-toolbar.js
index 8a93114c44a5a..ff5ea45bbbeb6 100644
--- a/docs/pages/x/api/chat/composer-toolbar.js
+++ b/docs/pages/x/api/chat/composer-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './composer-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesComposerToolbar } from './types.composer-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/composer-toolbar',
-    false,
-    /\.\/composer-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ComposerToolbar" allowedProps={allowedProps}>
+      <TypesComposerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-header-actions.js b/docs/pages/x/api/chat/conversation-header-actions.js
index 0ea9cbd3b34b3..b7ca1019c978a 100644
--- a/docs/pages/x/api/chat/conversation-header-actions.js
+++ b/docs/pages/x/api/chat/conversation-header-actions.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-header-actions.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationHeaderActions } from './types.conversation-header-actions';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-header-actions',
-    false,
-    /\.\/conversation-header-actions.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationHeaderActions" allowedProps={allowedProps}>
+      <TypesConversationHeaderActions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-header.js b/docs/pages/x/api/chat/conversation-header.js
index c78edd4ce79e6..022cf3fda448f 100644
--- a/docs/pages/x/api/chat/conversation-header.js
+++ b/docs/pages/x/api/chat/conversation-header.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-header.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationHeader } from './types.conversation-header';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-header',
-    false,
-    /\.\/conversation-header.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationHeader" allowedProps={allowedProps}>
+      <TypesConversationHeader />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-item-avatar.js b/docs/pages/x/api/chat/conversation-list-item-avatar.js
index f25835287bdfa..fdd409c0e2b2a 100644
--- a/docs/pages/x/api/chat/conversation-list-item-avatar.js
+++ b/docs/pages/x/api/chat/conversation-list-item-avatar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-item-avatar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListItemAvatar } from './types.conversation-list-item-avatar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-item-avatar',
-    false,
-    /\.\/conversation-list-item-avatar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListItemAvatar" allowedProps={allowedProps}>
+      <TypesConversationListItemAvatar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-item.js b/docs/pages/x/api/chat/conversation-list-item.js
index eaa07a9622c12..7f32444168148 100644
--- a/docs/pages/x/api/chat/conversation-list-item.js
+++ b/docs/pages/x/api/chat/conversation-list-item.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-item.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListItem } from './types.conversation-list-item';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-item',
-    false,
-    /\.\/conversation-list-item.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListItem" allowedProps={allowedProps}>
+      <TypesConversationListItem />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-preview.js b/docs/pages/x/api/chat/conversation-list-preview.js
index 729f3a7f2569b..8ee8c7a56d742 100644
--- a/docs/pages/x/api/chat/conversation-list-preview.js
+++ b/docs/pages/x/api/chat/conversation-list-preview.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-preview.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListPreview } from './types.conversation-list-preview';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-preview',
-    false,
-    /\.\/conversation-list-preview.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListPreview" allowedProps={allowedProps}>
+      <TypesConversationListPreview />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-root.js b/docs/pages/x/api/chat/conversation-list-root.js
index 93eacfa35bebd..44acc5f024dce 100644
--- a/docs/pages/x/api/chat/conversation-list-root.js
+++ b/docs/pages/x/api/chat/conversation-list-root.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-root.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListRoot } from './types.conversation-list-root';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-root',
-    false,
-    /\.\/conversation-list-root.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListRoot" allowedProps={allowedProps}>
+      <TypesConversationListRoot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-timestamp.js b/docs/pages/x/api/chat/conversation-list-timestamp.js
index aa2fbf389959c..70bcf1a00fa4f 100644
--- a/docs/pages/x/api/chat/conversation-list-timestamp.js
+++ b/docs/pages/x/api/chat/conversation-list-timestamp.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-timestamp.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListTimestamp } from './types.conversation-list-timestamp';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-timestamp',
-    false,
-    /\.\/conversation-list-timestamp.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListTimestamp" allowedProps={allowedProps}>
+      <TypesConversationListTimestamp />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-title.js b/docs/pages/x/api/chat/conversation-list-title.js
index 3d45ade591d52..4a9808f57876d 100644
--- a/docs/pages/x/api/chat/conversation-list-title.js
+++ b/docs/pages/x/api/chat/conversation-list-title.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-title.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListTitle } from './types.conversation-list-title';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-title',
-    false,
-    /\.\/conversation-list-title.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListTitle" allowedProps={allowedProps}>
+      <TypesConversationListTitle />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-list-unread-badge.js b/docs/pages/x/api/chat/conversation-list-unread-badge.js
index 3379146bcb27e..9caf43a647bd3 100644
--- a/docs/pages/x/api/chat/conversation-list-unread-badge.js
+++ b/docs/pages/x/api/chat/conversation-list-unread-badge.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-list-unread-badge.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationListUnreadBadge } from './types.conversation-list-unread-badge';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-list-unread-badge',
-    false,
-    /\.\/conversation-list-unread-badge.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationListUnreadBadge" allowedProps={allowedProps}>
+      <TypesConversationListUnreadBadge />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-root.js b/docs/pages/x/api/chat/conversation-root.js
index 212b83c61f04b..4f402bf2c2f73 100644
--- a/docs/pages/x/api/chat/conversation-root.js
+++ b/docs/pages/x/api/chat/conversation-root.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-root.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationRoot } from './types.conversation-root';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-root',
-    false,
-    /\.\/conversation-root.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationRoot" allowedProps={allowedProps}>
+      <TypesConversationRoot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-subtitle.js b/docs/pages/x/api/chat/conversation-subtitle.js
index 1ea67243de90d..a17661f0a5d25 100644
--- a/docs/pages/x/api/chat/conversation-subtitle.js
+++ b/docs/pages/x/api/chat/conversation-subtitle.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-subtitle.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationSubtitle } from './types.conversation-subtitle';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-subtitle',
-    false,
-    /\.\/conversation-subtitle.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationSubtitle" allowedProps={allowedProps}>
+      <TypesConversationSubtitle />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/conversation-title.js b/docs/pages/x/api/chat/conversation-title.js
index 8c837711e78d0..f6d1266a54960 100644
--- a/docs/pages/x/api/chat/conversation-title.js
+++ b/docs/pages/x/api/chat/conversation-title.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './conversation-title.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesConversationTitle } from './types.conversation-title';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/conversation-title',
-    false,
-    /\.\/conversation-title.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ConversationTitle" allowedProps={allowedProps}>
+      <TypesConversationTitle />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-actions.js b/docs/pages/x/api/chat/message-actions.js
index 38b7e1b5cbb94..5c7e94b60a69d 100644
--- a/docs/pages/x/api/chat/message-actions.js
+++ b/docs/pages/x/api/chat/message-actions.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-actions.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageActions } from './types.message-actions';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-actions',
-    false,
-    /\.\/message-actions.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageActions" allowedProps={allowedProps}>
+      <TypesMessageActions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-author-label.js b/docs/pages/x/api/chat/message-author-label.js
index 6a5f5479a864d..6c0a7099195f8 100644
--- a/docs/pages/x/api/chat/message-author-label.js
+++ b/docs/pages/x/api/chat/message-author-label.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-author-label.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageAuthorLabel } from './types.message-author-label';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-author-label',
-    false,
-    /\.\/message-author-label.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageAuthorLabel" allowedProps={allowedProps}>
+      <TypesMessageAuthorLabel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-avatar.js b/docs/pages/x/api/chat/message-avatar.js
index ad381e32fd5b7..a840791520b35 100644
--- a/docs/pages/x/api/chat/message-avatar.js
+++ b/docs/pages/x/api/chat/message-avatar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-avatar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageAvatar } from './types.message-avatar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-avatar',
-    false,
-    /\.\/message-avatar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageAvatar" allowedProps={allowedProps}>
+      <TypesMessageAvatar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-content.js b/docs/pages/x/api/chat/message-content.js
index 7f7333d9aefd0..97a41768c30f8 100644
--- a/docs/pages/x/api/chat/message-content.js
+++ b/docs/pages/x/api/chat/message-content.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-content.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageContent } from './types.message-content';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-content',
-    false,
-    /\.\/message-content.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageContent" allowedProps={allowedProps}>
+      <TypesMessageContent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-group.js b/docs/pages/x/api/chat/message-group.js
index 7e11893ecfc7e..abf8a026b0149 100644
--- a/docs/pages/x/api/chat/message-group.js
+++ b/docs/pages/x/api/chat/message-group.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-group.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageGroup } from './types.message-group';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-group',
-    false,
-    /\.\/message-group.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageGroup" allowedProps={allowedProps}>
+      <TypesMessageGroup />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-list-date-divider.js b/docs/pages/x/api/chat/message-list-date-divider.js
index 76c1756eb150c..d4c3d468f259a 100644
--- a/docs/pages/x/api/chat/message-list-date-divider.js
+++ b/docs/pages/x/api/chat/message-list-date-divider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-list-date-divider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageListDateDivider } from './types.message-list-date-divider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-list-date-divider',
-    false,
-    /\.\/message-list-date-divider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageListDateDivider" allowedProps={allowedProps}>
+      <TypesMessageListDateDivider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-list-root.js b/docs/pages/x/api/chat/message-list-root.js
index 5624495c9113d..8d403f3806491 100644
--- a/docs/pages/x/api/chat/message-list-root.js
+++ b/docs/pages/x/api/chat/message-list-root.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-list-root.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageListRoot } from './types.message-list-root';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-list-root',
-    false,
-    /\.\/message-list-root.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageListRoot" allowedProps={allowedProps}>
+      <TypesMessageListRoot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-meta.js b/docs/pages/x/api/chat/message-meta.js
index 3dc19cab22751..6241295ad6448 100644
--- a/docs/pages/x/api/chat/message-meta.js
+++ b/docs/pages/x/api/chat/message-meta.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-meta.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageMeta } from './types.message-meta';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-meta',
-    false,
-    /\.\/message-meta.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageMeta" allowedProps={allowedProps}>
+      <TypesMessageMeta />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/message-root.js b/docs/pages/x/api/chat/message-root.js
index f197dec72a116..3fe7a46a2a086 100644
--- a/docs/pages/x/api/chat/message-root.js
+++ b/docs/pages/x/api/chat/message-root.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './message-root.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMessageRoot } from './types.message-root';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/message-root',
-    false,
-    /\.\/message-root.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MessageRoot" allowedProps={allowedProps}>
+      <TypesMessageRoot />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/scroll-to-bottom-affordance.js b/docs/pages/x/api/chat/scroll-to-bottom-affordance.js
index 99e390db34870..986d53d311937 100644
--- a/docs/pages/x/api/chat/scroll-to-bottom-affordance.js
+++ b/docs/pages/x/api/chat/scroll-to-bottom-affordance.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './scroll-to-bottom-affordance.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesScrollToBottomAffordance } from './types.scroll-to-bottom-affordance';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/scroll-to-bottom-affordance',
-    false,
-    /\.\/scroll-to-bottom-affordance.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ScrollToBottomAffordance" allowedProps={allowedProps}>
+      <TypesScrollToBottomAffordance />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/types.chat-box.md b/docs/pages/x/api/chat/types.chat-box.md
new file mode 100644
index 0000000000000..f2980aab20fba
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-box.md
@@ -0,0 +1,395 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-box.md'
+
+## API Reference
+
+### ChatBox
+
+**ChatBox Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default      | Description                                                                                                                                                                                                                       |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -            | -                                                                                                                                                                                                                                 |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -            | -                                                                                                                                                                                                                                 |
+| classes                     | `Partial<ChatBoxClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -            | Override or extend the styles applied to the component.                                                                                                                                                                           |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -            | -                                                                                                                                                                                                                                 |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -            | -                                                                                                                                                                                                                                 |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -            | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                  |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `'standard'` | The vertical spacing density of chat messages. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                              |
+| features                    | `ChatBoxFeatures`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -            | Feature flags to enable or disable built-in ChatBox behaviours.                                                                                                                                                                   |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -            | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                   |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -            | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                  |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -            | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                   |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -            | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                             |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -            | -                                                                                                                                                                                                                                 |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -            | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                        |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -            | -                                                                                                                                                                                                                                 |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -            | -                                                                                                                                                                                                                                 |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -            | -                                                                                                                                                                                                                                 |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -            | -                                                                                                                                                                                                                                 |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -            | -                                                                                                                                                                                                                                 |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -            | -                                                                                                                                                                                                                                 |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -            | -                                                                                                                                                                                                                                 |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -            | -                                                                                                                                                                                                                                 |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -            | -                                                                                                                                                                                                                                 |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -            | -                                                                                                                                                                                                                                 |
+| slotProps                   | `ChatBoxSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                | -            | The extra props for the slot components.                                                                                                                                                                                          |
+| slots                       | `Partial<ChatBoxSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                           | -            | The components used for each slot inside the ChatBox.                                                                                                                                                                             |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore`  | The store class to use for this provider.                                                                                                                                                                                         |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`         | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                             |
+| suggestions                 | `(string \| ChatSuggestion)[]`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -            | Prompt suggestions displayed in the empty state.&#xA;Clicking a suggestion pre-fills the composer.                                                                                                                                |
+| suggestionsAutoSubmit       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `false`      | Whether clicking a suggestion automatically submits the message.                                                                                                                                                                  |
+| sx                          | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -            | -                                                                                                                                                                                                                                 |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `'default'`  | The visual layout variant of the chat. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -            | -                                                                                                                                                                                                                                 |
+| className                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -            | -                                                                                                                                                                                                                                 |
+
+### getChatBoxUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatBoxUtilityClasses
+
+**useChatBoxUtilityClasses Parameters:**
+
+| Parameter | Type                      | Default | Description |
+| :-------- | :------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatBoxClasses>` | -       | -           |
+
+**useChatBoxUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatBoxClasses;
+```
+
+## Additional Types
+
+### chatBoxClasses
+
+```typescript
+type chatBoxClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the layout element. */
+  layout: string;
+  /** Styles applied to the conversations pane element. */
+  conversationsPane: string;
+  /** Styles applied to the thread pane element. */
+  threadPane: string;
+};
+```
+
+### ChatBoxClasses
+
+```typescript
+type ChatBoxClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the layout element. */
+  layout: string;
+  /** Styles applied to the conversations pane element. */
+  conversationsPane: string;
+  /** Styles applied to the thread pane element. */
+  threadPane: string;
+};
+```
+
+### ChatBoxClassKey
+
+```typescript
+type ChatBoxClassKey = 'root' | 'layout' | 'conversationsPane' | 'threadPane';
+```
+
+### ChatBoxProps
+
+```typescript
+type ChatBoxProps<Cursor = string> = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<ChatBoxClasses>;
+  /**
+   * The visual layout variant of the chat.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   * @default 'standard'
+   */
+  density?: ChatDensity;
+  /** The components used for each slot inside the ChatBox. */
+  slots?: Partial<ChatBoxSlots>;
+  /** The extra props for the slot components. */
+  slotProps?: ChatBoxSlotProps;
+  /** Feature flags to enable or disable built-in ChatBox behaviours. */
+  features?: ChatBoxFeatures;
+  /**
+   * Prompt suggestions displayed in the empty state.
+   * Clicking a suggestion pre-fills the composer.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether clicking a suggestion automatically submits the message.
+   * @default false
+   */
+  suggestionsAutoSubmit?: boolean;
+  children?: React.ReactNode;
+  onError?: (error: ChatError) => void;
+  localeText?: Partial<ChatLocaleText>;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatBoxSlotProps
+
+```typescript
+type ChatBoxSlotProps = {
+  root?: SlotComponentProps<'div', { sx?: SxProps<Theme> }, {}>;
+  layout?: SlotComponentProps<'div', { sx?: SxProps<Theme> }, {}>;
+  conversationsPane?: SlotComponentProps<'div', { sx?: SxProps<Theme> }, {}>;
+  threadPane?: SlotComponentProps<'div', { sx?: SxProps<Theme> }, {}>;
+  conversationList?: Partial<ChatConversationListProps>;
+  conversationHeader?: Partial<ChatConversationHeaderProps>;
+  conversationTitle?: Partial<ChatConversationTitleProps>;
+  conversationSubtitle?: Partial<ChatConversationSubtitleProps>;
+  conversationHeaderInfo?: Partial<ChatConversationHeaderInfoProps>;
+  conversationHeaderActions?: Partial<ChatConversationHeaderActionsProps>;
+  messageList?: Partial<ChatMessageListProps>;
+  messageRoot?: Partial<ChatMessageProps>;
+  messageAvatar?: Partial<ChatMessageAvatarProps>;
+  messageContent?: Partial<ChatMessageContentProps>;
+  messageMeta?: Partial<ChatMessageMetaProps>;
+  messageActions?: Partial<ChatMessageActionsProps>;
+  messageGroup?: Partial<ChatMessageGroupProps>;
+  dateDivider?: Partial<ChatDateDividerProps>;
+  composerRoot?: Partial<ChatComposerProps>;
+  composerInput?: Partial<ChatComposerTextAreaProps>;
+  composerSendButton?: Partial<ChatComposerSendButtonProps>;
+  composerAttachButton?: Partial<ChatComposerAttachButtonProps>;
+  composerAttachmentList?: Partial<ChatComposerAttachmentListProps>;
+  composerToolbar?: Partial<ChatComposerToolbarProps>;
+  composerHelperText?: Partial<ChatComposerHelperTextProps>;
+  typingIndicator?: Partial<ChatTypingIndicatorProps>;
+  unreadMarker?: Partial<ChatUnreadMarkerProps>;
+  scrollToBottom?: Partial<ChatScrollToBottomAffordanceProps>;
+  suggestions?: Partial<ChatSuggestionsProps>;
+};
+```
+
+### ChatBoxSlots
+
+```typescript
+type ChatBoxSlots = {
+  /** The outermost container element. Defaults to `div`. */
+  root: React.ElementType;
+  /** The layout element that arranges conversations + thread panes. Defaults to `div`. */
+  layout: React.ElementType;
+  /** The conversations pane container. Defaults to `div`. */
+  conversationsPane: React.ElementType;
+  /** The thread pane container. Defaults to `div`. */
+  threadPane: React.ElementType;
+  /** Override the conversation list component. */
+  conversationList: React.ElementType;
+  /** Override the conversation header component. */
+  conversationHeader: React.ElementType;
+  /** Override the conversation title component. */
+  conversationTitle: React.ElementType;
+  /** Override the conversation subtitle component. */
+  conversationSubtitle: React.ElementType;
+  /** Override the conversation header info wrapper (title + subtitle column). */
+  conversationHeaderInfo: React.ElementType;
+  /** Override the conversation header actions component. */
+  conversationHeaderActions: React.ElementType;
+  /** Override the message list component. */
+  messageList: React.ElementType;
+  /** Override the message root component for each message. */
+  messageRoot: React.ElementType;
+  /** Override the message avatar component. */
+  messageAvatar: React.ElementType;
+  /** Override the message content (bubble) component. */
+  messageContent: React.ElementType;
+  /** Override the message meta component. */
+  messageMeta: React.ElementType;
+  /** Override the message actions component. */
+  messageActions: React.ElementType;
+  /** Override the message group component. */
+  messageGroup: React.ElementType;
+  /** Override the date divider component. */
+  dateDivider: React.ElementType;
+  /** Override the composer (input) root component. */
+  composerRoot: React.ElementType;
+  /** Override the composer textarea component. */
+  composerInput: React.ElementType;
+  /** Override the composer send button. */
+  composerSendButton: React.ElementType;
+  /** Override the composer attach button. */
+  composerAttachButton: React.ElementType;
+  /** Override the composer attachment list. */
+  composerAttachmentList: React.ElementType;
+  /** Override the composer toolbar. */
+  composerToolbar: React.ElementType;
+  /** Override the composer helper text component. */
+  composerHelperText: React.ElementType;
+  /** Override the typing indicator component. */
+  typingIndicator: React.ElementType;
+  /** Override the unread marker component. */
+  unreadMarker: React.ElementType;
+  /** Override the scroll-to-bottom affordance component. */
+  scrollToBottom: React.ElementType;
+  /** Override the prompt suggestions container component. */
+  suggestions: React.ElementType;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### ChatDensity
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatOnToolCall
+
+```typescript
+type ChatOnToolCall = (payload: {
+  toolCall: {
+    toolCallId: string;
+    toolName: string;
+    state:
+      | 'input-streaming'
+      | 'input-available'
+      | 'approval-requested'
+      | 'approval-responded'
+      | 'output-available'
+      | 'output-error'
+      | 'output-denied';
+    input?: unknown;
+    output?: unknown;
+    errorText?: string | undefined;
+    approval?: { approved: boolean; reason?: string | undefined } | undefined;
+    providerExecuted?: boolean | undefined;
+    title?: string | undefined;
+    callProviderMetadata?: Record | undefined;
+    preliminary?: boolean | undefined;
+  };
+}) => void | Promise;
+```
+
+### ChatOnFinish
+
+```typescript
+type ChatOnFinish = (payload: {
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string | undefined;
+}) => void | Promise;
+```
+
+### ChatOnData
+
+```typescript
+type ChatOnData = (part: {
+  type: any;
+  id?: string | undefined;
+  data: unknown;
+  transient?: boolean | undefined;
+}) => void | Promise;
+```
diff --git a/docs/pages/x/api/chat/types.chat-box.ts b/docs/pages/x/api/chat/types.chat-box.ts
new file mode 100644
index 0000000000000..9849e75e94c17
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-box.ts
@@ -0,0 +1,4 @@
+import { ChatBox } from '@mui/x-chat/ChatBox';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatBox = createTypes(import.meta.url, ChatBox);
diff --git a/docs/pages/x/api/chat/types.chat-code-block.md b/docs/pages/x/api/chat/types.chat-code-block.md
new file mode 100644
index 0000000000000..1a3e67f5e3c1a
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-code-block.md
@@ -0,0 +1,96 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-code-block.md'
+
+## API Reference
+
+### ChatCodeBlock
+
+**ChatCodeBlock Props:**
+
+| Prop        | Type                                                    | Default | Description                                                                                                                                                          |
+| :---------- | :------------------------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatCodeBlockClasses>`                         | -       | -                                                                                                                                                                    |
+| highlighter | `((code: string, language: string) => React.ReactNode)` | -       | Optional syntax highlighter. Receives the code string and a language identifier,&#xA;and should return highlighted React nodes. When omitted, raw code is displayed. |
+| language    | `string`                                                | -       | Language identifier shown in the header (e.g. "typescript", "python").                                                                                               |
+| children\*  | `string`                                                | -       | The code string to display.                                                                                                                                          |
+| className   | `string`                                                | -       | -                                                                                                                                                                    |
+
+### getChatCodeBlockUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### chatCodeBlockClasses
+
+```typescript
+type chatCodeBlockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the header element. */
+  header: string;
+  /** Styles applied to the language label element. */
+  languageLabel: string;
+  /** Styles applied to the copy button element. */
+  copyButton: string;
+  /** Styles applied to the pre element. */
+  pre: string;
+  /** Styles applied to the code element. */
+  code: string;
+};
+```
+
+### ChatCodeBlockClasses
+
+```typescript
+type ChatCodeBlockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the header element. */
+  header: string;
+  /** Styles applied to the language label element. */
+  languageLabel: string;
+  /** Styles applied to the copy button element. */
+  copyButton: string;
+  /** Styles applied to the pre element. */
+  pre: string;
+  /** Styles applied to the code element. */
+  code: string;
+};
+```
+
+### ChatCodeBlockClassKey
+
+```typescript
+type ChatCodeBlockClassKey = 'root' | 'header' | 'languageLabel' | 'copyButton' | 'pre' | 'code';
+```
+
+### ChatCodeBlockProps
+
+```typescript
+type ChatCodeBlockProps = {
+  /** The code string to display. */
+  children: string;
+  /** Language identifier shown in the header (e.g. "typescript", "python"). */
+  language?: string;
+  /**
+   * Optional syntax highlighter. Receives the code string and a language identifier,
+   * and should return highlighted React nodes. When omitted, raw code is displayed.
+   * @returns The highlighted React nodes.
+   */
+  highlighter?: (code: string, language: string) => React.ReactNode;
+  className?: string;
+  classes?: Partial<ChatCodeBlockClasses>;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-code-block.ts b/docs/pages/x/api/chat/types.chat-code-block.ts
new file mode 100644
index 0000000000000..abb70f77ed5de
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-code-block.ts
@@ -0,0 +1,4 @@
+import { ChatCodeBlock } from '@mui/x-chat/ChatCodeBlock';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatCodeBlock = createTypes(import.meta.url, ChatCodeBlock);
diff --git a/docs/pages/x/api/chat/types.chat-composer-attach-button.md b/docs/pages/x/api/chat/types.chat-composer-attach-button.md
new file mode 100644
index 0000000000000..4d6dbf81edcfe
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-attach-button.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-attach-button.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-attach-button.ts b/docs/pages/x/api/chat/types.chat-composer-attach-button.ts
new file mode 100644
index 0000000000000..89af902a4d1ff
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-attach-button.ts
@@ -0,0 +1,4 @@
+import { ChatComposerAttachButton } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerAttachButton = createTypes(import.meta.url, ChatComposerAttachButton);
diff --git a/docs/pages/x/api/chat/types.chat-composer-attachment-list.md b/docs/pages/x/api/chat/types.chat-composer-attachment-list.md
new file mode 100644
index 0000000000000..018202998c4ee
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-attachment-list.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-attachment-list.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-attachment-list.ts b/docs/pages/x/api/chat/types.chat-composer-attachment-list.ts
new file mode 100644
index 0000000000000..579c5aa134ca0
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-attachment-list.ts
@@ -0,0 +1,4 @@
+import { ChatComposerAttachmentList } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerAttachmentList = createTypes(import.meta.url, ChatComposerAttachmentList);
diff --git a/docs/pages/x/api/chat/types.chat-composer-helper-text.md b/docs/pages/x/api/chat/types.chat-composer-helper-text.md
new file mode 100644
index 0000000000000..512e617a33559
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-helper-text.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-helper-text.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-helper-text.ts b/docs/pages/x/api/chat/types.chat-composer-helper-text.ts
new file mode 100644
index 0000000000000..7460c1620cd80
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-helper-text.ts
@@ -0,0 +1,4 @@
+import { ChatComposerHelperText } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerHelperText = createTypes(import.meta.url, ChatComposerHelperText);
diff --git a/docs/pages/x/api/chat/types.chat-composer-label.md b/docs/pages/x/api/chat/types.chat-composer-label.md
new file mode 100644
index 0000000000000..1f4df204d4186
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-label.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-label.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-label.ts b/docs/pages/x/api/chat/types.chat-composer-label.ts
new file mode 100644
index 0000000000000..4389ec87b9ba7
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-label.ts
@@ -0,0 +1,4 @@
+import { ChatComposerLabel } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerLabel = createTypes(import.meta.url, ChatComposerLabel);
diff --git a/docs/pages/x/api/chat/types.chat-composer-send-button.md b/docs/pages/x/api/chat/types.chat-composer-send-button.md
new file mode 100644
index 0000000000000..202f8564a2df0
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-send-button.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-send-button.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-send-button.ts b/docs/pages/x/api/chat/types.chat-composer-send-button.ts
new file mode 100644
index 0000000000000..6c474c9c8c0ee
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-send-button.ts
@@ -0,0 +1,4 @@
+import { ChatComposerSendButton } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerSendButton = createTypes(import.meta.url, ChatComposerSendButton);
diff --git a/docs/pages/x/api/chat/types.chat-composer-text-area.md b/docs/pages/x/api/chat/types.chat-composer-text-area.md
new file mode 100644
index 0000000000000..736f3926a329b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-text-area.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-text-area.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-text-area.ts b/docs/pages/x/api/chat/types.chat-composer-text-area.ts
new file mode 100644
index 0000000000000..74be49e5716fe
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-text-area.ts
@@ -0,0 +1,4 @@
+import { ChatComposerTextArea } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerTextArea = createTypes(import.meta.url, ChatComposerTextArea);
diff --git a/docs/pages/x/api/chat/types.chat-composer-toolbar.md b/docs/pages/x/api/chat/types.chat-composer-toolbar.md
new file mode 100644
index 0000000000000..583ab77ae4395
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-toolbar.md
@@ -0,0 +1,326 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-composer-toolbar.md'
+
+## API Reference
+
+### ChatComposer
+
+**ChatComposer Props:**
+
+| Prop             | Type                           | Default     | Description                                                                                                                                                                                                                                                                                      |
+| :--------------- | :----------------------------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`        | -           | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules.                                                                                                                                                                      |
+| classes          | `Partial<ChatComposerClasses>` | -           | -                                                                                                                                                                                                                                                                                                |
+| features         | `ChatComposerFeatures`         | -           | Feature flags to control composer capabilities.                                                                                                                                                                                                                                                  |
+| slotProps        | `ComposerRootSlotProps`        | -           | -                                                                                                                                                                                                                                                                                                |
+| slots            | `Partial<ComposerRootSlots>`   | -           | -                                                                                                                                                                                                                                                                                                |
+| sx               | `SxProps<Theme>`               | -           | -                                                                                                                                                                                                                                                                                                |
+| variant          | `ChatVariant`                  | `'default'` | The visual layout variant of the composer. `'default'` – Stacked layout: attachment list, textarea, then toolbar below.`'compact'` – Inline layout: start actions, textarea, end actions in a single row. When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`). |
+| disabled         | `boolean`                      | -           | -                                                                                                                                                                                                                                                                                                |
+| className        | `string`                       | -           | -                                                                                                                                                                                                                                                                                                |
+
+### ChatComposerAttachButton
+
+**ChatComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`       | -       | -           |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatComposerAttachmentList
+
+**ChatComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`         | -       | -           |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatComposerHelperText
+
+**ChatComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerSendButton
+
+**ChatComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`     | -       | -           |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatComposerTextArea
+
+**ChatComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description                                                                                                                                              |
+| :-------- | :------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatComposerClasses>`   | -       | -                                                                                                                                                        |
+| maxRows   | `number`                         | -       | Maximum number of rows the textarea can expand to before it starts scrolling.&#xA;When set, the textarea starts at 1 row and auto-grows up to `maxRows`. |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -                                                                                                                                                        |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -                                                                                                                                                        |
+| sx        | `SxProps<Theme>`                 | -       | -                                                                                                                                                        |
+| className | `string`                         | -       | -                                                                                                                                                        |
+
+### ChatComposerToolbar
+
+**ChatComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>`  | -       | -           |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                | -       | -           |
+| className | `string`                        | -       | -           |
+
+### getChatComposerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatComposerUtilityClasses
+
+**useChatComposerUtilityClasses Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatComposerClasses>` | -       | -           |
+
+**useChatComposerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatComposerClasses;
+```
+
+## Additional Types
+
+### ChatComposerAttachButtonProps
+
+```typescript
+type ChatComposerAttachButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ChatComposerAttachmentListProps
+
+```typescript
+type ChatComposerAttachmentListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### chatComposerClasses
+
+```typescript
+type chatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClasses
+
+```typescript
+type ChatComposerClasses = {
+  /** Styles applied to the input root element. */
+  root: string;
+  /** Styles applied to the root element when disabled. */
+  disabled: string;
+  /** Styles applied to the input label element. */
+  label: string;
+  /** Styles applied to the textarea element. */
+  textArea: string;
+  /** Styles applied to the send button element. */
+  sendButton: string;
+  /** Styles applied to the attach button element. */
+  attachButton: string;
+  /** Styles applied to the toolbar element. */
+  toolbar: string;
+  /** Styles applied to the attachment list element. */
+  attachmentList: string;
+  /** Styles applied to the helper text element. */
+  helperText: string;
+  /** Styles applied to the root element when variant="compact". */
+  variantCompact: string;
+};
+```
+
+### ChatComposerClassKey
+
+```typescript
+type ChatComposerClassKey =
+  | 'disabled'
+  | 'root'
+  | 'label'
+  | 'textArea'
+  | 'sendButton'
+  | 'attachButton'
+  | 'toolbar'
+  | 'attachmentList'
+  | 'helperText'
+  | 'variantCompact';
+```
+
+### ChatComposerFeatures
+
+```typescript
+type ChatComposerFeatures = {
+  /**
+   * Whether to enable attachment functionality (attach button and attachment preview list),
+   * and optionally configure attachment validation constraints.
+   *
+   * - `true` – enable with no restrictions (default).
+   * - `false` – disable attachment functionality entirely.
+   * - `{ acceptedMimeTypes, maxFileCount, maxFileSize, onAttachmentReject }` – enable
+   *   with the specified validation rules.
+   * @default true
+   */
+  attachments?: boolean | ChatAttachmentsConfig;
+};
+```
+
+### ChatComposerHelperTextProps
+
+```typescript
+type ChatComposerHelperTextProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ChatComposerProps
+
+```typescript
+type ChatComposerProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /** Feature flags to control composer capabilities. */
+  features?: ChatComposerFeatures;
+  /**
+   * The visual layout variant of the composer.
+   * - `'default'` – Stacked layout: attachment list, textarea, then toolbar below.
+   * - `'compact'` – Inline layout: start actions, textarea, end actions in a single row.
+   *
+   * When omitted, inherits from the nearest `ChatVariantProvider` (e.g. set by `ChatBox`).
+   * @default 'default'
+   */
+  variant?: ChatVariant;
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ChatComposerSendButtonProps
+
+```typescript
+type ChatComposerSendButtonProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ChatComposerTextAreaProps
+
+```typescript
+type ChatComposerTextAreaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  /**
+   * Maximum number of rows the textarea can expand to before it starts scrolling.
+   * When set, the textarea starts at 1 row and auto-grows up to `maxRows`.
+   */
+  maxRows?: number;
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ChatComposerToolbarProps
+
+```typescript
+type ChatComposerToolbarProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatComposerClasses>;
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+## External Types
+
+### ChatVariant
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-composer-toolbar.ts b/docs/pages/x/api/chat/types.chat-composer-toolbar.ts
new file mode 100644
index 0000000000000..a162d1aea3ae4
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-composer-toolbar.ts
@@ -0,0 +1,4 @@
+import { ChatComposerToolbar } from '@mui/x-chat/ChatComposer';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatComposerToolbar = createTypes(import.meta.url, ChatComposerToolbar);
diff --git a/docs/pages/x/api/chat/types.chat-confirmation.md b/docs/pages/x/api/chat/types.chat-confirmation.md
new file mode 100644
index 0000000000000..d0b85be5efca4
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-confirmation.md
@@ -0,0 +1,110 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-confirmation.md'
+
+## API Reference
+
+### ChatConfirmation
+
+**ChatConfirmation Props:**
+
+| Prop         | Type                                         | Default     | Description                                           |
+| :----------- | :------------------------------------------- | :---------- | :---------------------------------------------------- |
+| cancelLabel  | `string`                                     | `'Cancel'`  | Label for the cancel button.                          |
+| classes      | `Partial<ChatConfirmationClasses>`           | -           | -                                                     |
+| confirmLabel | `string`                                     | `'Confirm'` | Label for the confirm button.                         |
+| message\*    | `string`                                     | -           | The question or warning message to display. Required. |
+| onCancel     | `React.MouseEventHandler<HTMLButtonElement>` | -           | Called when the user clicks the cancel button.        |
+| onConfirm    | `React.MouseEventHandler<HTMLButtonElement>` | -           | Called when the user clicks the confirm button.       |
+| className    | `string`                                     | -           | -                                                     |
+
+### getChatConfirmationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### chatConfirmationClasses
+
+```typescript
+type chatConfirmationClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the icon element. */
+  icon: string;
+  /** Styles applied to the message element. */
+  message: string;
+  /** Styles applied to the actions container element. */
+  actions: string;
+  /** Styles applied to the confirm button element. */
+  confirmButton: string;
+  /** Styles applied to the cancel button element. */
+  cancelButton: string;
+};
+```
+
+### ChatConfirmationClasses
+
+```typescript
+type ChatConfirmationClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the icon element. */
+  icon: string;
+  /** Styles applied to the message element. */
+  message: string;
+  /** Styles applied to the actions container element. */
+  actions: string;
+  /** Styles applied to the confirm button element. */
+  confirmButton: string;
+  /** Styles applied to the cancel button element. */
+  cancelButton: string;
+};
+```
+
+### ChatConfirmationClassKey
+
+```typescript
+type ChatConfirmationClassKey =
+  | 'message'
+  | 'root'
+  | 'icon'
+  | 'actions'
+  | 'confirmButton'
+  | 'cancelButton';
+```
+
+### ChatConfirmationProps
+
+```typescript
+type ChatConfirmationProps = {
+  /** The question or warning message to display. Required. */
+  message: string;
+  /**
+   * Label for the confirm button.
+   * @default 'Confirm'
+   */
+  confirmLabel?: string;
+  /**
+   * Label for the cancel button.
+   * @default 'Cancel'
+   */
+  cancelLabel?: string;
+  /** Called when the user clicks the confirm button. */
+  onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Called when the user clicks the cancel button. */
+  onCancel?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  classes?: Partial<ChatConfirmationClasses>;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-confirmation.ts b/docs/pages/x/api/chat/types.chat-confirmation.ts
new file mode 100644
index 0000000000000..4ece5df255737
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-confirmation.ts
@@ -0,0 +1,4 @@
+import { ChatConfirmation } from '@mui/x-chat/ChatConfirmation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConfirmation = createTypes(import.meta.url, ChatConfirmation);
diff --git a/docs/pages/x/api/chat/types.chat-conversation-header-actions.md b/docs/pages/x/api/chat/types.chat-conversation-header-actions.md
new file mode 100644
index 0000000000000..8945f99a912c2
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-header-actions.md
@@ -0,0 +1,235 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation-header-actions.md'
+
+## API Reference
+
+### ChatConversation
+
+**ChatConversation Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationRootSlotProps`        | -       | -           |
+| slots     | `Partial<ConversationRootSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeader
+
+**ChatConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeaderActions
+
+**ChatConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`        | -       | -           |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                          | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+| className | `string`                                  | -       | -           |
+
+### ChatConversationHeaderInfo
+
+**ChatConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`     | -       | -           |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatConversationSubtitle
+
+**ChatConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`   | -       | -           |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatConversationTitle
+
+**ChatConversationTitle Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationTitleSlotProps`       | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>`  | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### getChatConversationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationUtilityClasses
+
+**useChatConversationUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+
+**useChatConversationUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationClasses;
+```
+
+## Additional Types
+
+### chatConversationClasses
+
+```typescript
+type chatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClasses
+
+```typescript
+type ChatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClassKey
+
+```typescript
+type ChatConversationClassKey =
+  | 'title'
+  | 'root'
+  | 'header'
+  | 'headerInfo'
+  | 'subtitle'
+  | 'headerActions';
+```
+
+### ChatConversationHeaderActionsProps
+
+```typescript
+type ChatConversationHeaderActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ChatConversationHeaderInfoProps
+
+```typescript
+type ChatConversationHeaderInfoProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ChatConversationHeaderProps
+
+```typescript
+type ChatConversationHeaderProps = {
+  className?: string;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ChatConversationProps
+
+```typescript
+type ChatConversationProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ChatConversationSubtitleProps
+
+```typescript
+type ChatConversationSubtitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ChatConversationTitleProps
+
+```typescript
+type ChatConversationTitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation-header-actions.ts b/docs/pages/x/api/chat/types.chat-conversation-header-actions.ts
new file mode 100644
index 0000000000000..d28ba6d161854
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-header-actions.ts
@@ -0,0 +1,4 @@
+import { ChatConversationHeaderActions } from '@mui/x-chat/ChatConversation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversationHeaderActions = createTypes(import.meta.url, ChatConversationHeaderActions);
diff --git a/docs/pages/x/api/chat/types.chat-conversation-header-info.md b/docs/pages/x/api/chat/types.chat-conversation-header-info.md
new file mode 100644
index 0000000000000..2ec3cd5e8b68f
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-header-info.md
@@ -0,0 +1,235 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation-header-info.md'
+
+## API Reference
+
+### ChatConversation
+
+**ChatConversation Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationRootSlotProps`        | -       | -           |
+| slots     | `Partial<ConversationRootSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeader
+
+**ChatConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeaderActions
+
+**ChatConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`        | -       | -           |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                          | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+| className | `string`                                  | -       | -           |
+
+### ChatConversationHeaderInfo
+
+**ChatConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`     | -       | -           |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatConversationSubtitle
+
+**ChatConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`   | -       | -           |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatConversationTitle
+
+**ChatConversationTitle Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationTitleSlotProps`       | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>`  | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### getChatConversationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationUtilityClasses
+
+**useChatConversationUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+
+**useChatConversationUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationClasses;
+```
+
+## Additional Types
+
+### chatConversationClasses
+
+```typescript
+type chatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClasses
+
+```typescript
+type ChatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClassKey
+
+```typescript
+type ChatConversationClassKey =
+  | 'title'
+  | 'root'
+  | 'header'
+  | 'headerInfo'
+  | 'subtitle'
+  | 'headerActions';
+```
+
+### ChatConversationHeaderActionsProps
+
+```typescript
+type ChatConversationHeaderActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ChatConversationHeaderInfoProps
+
+```typescript
+type ChatConversationHeaderInfoProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ChatConversationHeaderProps
+
+```typescript
+type ChatConversationHeaderProps = {
+  className?: string;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ChatConversationProps
+
+```typescript
+type ChatConversationProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ChatConversationSubtitleProps
+
+```typescript
+type ChatConversationSubtitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ChatConversationTitleProps
+
+```typescript
+type ChatConversationTitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation-header-info.ts b/docs/pages/x/api/chat/types.chat-conversation-header-info.ts
new file mode 100644
index 0000000000000..ac12bcb041848
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-header-info.ts
@@ -0,0 +1,4 @@
+import { ChatConversationHeaderInfo } from '@mui/x-chat/ChatConversation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversationHeaderInfo = createTypes(import.meta.url, ChatConversationHeaderInfo);
diff --git a/docs/pages/x/api/chat/types.chat-conversation-header.md b/docs/pages/x/api/chat/types.chat-conversation-header.md
new file mode 100644
index 0000000000000..d84e214fd66ab
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-header.md
@@ -0,0 +1,235 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation-header.md'
+
+## API Reference
+
+### ChatConversation
+
+**ChatConversation Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationRootSlotProps`        | -       | -           |
+| slots     | `Partial<ConversationRootSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeader
+
+**ChatConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeaderActions
+
+**ChatConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`        | -       | -           |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                          | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+| className | `string`                                  | -       | -           |
+
+### ChatConversationHeaderInfo
+
+**ChatConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`     | -       | -           |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatConversationSubtitle
+
+**ChatConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`   | -       | -           |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatConversationTitle
+
+**ChatConversationTitle Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationTitleSlotProps`       | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>`  | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### getChatConversationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationUtilityClasses
+
+**useChatConversationUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+
+**useChatConversationUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationClasses;
+```
+
+## Additional Types
+
+### chatConversationClasses
+
+```typescript
+type chatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClasses
+
+```typescript
+type ChatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClassKey
+
+```typescript
+type ChatConversationClassKey =
+  | 'title'
+  | 'root'
+  | 'header'
+  | 'headerInfo'
+  | 'subtitle'
+  | 'headerActions';
+```
+
+### ChatConversationHeaderActionsProps
+
+```typescript
+type ChatConversationHeaderActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ChatConversationHeaderInfoProps
+
+```typescript
+type ChatConversationHeaderInfoProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ChatConversationHeaderProps
+
+```typescript
+type ChatConversationHeaderProps = {
+  className?: string;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ChatConversationProps
+
+```typescript
+type ChatConversationProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ChatConversationSubtitleProps
+
+```typescript
+type ChatConversationSubtitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ChatConversationTitleProps
+
+```typescript
+type ChatConversationTitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation-header.ts b/docs/pages/x/api/chat/types.chat-conversation-header.ts
new file mode 100644
index 0000000000000..f3e53528162d3
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-header.ts
@@ -0,0 +1,4 @@
+import { ChatConversationHeader } from '@mui/x-chat/ChatConversation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversationHeader = createTypes(import.meta.url, ChatConversationHeader);
diff --git a/docs/pages/x/api/chat/types.chat-conversation-list.md b/docs/pages/x/api/chat/types.chat-conversation-list.md
new file mode 100644
index 0000000000000..b5c6a474e0448
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-list.md
@@ -0,0 +1,165 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation-list.md'
+
+## API Reference
+
+### ChatConversationList
+
+**ChatConversationList Props:**
+
+| Prop      | Type                                   | Default     | Description                                                                                                                                                                                               |
+| :-------- | :------------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes   | `Partial<ChatConversationListClasses>` | -           | -                                                                                                                                                                                                         |
+| slotProps | `ConversationListRootSlotProps`        | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>`   | -           | -                                                                                                                                                                                                         |
+| sx        | `SxProps<Theme>`                       | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`              | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+| className | `string`                               | -           | -                                                                                                                                                                                                         |
+
+### getChatConversationListUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationListUtilityClasses
+
+**useChatConversationListUtilityClasses Parameters:**
+
+| Parameter | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationListClasses>` | -       | -           |
+
+**useChatConversationListUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationListClasses;
+```
+
+## Additional Types
+
+### chatConversationListClasses
+
+```typescript
+type chatConversationListClasses = {
+  /** Styles applied to the conversation list root element. */
+  root: string;
+  /** Styles applied to the scroller element. */
+  scroller: string;
+  /** Styles applied to the list item element. */
+  item: string;
+  /** Styles applied to the item avatar element. */
+  itemAvatar: string;
+  /** Styles applied to the item content element. */
+  itemContent: string;
+  /** Styles applied to the item title element. */
+  itemTitle: string;
+  /** Styles applied to the item preview element. */
+  itemPreview: string;
+  /** Styles applied to the item timestamp element. */
+  itemTimestamp: string;
+  /** Styles applied to the item unread badge element. */
+  itemUnreadBadge: string;
+  /** Styles applied to the item actions element. */
+  itemActions: string;
+  /** Applied to a selected conversation item */
+  itemSelected: string;
+  /** Applied to an unread conversation item */
+  itemUnread: string;
+  /** Applied to a focused conversation item */
+  itemFocused: string;
+  /** Applied when variant="compact" */
+  compact: string;
+};
+```
+
+### ChatConversationListClasses
+
+```typescript
+type ChatConversationListClasses = {
+  /** Styles applied to the conversation list root element. */
+  root: string;
+  /** Styles applied to the scroller element. */
+  scroller: string;
+  /** Styles applied to the list item element. */
+  item: string;
+  /** Styles applied to the item avatar element. */
+  itemAvatar: string;
+  /** Styles applied to the item content element. */
+  itemContent: string;
+  /** Styles applied to the item title element. */
+  itemTitle: string;
+  /** Styles applied to the item preview element. */
+  itemPreview: string;
+  /** Styles applied to the item timestamp element. */
+  itemTimestamp: string;
+  /** Styles applied to the item unread badge element. */
+  itemUnreadBadge: string;
+  /** Styles applied to the item actions element. */
+  itemActions: string;
+  /** Applied to a selected conversation item */
+  itemSelected: string;
+  /** Applied to an unread conversation item */
+  itemUnread: string;
+  /** Applied to a focused conversation item */
+  itemFocused: string;
+  /** Applied when variant="compact" */
+  compact: string;
+};
+```
+
+### ChatConversationListClassKey
+
+```typescript
+type ChatConversationListClassKey =
+  | 'root'
+  | 'scroller'
+  | 'item'
+  | 'itemAvatar'
+  | 'itemContent'
+  | 'itemTitle'
+  | 'itemPreview'
+  | 'itemTimestamp'
+  | 'itemUnreadBadge'
+  | 'itemActions'
+  | 'itemSelected'
+  | 'itemUnread'
+  | 'itemFocused'
+  | 'compact';
+```
+
+### ChatConversationListProps
+
+```typescript
+type ChatConversationListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationListClasses>;
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+## External Types
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation-list.ts b/docs/pages/x/api/chat/types.chat-conversation-list.ts
new file mode 100644
index 0000000000000..36a580cfb17d9
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-list.ts
@@ -0,0 +1,4 @@
+import { ChatConversationList } from '@mui/x-chat/ChatConversationList';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversationList = createTypes(import.meta.url, ChatConversationList);
diff --git a/docs/pages/x/api/chat/types.chat-conversation-subtitle.md b/docs/pages/x/api/chat/types.chat-conversation-subtitle.md
new file mode 100644
index 0000000000000..699e2153706f7
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-subtitle.md
@@ -0,0 +1,235 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation-subtitle.md'
+
+## API Reference
+
+### ChatConversation
+
+**ChatConversation Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationRootSlotProps`        | -       | -           |
+| slots     | `Partial<ConversationRootSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeader
+
+**ChatConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeaderActions
+
+**ChatConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`        | -       | -           |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                          | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+| className | `string`                                  | -       | -           |
+
+### ChatConversationHeaderInfo
+
+**ChatConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`     | -       | -           |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatConversationSubtitle
+
+**ChatConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`   | -       | -           |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatConversationTitle
+
+**ChatConversationTitle Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationTitleSlotProps`       | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>`  | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### getChatConversationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationUtilityClasses
+
+**useChatConversationUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+
+**useChatConversationUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationClasses;
+```
+
+## Additional Types
+
+### chatConversationClasses
+
+```typescript
+type chatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClasses
+
+```typescript
+type ChatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClassKey
+
+```typescript
+type ChatConversationClassKey =
+  | 'title'
+  | 'root'
+  | 'header'
+  | 'headerInfo'
+  | 'subtitle'
+  | 'headerActions';
+```
+
+### ChatConversationHeaderActionsProps
+
+```typescript
+type ChatConversationHeaderActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ChatConversationHeaderInfoProps
+
+```typescript
+type ChatConversationHeaderInfoProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ChatConversationHeaderProps
+
+```typescript
+type ChatConversationHeaderProps = {
+  className?: string;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ChatConversationProps
+
+```typescript
+type ChatConversationProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ChatConversationSubtitleProps
+
+```typescript
+type ChatConversationSubtitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ChatConversationTitleProps
+
+```typescript
+type ChatConversationTitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation-subtitle.ts b/docs/pages/x/api/chat/types.chat-conversation-subtitle.ts
new file mode 100644
index 0000000000000..5c505d38315b7
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-subtitle.ts
@@ -0,0 +1,4 @@
+import { ChatConversationSubtitle } from '@mui/x-chat/ChatConversation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversationSubtitle = createTypes(import.meta.url, ChatConversationSubtitle);
diff --git a/docs/pages/x/api/chat/types.chat-conversation-title.md b/docs/pages/x/api/chat/types.chat-conversation-title.md
new file mode 100644
index 0000000000000..24606e07a2fda
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-title.md
@@ -0,0 +1,235 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation-title.md'
+
+## API Reference
+
+### ChatConversation
+
+**ChatConversation Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationRootSlotProps`        | -       | -           |
+| slots     | `Partial<ConversationRootSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeader
+
+**ChatConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeaderActions
+
+**ChatConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`        | -       | -           |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                          | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+| className | `string`                                  | -       | -           |
+
+### ChatConversationHeaderInfo
+
+**ChatConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`     | -       | -           |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatConversationSubtitle
+
+**ChatConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`   | -       | -           |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatConversationTitle
+
+**ChatConversationTitle Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationTitleSlotProps`       | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>`  | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### getChatConversationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationUtilityClasses
+
+**useChatConversationUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+
+**useChatConversationUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationClasses;
+```
+
+## Additional Types
+
+### chatConversationClasses
+
+```typescript
+type chatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClasses
+
+```typescript
+type ChatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClassKey
+
+```typescript
+type ChatConversationClassKey =
+  | 'title'
+  | 'root'
+  | 'header'
+  | 'headerInfo'
+  | 'subtitle'
+  | 'headerActions';
+```
+
+### ChatConversationHeaderActionsProps
+
+```typescript
+type ChatConversationHeaderActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ChatConversationHeaderInfoProps
+
+```typescript
+type ChatConversationHeaderInfoProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ChatConversationHeaderProps
+
+```typescript
+type ChatConversationHeaderProps = {
+  className?: string;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ChatConversationProps
+
+```typescript
+type ChatConversationProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ChatConversationSubtitleProps
+
+```typescript
+type ChatConversationSubtitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ChatConversationTitleProps
+
+```typescript
+type ChatConversationTitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation-title.ts b/docs/pages/x/api/chat/types.chat-conversation-title.ts
new file mode 100644
index 0000000000000..d21dca9ce6546
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation-title.ts
@@ -0,0 +1,4 @@
+import { ChatConversationTitle } from '@mui/x-chat/ChatConversation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversationTitle = createTypes(import.meta.url, ChatConversationTitle);
diff --git a/docs/pages/x/api/chat/types.chat-conversation.md b/docs/pages/x/api/chat/types.chat-conversation.md
new file mode 100644
index 0000000000000..ce80fb50ed837
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation.md
@@ -0,0 +1,235 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-conversation.md'
+
+## API Reference
+
+### ChatConversation
+
+**ChatConversation Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationRootSlotProps`        | -       | -           |
+| slots     | `Partial<ConversationRootSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeader
+
+**ChatConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatConversationHeaderActions
+
+**ChatConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`        | -       | -           |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                          | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+| className | `string`                                  | -       | -           |
+
+### ChatConversationHeaderInfo
+
+**ChatConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`     | -       | -           |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                       | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+| className | `string`                               | -       | -           |
+
+### ChatConversationSubtitle
+
+**ChatConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>`   | -       | -           |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`                     | -       | -           |
+| className | `string`                             | -       | -           |
+
+### ChatConversationTitle
+
+**ChatConversationTitle Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+| slotProps | `ConversationTitleSlotProps`       | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>`  | -       | -           |
+| sx        | `SxProps<Theme>`                   | -       | -           |
+| className | `string`                           | -       | -           |
+
+### getChatConversationUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatConversationUtilityClasses
+
+**useChatConversationUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatConversationClasses>` | -       | -           |
+
+**useChatConversationUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatConversationClasses;
+```
+
+## Additional Types
+
+### chatConversationClasses
+
+```typescript
+type chatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClasses
+
+```typescript
+type ChatConversationClasses = {
+  /** Styles applied to the conversation root element. */
+  root: string;
+  /** Styles applied to the conversation header element. */
+  header: string;
+  /** Styles applied to the conversation header info element. */
+  headerInfo: string;
+  /** Styles applied to the conversation title element. */
+  title: string;
+  /** Styles applied to the conversation subtitle element. */
+  subtitle: string;
+  /** Styles applied to the conversation header actions element. */
+  headerActions: string;
+};
+```
+
+### ChatConversationClassKey
+
+```typescript
+type ChatConversationClassKey =
+  | 'title'
+  | 'root'
+  | 'header'
+  | 'headerInfo'
+  | 'subtitle'
+  | 'headerActions';
+```
+
+### ChatConversationHeaderActionsProps
+
+```typescript
+type ChatConversationHeaderActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ChatConversationHeaderInfoProps
+
+```typescript
+type ChatConversationHeaderInfoProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ChatConversationHeaderProps
+
+```typescript
+type ChatConversationHeaderProps = {
+  className?: string;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ChatConversationProps
+
+```typescript
+type ChatConversationProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ChatConversationSubtitleProps
+
+```typescript
+type ChatConversationSubtitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ChatConversationTitleProps
+
+```typescript
+type ChatConversationTitleProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatConversationClasses>;
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-conversation.ts b/docs/pages/x/api/chat/types.chat-conversation.ts
new file mode 100644
index 0000000000000..b456d83a99475
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-conversation.ts
@@ -0,0 +1,4 @@
+import { ChatConversation } from '@mui/x-chat/ChatConversation';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatConversation = createTypes(import.meta.url, ChatConversation);
diff --git a/docs/pages/x/api/chat/types.chat-date-divider.md b/docs/pages/x/api/chat/types.chat-date-divider.md
new file mode 100644
index 0000000000000..e12163caaa05b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-date-divider.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-date-divider.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-date-divider.ts b/docs/pages/x/api/chat/types.chat-date-divider.ts
new file mode 100644
index 0000000000000..80a41f9ebbd78
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-date-divider.ts
@@ -0,0 +1,4 @@
+import { ChatDateDivider } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatDateDivider = createTypes(import.meta.url, ChatDateDivider);
diff --git a/docs/pages/x/api/chat/types.chat-layout.md b/docs/pages/x/api/chat/types.chat-layout.md
new file mode 100644
index 0000000000000..e1be07f5b39fb
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-layout.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-layout.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.chat-layout.ts b/docs/pages/x/api/chat/types.chat-layout.ts
new file mode 100644
index 0000000000000..a8465305dee11
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-layout.ts
@@ -0,0 +1,4 @@
+import { ChatLayout } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatLayout = createTypes(import.meta.url, ChatLayout);
diff --git a/docs/pages/x/api/chat/types.chat-message-actions.md b/docs/pages/x/api/chat/types.chat-message-actions.md
new file mode 100644
index 0000000000000..379cec52d00f2
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-actions.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-actions.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-actions.ts b/docs/pages/x/api/chat/types.chat-message-actions.ts
new file mode 100644
index 0000000000000..6b4d7d9ef76a4
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-actions.ts
@@ -0,0 +1,4 @@
+import { ChatMessageActions } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageActions = createTypes(import.meta.url, ChatMessageActions);
diff --git a/docs/pages/x/api/chat/types.chat-message-author-label.md b/docs/pages/x/api/chat/types.chat-message-author-label.md
new file mode 100644
index 0000000000000..6be98f192d33b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-author-label.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-author-label.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-author-label.ts b/docs/pages/x/api/chat/types.chat-message-author-label.ts
new file mode 100644
index 0000000000000..3b36510d8fe8d
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-author-label.ts
@@ -0,0 +1,4 @@
+import { ChatMessageAuthorLabel } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageAuthorLabel = createTypes(import.meta.url, ChatMessageAuthorLabel);
diff --git a/docs/pages/x/api/chat/types.chat-message-avatar.md b/docs/pages/x/api/chat/types.chat-message-avatar.md
new file mode 100644
index 0000000000000..37bb6eb509c75
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-avatar.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-avatar.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-avatar.ts b/docs/pages/x/api/chat/types.chat-message-avatar.ts
new file mode 100644
index 0000000000000..f4b9ac4ed2503
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-avatar.ts
@@ -0,0 +1,4 @@
+import { ChatMessageAvatar } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageAvatar = createTypes(import.meta.url, ChatMessageAvatar);
diff --git a/docs/pages/x/api/chat/types.chat-message-content.md b/docs/pages/x/api/chat/types.chat-message-content.md
new file mode 100644
index 0000000000000..3c97ab31049da
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-content.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-content.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-content.ts b/docs/pages/x/api/chat/types.chat-message-content.ts
new file mode 100644
index 0000000000000..dd98330e9dc54
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-content.ts
@@ -0,0 +1,4 @@
+import { ChatMessageContent } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageContent = createTypes(import.meta.url, ChatMessageContent);
diff --git a/docs/pages/x/api/chat/types.chat-message-group.md b/docs/pages/x/api/chat/types.chat-message-group.md
new file mode 100644
index 0000000000000..14233a7ebdd1b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-group.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-group.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-group.ts b/docs/pages/x/api/chat/types.chat-message-group.ts
new file mode 100644
index 0000000000000..ee82e282871ec
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-group.ts
@@ -0,0 +1,4 @@
+import { ChatMessageGroup } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageGroup = createTypes(import.meta.url, ChatMessageGroup);
diff --git a/docs/pages/x/api/chat/types.chat-message-inline-meta.md b/docs/pages/x/api/chat/types.chat-message-inline-meta.md
new file mode 100644
index 0000000000000..93f9d0cd9f249
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-inline-meta.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-inline-meta.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-inline-meta.ts b/docs/pages/x/api/chat/types.chat-message-inline-meta.ts
new file mode 100644
index 0000000000000..78505beea6a25
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-inline-meta.ts
@@ -0,0 +1,4 @@
+import { ChatMessageInlineMeta } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageInlineMeta = createTypes(import.meta.url, ChatMessageInlineMeta);
diff --git a/docs/pages/x/api/chat/types.chat-message-list.md b/docs/pages/x/api/chat/types.chat-message-list.md
new file mode 100644
index 0000000000000..ae3de5fec1dd5
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-list.md
@@ -0,0 +1,125 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-list.md'
+
+## API Reference
+
+### ChatMessageList
+
+**ChatMessageList Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| classes           | `Partial<ChatMessageListClasses>`            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| sx                | `SxProps<Theme>`                             | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| className         | `string`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### getChatMessageListUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageListUtilityClasses
+
+**useChatMessageListUtilityClasses Parameters:**
+
+| Parameter | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageListClasses>` | -       | -           |
+
+**useChatMessageListUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageListClasses;
+```
+
+## Additional Types
+
+### chatMessageListClasses
+
+```typescript
+type chatMessageListClasses = {
+  /** Styles applied to the message list root element. */
+  root: string;
+  /** Styles applied to the message list scroller element. */
+  scroller: string;
+  /** Styles applied to the message list content element. */
+  content: string;
+};
+```
+
+### ChatMessageListClasses
+
+```typescript
+type ChatMessageListClasses = {
+  /** Styles applied to the message list root element. */
+  root: string;
+  /** Styles applied to the message list scroller element. */
+  scroller: string;
+  /** Styles applied to the message list content element. */
+  content: string;
+};
+```
+
+### ChatMessageListClassKey
+
+```typescript
+type ChatMessageListClassKey = 'content' | 'root' | 'scroller';
+```
+
+### ChatMessageListProps
+
+```typescript
+type ChatMessageListProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageListClasses>;
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+## External Types
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-list.ts b/docs/pages/x/api/chat/types.chat-message-list.ts
new file mode 100644
index 0000000000000..fe297bd997ca7
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-list.ts
@@ -0,0 +1,4 @@
+import { ChatMessageList } from '@mui/x-chat/ChatMessageList';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageList = createTypes(import.meta.url, ChatMessageList);
diff --git a/docs/pages/x/api/chat/types.chat-message-meta.md b/docs/pages/x/api/chat/types.chat-message-meta.md
new file mode 100644
index 0000000000000..42bda69d8df11
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-meta.md
@@ -0,0 +1,474 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-meta.md'
+
+## API Reference
+
+### ChatDateDivider
+
+**ChatDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>`          | -       | -           |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+| className   | `string`                               | -       | -           |
+
+### ChatMessage
+
+**ChatMessage Props:**
+
+| Prop        | Type                          | Default | Description |
+| :---------- | :---------------------------- | :------ | :---------- |
+| classes     | `Partial<ChatMessageClasses>` | -       | -           |
+| isGrouped   | `boolean`                     | -       | -           |
+| messageId\* | `string`                      | -       | -           |
+| slotProps   | `MessageRootSlotProps`        | -       | -           |
+| slots       | `Partial<MessageRootSlots>`   | -       | -           |
+| sx          | `SxProps<Theme>`              | -       | -           |
+| className   | `string`                      | -       | -           |
+
+### ChatMessageActions
+
+**ChatMessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`  | -       | -           |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+| sx        | `SxProps<Theme>`               | -       | -           |
+| className | `string`                       | -       | -           |
+
+### ChatMessageAuthorLabel
+
+**ChatMessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>`      | -       | -           |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+| className | `string`                           | -       | -           |
+
+### ChatMessageAvatar
+
+**ChatMessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+| className | `string`                      | -       | -           |
+
+### ChatMessageContent
+
+**ChatMessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| classes                    | `Partial<ChatMessageClasses>`                                                              | -       | -                                                                                                                                                  |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+| className                  | `string`                                                                                   | -       | -                                                                                                                                                  |
+
+### ChatMessageGroup
+
+**ChatMessageGroup Props:**
+
+| Prop        | Type                          | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :---------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes     | `Partial<ChatMessageClasses>` | -                                                       | -                                                                                                                                                                                                                                       |
+| groupKey    | `GroupKeyFn`                  | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                    | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`       | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>`  | -                                                       | -                                                                                                                                                                                                                                       |
+| sx          | `SxProps<Theme>`              | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`             | -                                                       | -                                                                                                                                                                                                                                       |
+| className   | `string`                      | -                                                       | -                                                                                                                                                                                                                                       |
+
+### ChatMessageMeta
+
+**ChatMessageMeta Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+| slotProps | `MessageMetaSlotProps`        | -       | -           |
+| slots     | `Partial<MessageMetaSlots>`   | -       | -           |
+| sx        | `SxProps<Theme>`              | -       | -           |
+| className | `string`                      | -       | -           |
+
+### getChatMessageUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatMessageUtilityClasses
+
+**useChatMessageUtilityClasses Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatMessageClasses>` | -       | -           |
+
+**useChatMessageUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatMessageClasses;
+```
+
+## Additional Types
+
+### ChatDateDividerProps
+
+```typescript
+type ChatDateDividerProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### ChatMessageActionsProps
+
+```typescript
+type ChatMessageActionsProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### ChatMessageAuthorLabelProps
+
+```typescript
+type ChatMessageAuthorLabelProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### ChatMessageAvatarProps
+
+```typescript
+type ChatMessageAvatarProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### chatMessageClasses
+
+```typescript
+type chatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClasses
+
+```typescript
+type ChatMessageClasses = {
+  /** Styles applied to the message root element. */
+  root: string;
+  /** Styles applied to the message avatar element. */
+  avatar: string;
+  /** Styles applied to the message author label element. */
+  authorLabel: string;
+  /** Styles applied to the message content element. */
+  content: string;
+  /** Styles applied to the message bubble element inside content. */
+  bubble: string;
+  /** Styles applied to the message meta element. */
+  meta: string;
+  /** Styles applied to the message actions element. */
+  actions: string;
+  /** Styles applied to the message group element. */
+  group: string;
+  /** Class applied to the group author name element. */
+  groupAuthorName: string;
+  /** Class applied to the group timestamp element (compact variant only). */
+  groupTimestamp: string;
+  /** Styles applied to the inline meta spacer element (default variant). */
+  inlineMetaSpacer: string;
+  /** Styles applied to the inline meta container element (default variant). */
+  inlineMeta: string;
+  /** Styles applied to the date divider element. */
+  dateDivider: string;
+  /** Applied when the message role is 'user' */
+  roleUser: string;
+  /** Applied when the message role is 'assistant' */
+  roleAssistant: string;
+  /** Applied while the message is streaming */
+  streaming: string;
+  /** Applied when the message has an error status */
+  error: string;
+};
+```
+
+### ChatMessageClassKey
+
+```typescript
+type ChatMessageClassKey =
+  | 'content'
+  | 'root'
+  | 'avatar'
+  | 'authorLabel'
+  | 'bubble'
+  | 'meta'
+  | 'actions'
+  | 'group'
+  | 'groupAuthorName'
+  | 'groupTimestamp'
+  | 'inlineMetaSpacer'
+  | 'inlineMeta'
+  | 'dateDivider'
+  | 'roleUser'
+  | 'roleAssistant'
+  | 'streaming'
+  | 'error';
+```
+
+### ChatMessageContentProps
+
+```typescript
+type ChatMessageContentProps = {
+  className?: string;
+  classes?: Partial<ChatMessageClasses>;
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### ChatMessageGroupProps
+
+```typescript
+type ChatMessageGroupProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### ChatMessageMetaProps
+
+```typescript
+type ChatMessageMetaProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  slots?: Partial<MessageMetaSlots>;
+  slotProps?: MessageMetaSlotProps;
+};
+```
+
+### ChatMessageProps
+
+```typescript
+type ChatMessageProps = {
+  className?: string;
+  sx?: SxProps<Theme>;
+  classes?: Partial<ChatMessageClasses>;
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+## External Types
+
+### ChatPartRenderer
+
+```typescript
+type ChatPartRenderer = (props: {
+  part:
+    | { type: 'text'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'reasoning'; text: string; state?: 'streaming' | 'done' | undefined }
+    | { type: 'file'; mediaType: string; url: string; filename?: string | undefined }
+    | { type: 'source-url'; sourceId: string; url: string; title?: string | undefined }
+    | {
+        type: 'source-document';
+        sourceId: string;
+        title?: string | undefined;
+        text?: string | undefined;
+      }
+    | { type: any; id?: string | undefined; data: unknown; transient?: boolean | undefined }
+    | { type: 'step-start' }
+    | {
+        type: 'tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      }
+    | {
+        type: 'dynamic-tool';
+        toolInvocation: {
+          toolCallId: string;
+          toolName: string;
+          state:
+            | 'input-streaming'
+            | 'input-available'
+            | 'approval-requested'
+            | 'approval-responded'
+            | 'output-available'
+            | 'output-error'
+            | 'output-denied';
+          input?: unknown;
+          output?: unknown;
+          errorText?: string | undefined;
+          approval?: { approved: boolean; reason?: string | undefined } | undefined;
+          providerExecuted?: boolean | undefined;
+          title?: string | undefined;
+          callProviderMetadata?: Record | undefined;
+          preliminary?: boolean | undefined;
+        };
+      };
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  index: number;
+  onToolCall?: unknown | undefined;
+}) => ReactNode;
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-meta.ts b/docs/pages/x/api/chat/types.chat-message-meta.ts
new file mode 100644
index 0000000000000..37ff0b26e0818
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-meta.ts
@@ -0,0 +1,4 @@
+import { ChatMessageMeta } from '@mui/x-chat/ChatMessage';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageMeta = createTypes(import.meta.url, ChatMessageMeta);
diff --git a/docs/pages/x/api/chat/types.chat-message-skeleton.md b/docs/pages/x/api/chat/types.chat-message-skeleton.md
new file mode 100644
index 0000000000000..f10e8bf960864
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-skeleton.md
@@ -0,0 +1,103 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-skeleton.md'
+
+## API Reference
+
+### ChatMessageSkeleton
+
+**ChatMessageSkeleton Props:**
+
+| Prop      | Type                                  | Default | Description                        |
+| :-------- | :------------------------------------ | :------ | :--------------------------------- |
+| classes   | `Partial<ChatMessageSkeletonClasses>` | -       | -                                  |
+| lines     | `number`                              | `3`     | Number of shimmer lines to render. |
+| slotProps | `ChatMessageSkeletonSlotProps`        | -       | -                                  |
+| slots     | `ChatMessageSkeletonSlots`            | -       | -                                  |
+| className | `string`                              | -       | -                                  |
+
+### getChatMessageSkeletonUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### chatMessageSkeletonClasses
+
+```typescript
+type chatMessageSkeletonClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to each shimmer line element. */
+  line: string;
+};
+```
+
+### ChatMessageSkeletonClasses
+
+```typescript
+type ChatMessageSkeletonClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to each shimmer line element. */
+  line: string;
+};
+```
+
+### ChatMessageSkeletonClassKey
+
+```typescript
+type ChatMessageSkeletonClassKey = 'root' | 'line';
+```
+
+### ChatMessageSkeletonProps
+
+```typescript
+type ChatMessageSkeletonProps = {
+  /**
+   * Number of shimmer lines to render.
+   * @default 3
+   */
+  lines?: number;
+  className?: string;
+  classes?: Partial<ChatMessageSkeletonClasses>;
+  slots?: ChatMessageSkeletonSlots;
+  slotProps?: ChatMessageSkeletonSlotProps;
+};
+```
+
+### ChatMessageSkeletonSlotProps
+
+```typescript
+type ChatMessageSkeletonSlotProps = {
+  root?: SlotComponentProps<'div', {}, {}>;
+  line?: SlotComponentProps<'div', {}, {}>;
+};
+```
+
+### ChatMessageSkeletonSlots
+
+```typescript
+type ChatMessageSkeletonSlots = {
+  /**
+   * The root container element.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * Each animated shimmer line element.
+   * @default 'div'
+   */
+  line?: React.ElementType;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-skeleton.ts b/docs/pages/x/api/chat/types.chat-message-skeleton.ts
new file mode 100644
index 0000000000000..42a2303a0a2e6
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-skeleton.ts
@@ -0,0 +1,4 @@
+import { ChatMessageSkeleton } from '@mui/x-chat/ChatMessageSkeleton';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageSkeleton = createTypes(import.meta.url, ChatMessageSkeleton);
diff --git a/docs/pages/x/api/chat/types.chat-message-source.md b/docs/pages/x/api/chat/types.chat-message-source.md
new file mode 100644
index 0000000000000..38d2efd5d288f
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-source.md
@@ -0,0 +1,226 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-source.md'
+
+## API Reference
+
+### ChatMessageSource
+
+**ChatMessageSource Props:**
+
+| Prop      | Type                                | Default | Description                                                      |
+| :-------- | :---------------------------------- | :------ | :--------------------------------------------------------------- |
+| classes   | `Partial<ChatMessageSourceClasses>` | -       | -                                                                |
+| href\*    | `string`                            | -       | The URL this source links to.                                    |
+| index     | `number`                            | -       | 1-based position number displayed as a muted badge.              |
+| slotProps | `ChatMessageSourceSlotProps`        | -       | -                                                                |
+| slots     | `ChatMessageSourceSlots`            | -       | -                                                                |
+| title     | `string`                            | -       | Display title for the source. Falls back to `href` when omitted. |
+| children  | `React.ReactNode`                   | -       | -                                                                |
+| className | `string`                            | -       | -                                                                |
+
+### ChatMessageSources
+
+**ChatMessageSources Props:**
+
+| Prop      | Type                                 | Default     | Description                                |
+| :-------- | :----------------------------------- | :---------- | :----------------------------------------- |
+| label     | `string`                             | `'Sources'` | Label displayed above the list of sources. |
+| classes   | `Partial<ChatMessageSourcesClasses>` | -           | -                                          |
+| slotProps | `ChatMessageSourcesSlotProps`        | -           | -                                          |
+| slots     | `ChatMessageSourcesSlots`            | -           | -                                          |
+| children  | `React.ReactNode`                    | -           | -                                          |
+| className | `string`                             | -           | -                                          |
+
+### getChatMessageSourcesUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatMessageSourceUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### chatMessageSourceClasses
+
+```typescript
+type chatMessageSourceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the index badge element. */
+  index: string;
+  /** Styles applied to the link element. */
+  link: string;
+};
+```
+
+### ChatMessageSourceClasses
+
+```typescript
+type ChatMessageSourceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the index badge element. */
+  index: string;
+  /** Styles applied to the link element. */
+  link: string;
+};
+```
+
+### ChatMessageSourceClassKey
+
+```typescript
+type ChatMessageSourceClassKey = 'root' | 'link' | 'index';
+```
+
+### ChatMessageSourceProps
+
+```typescript
+type ChatMessageSourceProps = {
+  /** The URL this source links to. */
+  href: string;
+  /** Display title for the source. Falls back to `href` when omitted. */
+  title?: string;
+  /** 1-based position number displayed as a muted badge. */
+  index?: number;
+  children?: React.ReactNode;
+  className?: string;
+  classes?: Partial<ChatMessageSourceClasses>;
+  slots?: ChatMessageSourceSlots;
+  slotProps?: ChatMessageSourceSlotProps;
+};
+```
+
+### chatMessageSourcesClasses
+
+```typescript
+type chatMessageSourcesClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the list element. */
+  list: string;
+};
+```
+
+### ChatMessageSourcesClasses
+
+```typescript
+type ChatMessageSourcesClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the list element. */
+  list: string;
+};
+```
+
+### ChatMessageSourcesClassKey
+
+```typescript
+type ChatMessageSourcesClassKey = 'root' | 'label' | 'list';
+```
+
+### ChatMessageSourceSlotProps
+
+```typescript
+type ChatMessageSourceSlotProps = {
+  root?: SlotComponentProps<'li', {}, {}>;
+  index?: SlotComponentProps<'span', {}, {}>;
+  link?: SlotComponentProps<'a', {}, {}>;
+};
+```
+
+### ChatMessageSourceSlots
+
+```typescript
+type ChatMessageSourceSlots = {
+  /**
+   * The root list item element.
+   * @default 'li'
+   */
+  root?: React.ElementType;
+  /**
+   * The numeric index badge.
+   * @default 'span'
+   */
+  index?: React.ElementType;
+  /**
+   * The anchor link.
+   * @default 'a'
+   */
+  link?: React.ElementType;
+};
+```
+
+### ChatMessageSourcesProps
+
+```typescript
+type ChatMessageSourcesProps = {
+  /**
+   * Label displayed above the list of sources.
+   * @default 'Sources'
+   */
+  label?: string;
+  children?: React.ReactNode;
+  className?: string;
+  classes?: Partial<ChatMessageSourcesClasses>;
+  slots?: ChatMessageSourcesSlots;
+  slotProps?: ChatMessageSourcesSlotProps;
+};
+```
+
+### ChatMessageSourcesSlotProps
+
+```typescript
+type ChatMessageSourcesSlotProps = {
+  root?: SlotComponentProps<'div', {}, {}>;
+  label?: SlotComponentProps<'p', {}, {}>;
+  list?: SlotComponentProps<'ol', {}, {}>;
+};
+```
+
+### ChatMessageSourcesSlots
+
+```typescript
+type ChatMessageSourcesSlots = {
+  /**
+   * The root container element.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * The label element shown above the list.
+   * @default 'p'
+   */
+  label?: React.ElementType;
+  /**
+   * The ordered list wrapping source items.
+   * @default 'ol'
+   */
+  list?: React.ElementType;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-source.ts b/docs/pages/x/api/chat/types.chat-message-source.ts
new file mode 100644
index 0000000000000..3a14d51bd3143
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-source.ts
@@ -0,0 +1,4 @@
+import { ChatMessageSource } from '@mui/x-chat/ChatMessageSources';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageSource = createTypes(import.meta.url, ChatMessageSource);
diff --git a/docs/pages/x/api/chat/types.chat-message-sources.md b/docs/pages/x/api/chat/types.chat-message-sources.md
new file mode 100644
index 0000000000000..9c2af69318a72
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-sources.md
@@ -0,0 +1,226 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-message-sources.md'
+
+## API Reference
+
+### ChatMessageSource
+
+**ChatMessageSource Props:**
+
+| Prop      | Type                                | Default | Description                                                      |
+| :-------- | :---------------------------------- | :------ | :--------------------------------------------------------------- |
+| classes   | `Partial<ChatMessageSourceClasses>` | -       | -                                                                |
+| href\*    | `string`                            | -       | The URL this source links to.                                    |
+| index     | `number`                            | -       | 1-based position number displayed as a muted badge.              |
+| slotProps | `ChatMessageSourceSlotProps`        | -       | -                                                                |
+| slots     | `ChatMessageSourceSlots`            | -       | -                                                                |
+| title     | `string`                            | -       | Display title for the source. Falls back to `href` when omitted. |
+| children  | `React.ReactNode`                   | -       | -                                                                |
+| className | `string`                            | -       | -                                                                |
+
+### ChatMessageSources
+
+**ChatMessageSources Props:**
+
+| Prop      | Type                                 | Default     | Description                                |
+| :-------- | :----------------------------------- | :---------- | :----------------------------------------- |
+| label     | `string`                             | `'Sources'` | Label displayed above the list of sources. |
+| classes   | `Partial<ChatMessageSourcesClasses>` | -           | -                                          |
+| slotProps | `ChatMessageSourcesSlotProps`        | -           | -                                          |
+| slots     | `ChatMessageSourcesSlots`            | -           | -                                          |
+| children  | `React.ReactNode`                    | -           | -                                          |
+| className | `string`                             | -           | -                                          |
+
+### getChatMessageSourcesUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatMessageSourceUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### chatMessageSourceClasses
+
+```typescript
+type chatMessageSourceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the index badge element. */
+  index: string;
+  /** Styles applied to the link element. */
+  link: string;
+};
+```
+
+### ChatMessageSourceClasses
+
+```typescript
+type ChatMessageSourceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the index badge element. */
+  index: string;
+  /** Styles applied to the link element. */
+  link: string;
+};
+```
+
+### ChatMessageSourceClassKey
+
+```typescript
+type ChatMessageSourceClassKey = 'root' | 'link' | 'index';
+```
+
+### ChatMessageSourceProps
+
+```typescript
+type ChatMessageSourceProps = {
+  /** The URL this source links to. */
+  href: string;
+  /** Display title for the source. Falls back to `href` when omitted. */
+  title?: string;
+  /** 1-based position number displayed as a muted badge. */
+  index?: number;
+  children?: React.ReactNode;
+  className?: string;
+  classes?: Partial<ChatMessageSourceClasses>;
+  slots?: ChatMessageSourceSlots;
+  slotProps?: ChatMessageSourceSlotProps;
+};
+```
+
+### chatMessageSourcesClasses
+
+```typescript
+type chatMessageSourcesClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the list element. */
+  list: string;
+};
+```
+
+### ChatMessageSourcesClasses
+
+```typescript
+type ChatMessageSourcesClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the list element. */
+  list: string;
+};
+```
+
+### ChatMessageSourcesClassKey
+
+```typescript
+type ChatMessageSourcesClassKey = 'root' | 'label' | 'list';
+```
+
+### ChatMessageSourceSlotProps
+
+```typescript
+type ChatMessageSourceSlotProps = {
+  root?: SlotComponentProps<'li', {}, {}>;
+  index?: SlotComponentProps<'span', {}, {}>;
+  link?: SlotComponentProps<'a', {}, {}>;
+};
+```
+
+### ChatMessageSourceSlots
+
+```typescript
+type ChatMessageSourceSlots = {
+  /**
+   * The root list item element.
+   * @default 'li'
+   */
+  root?: React.ElementType;
+  /**
+   * The numeric index badge.
+   * @default 'span'
+   */
+  index?: React.ElementType;
+  /**
+   * The anchor link.
+   * @default 'a'
+   */
+  link?: React.ElementType;
+};
+```
+
+### ChatMessageSourcesProps
+
+```typescript
+type ChatMessageSourcesProps = {
+  /**
+   * Label displayed above the list of sources.
+   * @default 'Sources'
+   */
+  label?: string;
+  children?: React.ReactNode;
+  className?: string;
+  classes?: Partial<ChatMessageSourcesClasses>;
+  slots?: ChatMessageSourcesSlots;
+  slotProps?: ChatMessageSourcesSlotProps;
+};
+```
+
+### ChatMessageSourcesSlotProps
+
+```typescript
+type ChatMessageSourcesSlotProps = {
+  root?: SlotComponentProps<'div', {}, {}>;
+  label?: SlotComponentProps<'p', {}, {}>;
+  list?: SlotComponentProps<'ol', {}, {}>;
+};
+```
+
+### ChatMessageSourcesSlots
+
+```typescript
+type ChatMessageSourcesSlots = {
+  /**
+   * The root container element.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * The label element shown above the list.
+   * @default 'p'
+   */
+  label?: React.ElementType;
+  /**
+   * The ordered list wrapping source items.
+   * @default 'ol'
+   */
+  list?: React.ElementType;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-message-sources.ts b/docs/pages/x/api/chat/types.chat-message-sources.ts
new file mode 100644
index 0000000000000..a04da675d1f31
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-message-sources.ts
@@ -0,0 +1,4 @@
+import { ChatMessageSources } from '@mui/x-chat/ChatMessageSources';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatMessageSources = createTypes(import.meta.url, ChatMessageSources);
diff --git a/docs/pages/x/api/chat/types.chat-provider.ts b/docs/pages/x/api/chat/types.chat-provider.ts
new file mode 100644
index 0000000000000..5ab22eaaf3840
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-provider.ts
@@ -0,0 +1,4 @@
+import { ChatProvider } from '/packages/x-chat-headless/src/ChatProvider.tsx';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatProvider = createTypes(import.meta.url, ChatProvider);
diff --git a/docs/pages/x/api/chat/types.chat-root.md b/docs/pages/x/api/chat/types.chat-root.md
new file mode 100644
index 0000000000000..11d454a2b60f0
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-root.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-root.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.chat-root.ts b/docs/pages/x/api/chat/types.chat-root.ts
new file mode 100644
index 0000000000000..da29f0fa504bb
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-root.ts
@@ -0,0 +1,4 @@
+import { ChatRoot } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatRoot = createTypes(import.meta.url, ChatRoot);
diff --git a/docs/pages/x/api/chat/types.chat-scroll-to-bottom-affordance.md b/docs/pages/x/api/chat/types.chat-scroll-to-bottom-affordance.md
new file mode 100644
index 0000000000000..4bd40318568a4
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-scroll-to-bottom-affordance.md
@@ -0,0 +1,243 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-scroll-to-bottom-affordance.md'
+
+## API Reference
+
+### ChatScrollToBottomAffordance
+
+**ChatScrollToBottomAffordance Props:**
+
+| Prop           | Type                                           | Default | Description |
+| :------------- | :--------------------------------------------- | :------ | :---------- |
+| classes        | `Partial<ChatScrollToBottomAffordanceClasses>` | -       | -           |
+| scrollBehavior | `ScrollBehavior`                               | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`            | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>`       | -       | -           |
+| className      | `string`                                       | -       | -           |
+
+### ChatTypingIndicator
+
+**ChatTypingIndicator Props:**
+
+| Prop      | Type                                  | Default | Description |
+| :-------- | :------------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatTypingIndicatorClasses>` | -       | -           |
+| slotProps | `TypingIndicatorSlotProps`            | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>`       | -       | -           |
+| className | `string`                              | -       | -           |
+
+### ChatUnreadMarker
+
+**ChatUnreadMarker Props:**
+
+| Prop        | Type                               | Default | Description |
+| :---------- | :--------------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`                  | -       | -           |
+| classes     | `Partial<ChatUnreadMarkerClasses>` | -       | -           |
+| index       | `number`                           | -       | -           |
+| items       | `string[]`                         | -       | -           |
+| messageId\* | `string`                           | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`            | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>`       | -       | -           |
+| className   | `string`                           | -       | -           |
+
+### getChatScrollToBottomAffordanceUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatTypingIndicatorUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatUnreadMarkerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatScrollToBottomAffordanceUtilityClasses
+
+**useChatScrollToBottomAffordanceUtilityClasses Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatScrollToBottomAffordanceClasses>` | -       | -           |
+
+**useChatScrollToBottomAffordanceUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatScrollToBottomAffordanceClasses;
+```
+
+### useChatTypingIndicatorUtilityClasses
+
+**useChatTypingIndicatorUtilityClasses Parameters:**
+
+| Parameter | Type                                  | Default | Description |
+| :-------- | :------------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatTypingIndicatorClasses>` | -       | -           |
+
+**useChatTypingIndicatorUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatTypingIndicatorClasses;
+```
+
+### useChatUnreadMarkerUtilityClasses
+
+**useChatUnreadMarkerUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatUnreadMarkerClasses>` | -       | -           |
+
+**useChatUnreadMarkerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatUnreadMarkerClasses;
+```
+
+## Additional Types
+
+### chatScrollToBottomAffordanceClasses
+
+```typescript
+type chatScrollToBottomAffordanceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatScrollToBottomAffordanceClasses
+
+```typescript
+type ChatScrollToBottomAffordanceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatScrollToBottomAffordanceClassKey
+
+```typescript
+type ChatScrollToBottomAffordanceClassKey = 'root';
+```
+
+### ChatScrollToBottomAffordanceProps
+
+```typescript
+type ChatScrollToBottomAffordanceProps = {
+  className?: string;
+  classes?: Partial<ChatScrollToBottomAffordanceClasses>;
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### chatTypingIndicatorClasses
+
+```typescript
+type chatTypingIndicatorClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatTypingIndicatorClasses
+
+```typescript
+type ChatTypingIndicatorClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatTypingIndicatorClassKey
+
+```typescript
+type ChatTypingIndicatorClassKey = 'root';
+```
+
+### ChatTypingIndicatorProps
+
+```typescript
+type ChatTypingIndicatorProps = {
+  className?: string;
+  classes?: Partial<ChatTypingIndicatorClasses>;
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### chatUnreadMarkerClasses
+
+```typescript
+type chatUnreadMarkerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+};
+```
+
+### ChatUnreadMarkerClasses
+
+```typescript
+type ChatUnreadMarkerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+};
+```
+
+### ChatUnreadMarkerClassKey
+
+```typescript
+type ChatUnreadMarkerClassKey = 'root' | 'label';
+```
+
+### ChatUnreadMarkerProps
+
+```typescript
+type ChatUnreadMarkerProps = {
+  className?: string;
+  classes?: Partial<ChatUnreadMarkerClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-scroll-to-bottom-affordance.ts b/docs/pages/x/api/chat/types.chat-scroll-to-bottom-affordance.ts
new file mode 100644
index 0000000000000..c9464b83767e4
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-scroll-to-bottom-affordance.ts
@@ -0,0 +1,4 @@
+import { ChatScrollToBottomAffordance } from '@mui/x-chat/ChatIndicators';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatScrollToBottomAffordance = createTypes(import.meta.url, ChatScrollToBottomAffordance);
diff --git a/docs/pages/x/api/chat/types.chat-suggestions.md b/docs/pages/x/api/chat/types.chat-suggestions.md
new file mode 100644
index 0000000000000..7b2a89aabf2a0
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-suggestions.md
@@ -0,0 +1,85 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-suggestions.md'
+
+## API Reference
+
+### ChatSuggestions
+
+**ChatSuggestions Props:**
+
+| Prop        | Type                              | Default | Description                                                                                               |
+| :---------- | :-------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                         | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| classes     | `Partial<ChatSuggestionsClasses>` | -       | -                                                                                                         |
+| slotProps   | `SuggestionsRootSlotProps`        | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>`   | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`    | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`                 | -       | -                                                                                                         |
+| className   | `string`                          | -       | -                                                                                                         |
+
+### getChatSuggestionsUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### chatSuggestionsClasses
+
+```typescript
+type chatSuggestionsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to each suggestion item. */
+  item: string;
+};
+```
+
+### ChatSuggestionsClasses
+
+```typescript
+type ChatSuggestionsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to each suggestion item. */
+  item: string;
+};
+```
+
+### ChatSuggestionsClassKey
+
+```typescript
+type ChatSuggestionsClassKey = 'root' | 'item';
+```
+
+### ChatSuggestionsProps
+
+```typescript
+type ChatSuggestionsProps = {
+  className?: string;
+  classes?: Partial<ChatSuggestionsClasses>;
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-suggestions.ts b/docs/pages/x/api/chat/types.chat-suggestions.ts
new file mode 100644
index 0000000000000..9e73db18dbccd
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-suggestions.ts
@@ -0,0 +1,4 @@
+import { ChatSuggestions } from '@mui/x-chat/ChatSuggestions';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatSuggestions = createTypes(import.meta.url, ChatSuggestions);
diff --git a/docs/pages/x/api/chat/types.chat-typing-indicator.md b/docs/pages/x/api/chat/types.chat-typing-indicator.md
new file mode 100644
index 0000000000000..9dba5f5ed7132
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-typing-indicator.md
@@ -0,0 +1,243 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-typing-indicator.md'
+
+## API Reference
+
+### ChatScrollToBottomAffordance
+
+**ChatScrollToBottomAffordance Props:**
+
+| Prop           | Type                                           | Default | Description |
+| :------------- | :--------------------------------------------- | :------ | :---------- |
+| classes        | `Partial<ChatScrollToBottomAffordanceClasses>` | -       | -           |
+| scrollBehavior | `ScrollBehavior`                               | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`            | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>`       | -       | -           |
+| className      | `string`                                       | -       | -           |
+
+### ChatTypingIndicator
+
+**ChatTypingIndicator Props:**
+
+| Prop      | Type                                  | Default | Description |
+| :-------- | :------------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatTypingIndicatorClasses>` | -       | -           |
+| slotProps | `TypingIndicatorSlotProps`            | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>`       | -       | -           |
+| className | `string`                              | -       | -           |
+
+### ChatUnreadMarker
+
+**ChatUnreadMarker Props:**
+
+| Prop        | Type                               | Default | Description |
+| :---------- | :--------------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`                  | -       | -           |
+| classes     | `Partial<ChatUnreadMarkerClasses>` | -       | -           |
+| index       | `number`                           | -       | -           |
+| items       | `string[]`                         | -       | -           |
+| messageId\* | `string`                           | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`            | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>`       | -       | -           |
+| className   | `string`                           | -       | -           |
+
+### getChatScrollToBottomAffordanceUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatTypingIndicatorUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatUnreadMarkerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatScrollToBottomAffordanceUtilityClasses
+
+**useChatScrollToBottomAffordanceUtilityClasses Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatScrollToBottomAffordanceClasses>` | -       | -           |
+
+**useChatScrollToBottomAffordanceUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatScrollToBottomAffordanceClasses;
+```
+
+### useChatTypingIndicatorUtilityClasses
+
+**useChatTypingIndicatorUtilityClasses Parameters:**
+
+| Parameter | Type                                  | Default | Description |
+| :-------- | :------------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatTypingIndicatorClasses>` | -       | -           |
+
+**useChatTypingIndicatorUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatTypingIndicatorClasses;
+```
+
+### useChatUnreadMarkerUtilityClasses
+
+**useChatUnreadMarkerUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatUnreadMarkerClasses>` | -       | -           |
+
+**useChatUnreadMarkerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatUnreadMarkerClasses;
+```
+
+## Additional Types
+
+### chatScrollToBottomAffordanceClasses
+
+```typescript
+type chatScrollToBottomAffordanceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatScrollToBottomAffordanceClasses
+
+```typescript
+type ChatScrollToBottomAffordanceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatScrollToBottomAffordanceClassKey
+
+```typescript
+type ChatScrollToBottomAffordanceClassKey = 'root';
+```
+
+### ChatScrollToBottomAffordanceProps
+
+```typescript
+type ChatScrollToBottomAffordanceProps = {
+  className?: string;
+  classes?: Partial<ChatScrollToBottomAffordanceClasses>;
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### chatTypingIndicatorClasses
+
+```typescript
+type chatTypingIndicatorClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatTypingIndicatorClasses
+
+```typescript
+type ChatTypingIndicatorClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatTypingIndicatorClassKey
+
+```typescript
+type ChatTypingIndicatorClassKey = 'root';
+```
+
+### ChatTypingIndicatorProps
+
+```typescript
+type ChatTypingIndicatorProps = {
+  className?: string;
+  classes?: Partial<ChatTypingIndicatorClasses>;
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### chatUnreadMarkerClasses
+
+```typescript
+type chatUnreadMarkerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+};
+```
+
+### ChatUnreadMarkerClasses
+
+```typescript
+type ChatUnreadMarkerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+};
+```
+
+### ChatUnreadMarkerClassKey
+
+```typescript
+type ChatUnreadMarkerClassKey = 'root' | 'label';
+```
+
+### ChatUnreadMarkerProps
+
+```typescript
+type ChatUnreadMarkerProps = {
+  className?: string;
+  classes?: Partial<ChatUnreadMarkerClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-typing-indicator.ts b/docs/pages/x/api/chat/types.chat-typing-indicator.ts
new file mode 100644
index 0000000000000..14cfeb905b226
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-typing-indicator.ts
@@ -0,0 +1,4 @@
+import { ChatTypingIndicator } from '@mui/x-chat/ChatIndicators';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatTypingIndicator = createTypes(import.meta.url, ChatTypingIndicator);
diff --git a/docs/pages/x/api/chat/types.chat-unread-marker.md b/docs/pages/x/api/chat/types.chat-unread-marker.md
new file mode 100644
index 0000000000000..6894421fef507
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-unread-marker.md
@@ -0,0 +1,243 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.chat-unread-marker.md'
+
+## API Reference
+
+### ChatScrollToBottomAffordance
+
+**ChatScrollToBottomAffordance Props:**
+
+| Prop           | Type                                           | Default | Description |
+| :------------- | :--------------------------------------------- | :------ | :---------- |
+| classes        | `Partial<ChatScrollToBottomAffordanceClasses>` | -       | -           |
+| scrollBehavior | `ScrollBehavior`                               | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`            | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>`       | -       | -           |
+| className      | `string`                                       | -       | -           |
+
+### ChatTypingIndicator
+
+**ChatTypingIndicator Props:**
+
+| Prop      | Type                                  | Default | Description |
+| :-------- | :------------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatTypingIndicatorClasses>` | -       | -           |
+| slotProps | `TypingIndicatorSlotProps`            | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>`       | -       | -           |
+| className | `string`                              | -       | -           |
+
+### ChatUnreadMarker
+
+**ChatUnreadMarker Props:**
+
+| Prop        | Type                               | Default | Description |
+| :---------- | :--------------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`                  | -       | -           |
+| classes     | `Partial<ChatUnreadMarkerClasses>` | -       | -           |
+| index       | `number`                           | -       | -           |
+| items       | `string[]`                         | -       | -           |
+| messageId\* | `string`                           | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`            | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>`       | -       | -           |
+| className   | `string`                           | -       | -           |
+
+### getChatScrollToBottomAffordanceUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatTypingIndicatorUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getChatUnreadMarkerUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useChatScrollToBottomAffordanceUtilityClasses
+
+**useChatScrollToBottomAffordanceUtilityClasses Parameters:**
+
+| Parameter | Type                                           | Default | Description |
+| :-------- | :--------------------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatScrollToBottomAffordanceClasses>` | -       | -           |
+
+**useChatScrollToBottomAffordanceUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatScrollToBottomAffordanceClasses;
+```
+
+### useChatTypingIndicatorUtilityClasses
+
+**useChatTypingIndicatorUtilityClasses Parameters:**
+
+| Parameter | Type                                  | Default | Description |
+| :-------- | :------------------------------------ | :------ | :---------- |
+| classes   | `Partial<ChatTypingIndicatorClasses>` | -       | -           |
+
+**useChatTypingIndicatorUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatTypingIndicatorClasses;
+```
+
+### useChatUnreadMarkerUtilityClasses
+
+**useChatUnreadMarkerUtilityClasses Parameters:**
+
+| Parameter | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| classes   | `Partial<ChatUnreadMarkerClasses>` | -       | -           |
+
+**useChatUnreadMarkerUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = ChatUnreadMarkerClasses;
+```
+
+## Additional Types
+
+### chatScrollToBottomAffordanceClasses
+
+```typescript
+type chatScrollToBottomAffordanceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatScrollToBottomAffordanceClasses
+
+```typescript
+type ChatScrollToBottomAffordanceClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatScrollToBottomAffordanceClassKey
+
+```typescript
+type ChatScrollToBottomAffordanceClassKey = 'root';
+```
+
+### ChatScrollToBottomAffordanceProps
+
+```typescript
+type ChatScrollToBottomAffordanceProps = {
+  className?: string;
+  classes?: Partial<ChatScrollToBottomAffordanceClasses>;
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### chatTypingIndicatorClasses
+
+```typescript
+type chatTypingIndicatorClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatTypingIndicatorClasses
+
+```typescript
+type ChatTypingIndicatorClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### ChatTypingIndicatorClassKey
+
+```typescript
+type ChatTypingIndicatorClassKey = 'root';
+```
+
+### ChatTypingIndicatorProps
+
+```typescript
+type ChatTypingIndicatorProps = {
+  className?: string;
+  classes?: Partial<ChatTypingIndicatorClasses>;
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### chatUnreadMarkerClasses
+
+```typescript
+type chatUnreadMarkerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+};
+```
+
+### ChatUnreadMarkerClasses
+
+```typescript
+type ChatUnreadMarkerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label element. */
+  label: string;
+};
+```
+
+### ChatUnreadMarkerClassKey
+
+```typescript
+type ChatUnreadMarkerClassKey = 'root' | 'label';
+```
+
+### ChatUnreadMarkerProps
+
+```typescript
+type ChatUnreadMarkerProps = {
+  className?: string;
+  classes?: Partial<ChatUnreadMarkerClasses>;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
diff --git a/docs/pages/x/api/chat/types.chat-unread-marker.ts b/docs/pages/x/api/chat/types.chat-unread-marker.ts
new file mode 100644
index 0000000000000..e28780254bd3b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.chat-unread-marker.ts
@@ -0,0 +1,4 @@
+import { ChatUnreadMarker } from '@mui/x-chat/ChatIndicators';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChatUnreadMarker = createTypes(import.meta.url, ChatUnreadMarker);
diff --git a/docs/pages/x/api/chat/types.composer-attach-button.md b/docs/pages/x/api/chat/types.composer-attach-button.md
new file mode 100644
index 0000000000000..9f1a8175476d8
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-attach-button.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-attach-button.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-attach-button.ts b/docs/pages/x/api/chat/types.composer-attach-button.ts
new file mode 100644
index 0000000000000..c95bfdcb7d781
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-attach-button.ts
@@ -0,0 +1,4 @@
+import { ComposerAttachButton } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerAttachButton = createTypes(import.meta.url, ComposerAttachButton);
diff --git a/docs/pages/x/api/chat/types.composer-attachment-list.md b/docs/pages/x/api/chat/types.composer-attachment-list.md
new file mode 100644
index 0000000000000..a0269aa60c87c
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-attachment-list.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-attachment-list.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-attachment-list.ts b/docs/pages/x/api/chat/types.composer-attachment-list.ts
new file mode 100644
index 0000000000000..3a6e7f8de235f
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-attachment-list.ts
@@ -0,0 +1,4 @@
+import { ComposerAttachmentList } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerAttachmentList = createTypes(import.meta.url, ComposerAttachmentList);
diff --git a/docs/pages/x/api/chat/types.composer-helper-text.md b/docs/pages/x/api/chat/types.composer-helper-text.md
new file mode 100644
index 0000000000000..512f17e69ce38
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-helper-text.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-helper-text.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-helper-text.ts b/docs/pages/x/api/chat/types.composer-helper-text.ts
new file mode 100644
index 0000000000000..22b6c47606c3a
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-helper-text.ts
@@ -0,0 +1,4 @@
+import { ComposerHelperText } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerHelperText = createTypes(import.meta.url, ComposerHelperText);
diff --git a/docs/pages/x/api/chat/types.composer-label.md b/docs/pages/x/api/chat/types.composer-label.md
new file mode 100644
index 0000000000000..10fc70028234d
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-label.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-label.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-label.ts b/docs/pages/x/api/chat/types.composer-label.ts
new file mode 100644
index 0000000000000..1d0298d90e4fa
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-label.ts
@@ -0,0 +1,4 @@
+import { ComposerLabel } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerLabel = createTypes(import.meta.url, ComposerLabel);
diff --git a/docs/pages/x/api/chat/types.composer-root.md b/docs/pages/x/api/chat/types.composer-root.md
new file mode 100644
index 0000000000000..23f8e346b6bec
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-root.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-root.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-root.ts b/docs/pages/x/api/chat/types.composer-root.ts
new file mode 100644
index 0000000000000..a0a0601bdac17
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-root.ts
@@ -0,0 +1,4 @@
+import { ComposerRoot } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerRoot = createTypes(import.meta.url, ComposerRoot);
diff --git a/docs/pages/x/api/chat/types.composer-send-button.md b/docs/pages/x/api/chat/types.composer-send-button.md
new file mode 100644
index 0000000000000..0caf35fa13200
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-send-button.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-send-button.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-send-button.ts b/docs/pages/x/api/chat/types.composer-send-button.ts
new file mode 100644
index 0000000000000..319fd82777a6a
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-send-button.ts
@@ -0,0 +1,4 @@
+import { ComposerSendButton } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerSendButton = createTypes(import.meta.url, ComposerSendButton);
diff --git a/docs/pages/x/api/chat/types.composer-text-area.md b/docs/pages/x/api/chat/types.composer-text-area.md
new file mode 100644
index 0000000000000..55cd186842771
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-text-area.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-text-area.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-text-area.ts b/docs/pages/x/api/chat/types.composer-text-area.ts
new file mode 100644
index 0000000000000..35b5bc2054bf8
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-text-area.ts
@@ -0,0 +1,4 @@
+import { ComposerTextArea } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerTextArea = createTypes(import.meta.url, ComposerTextArea);
diff --git a/docs/pages/x/api/chat/types.composer-toolbar.md b/docs/pages/x/api/chat/types.composer-toolbar.md
new file mode 100644
index 0000000000000..0c37b5d460e53
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-toolbar.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.composer-toolbar.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.composer-toolbar.ts b/docs/pages/x/api/chat/types.composer-toolbar.ts
new file mode 100644
index 0000000000000..c30015c35fb10
--- /dev/null
+++ b/docs/pages/x/api/chat/types.composer-toolbar.ts
@@ -0,0 +1,4 @@
+import { ComposerToolbar } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesComposerToolbar = createTypes(import.meta.url, ComposerToolbar);
diff --git a/docs/pages/x/api/chat/types.conversation-header-actions.md b/docs/pages/x/api/chat/types.conversation-header-actions.md
new file mode 100644
index 0000000000000..21d87ce31e65f
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-header-actions.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-header-actions.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-header-actions.ts b/docs/pages/x/api/chat/types.conversation-header-actions.ts
new file mode 100644
index 0000000000000..54e57d1424e31
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-header-actions.ts
@@ -0,0 +1,4 @@
+import { ConversationHeaderActions } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationHeaderActions = createTypes(import.meta.url, ConversationHeaderActions);
diff --git a/docs/pages/x/api/chat/types.conversation-header.md b/docs/pages/x/api/chat/types.conversation-header.md
new file mode 100644
index 0000000000000..2cf48debd9ef1
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-header.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-header.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-header.ts b/docs/pages/x/api/chat/types.conversation-header.ts
new file mode 100644
index 0000000000000..5a2f7c8f83c90
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-header.ts
@@ -0,0 +1,4 @@
+import { ConversationHeader } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationHeader = createTypes(import.meta.url, ConversationHeader);
diff --git a/docs/pages/x/api/chat/types.conversation-list-item-avatar.md b/docs/pages/x/api/chat/types.conversation-list-item-avatar.md
new file mode 100644
index 0000000000000..2edc57bf8680c
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-item-avatar.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-item-avatar.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-item-avatar.ts b/docs/pages/x/api/chat/types.conversation-list-item-avatar.ts
new file mode 100644
index 0000000000000..6ce65db20c8cf
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-item-avatar.ts
@@ -0,0 +1,4 @@
+import { ConversationListItemAvatar } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListItemAvatar = createTypes(import.meta.url, ConversationListItemAvatar);
diff --git a/docs/pages/x/api/chat/types.conversation-list-item.md b/docs/pages/x/api/chat/types.conversation-list-item.md
new file mode 100644
index 0000000000000..ebe99074a5a20
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-item.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-item.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-item.ts b/docs/pages/x/api/chat/types.conversation-list-item.ts
new file mode 100644
index 0000000000000..d105cb7f8ccd9
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-item.ts
@@ -0,0 +1,4 @@
+import { ConversationListItem } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListItem = createTypes(import.meta.url, ConversationListItem);
diff --git a/docs/pages/x/api/chat/types.conversation-list-preview.md b/docs/pages/x/api/chat/types.conversation-list-preview.md
new file mode 100644
index 0000000000000..4a2a2243df857
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-preview.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-preview.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-preview.ts b/docs/pages/x/api/chat/types.conversation-list-preview.ts
new file mode 100644
index 0000000000000..1e8df0ddc6719
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-preview.ts
@@ -0,0 +1,4 @@
+import { ConversationListPreview } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListPreview = createTypes(import.meta.url, ConversationListPreview);
diff --git a/docs/pages/x/api/chat/types.conversation-list-root.md b/docs/pages/x/api/chat/types.conversation-list-root.md
new file mode 100644
index 0000000000000..d5bfcd0b7a91c
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-root.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-root.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-root.ts b/docs/pages/x/api/chat/types.conversation-list-root.ts
new file mode 100644
index 0000000000000..ddd6fdbe9676e
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-root.ts
@@ -0,0 +1,4 @@
+import { ConversationListRoot } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListRoot = createTypes(import.meta.url, ConversationListRoot);
diff --git a/docs/pages/x/api/chat/types.conversation-list-timestamp.md b/docs/pages/x/api/chat/types.conversation-list-timestamp.md
new file mode 100644
index 0000000000000..4632bdf7eafe6
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-timestamp.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-timestamp.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-timestamp.ts b/docs/pages/x/api/chat/types.conversation-list-timestamp.ts
new file mode 100644
index 0000000000000..7d61f1ed53d42
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-timestamp.ts
@@ -0,0 +1,4 @@
+import { ConversationListTimestamp } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListTimestamp = createTypes(import.meta.url, ConversationListTimestamp);
diff --git a/docs/pages/x/api/chat/types.conversation-list-title.md b/docs/pages/x/api/chat/types.conversation-list-title.md
new file mode 100644
index 0000000000000..2d64026c92f2a
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-title.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-title.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-title.ts b/docs/pages/x/api/chat/types.conversation-list-title.ts
new file mode 100644
index 0000000000000..9e2b75f41a03b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-title.ts
@@ -0,0 +1,4 @@
+import { ConversationListTitle } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListTitle = createTypes(import.meta.url, ConversationListTitle);
diff --git a/docs/pages/x/api/chat/types.conversation-list-unread-badge.md b/docs/pages/x/api/chat/types.conversation-list-unread-badge.md
new file mode 100644
index 0000000000000..f5b775fa5ae81
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-unread-badge.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-list-unread-badge.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-list-unread-badge.ts b/docs/pages/x/api/chat/types.conversation-list-unread-badge.ts
new file mode 100644
index 0000000000000..cdfba611e990b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-list-unread-badge.ts
@@ -0,0 +1,4 @@
+import { ConversationListUnreadBadge } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationListUnreadBadge = createTypes(import.meta.url, ConversationListUnreadBadge);
diff --git a/docs/pages/x/api/chat/types.conversation-root.md b/docs/pages/x/api/chat/types.conversation-root.md
new file mode 100644
index 0000000000000..3d066882387a2
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-root.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-root.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-root.ts b/docs/pages/x/api/chat/types.conversation-root.ts
new file mode 100644
index 0000000000000..d91cdc30cf039
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-root.ts
@@ -0,0 +1,4 @@
+import { ConversationRoot } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationRoot = createTypes(import.meta.url, ConversationRoot);
diff --git a/docs/pages/x/api/chat/types.conversation-subtitle.md b/docs/pages/x/api/chat/types.conversation-subtitle.md
new file mode 100644
index 0000000000000..586151f3080cc
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-subtitle.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-subtitle.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-subtitle.ts b/docs/pages/x/api/chat/types.conversation-subtitle.ts
new file mode 100644
index 0000000000000..99a4e65a5c2aa
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-subtitle.ts
@@ -0,0 +1,4 @@
+import { ConversationSubtitle } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationSubtitle = createTypes(import.meta.url, ConversationSubtitle);
diff --git a/docs/pages/x/api/chat/types.conversation-title.md b/docs/pages/x/api/chat/types.conversation-title.md
new file mode 100644
index 0000000000000..262939b94a1a7
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-title.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.conversation-title.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.conversation-title.ts b/docs/pages/x/api/chat/types.conversation-title.ts
new file mode 100644
index 0000000000000..29f382ee6553c
--- /dev/null
+++ b/docs/pages/x/api/chat/types.conversation-title.ts
@@ -0,0 +1,4 @@
+import { ConversationTitle } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesConversationTitle = createTypes(import.meta.url, ConversationTitle);
diff --git a/docs/pages/x/api/chat/types.message-actions.md b/docs/pages/x/api/chat/types.message-actions.md
new file mode 100644
index 0000000000000..07ff41006aa8a
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-actions.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-actions.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-actions.ts b/docs/pages/x/api/chat/types.message-actions.ts
new file mode 100644
index 0000000000000..1e4d3357311a1
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-actions.ts
@@ -0,0 +1,4 @@
+import { MessageActions } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageActions = createTypes(import.meta.url, MessageActions);
diff --git a/docs/pages/x/api/chat/types.message-author-label.md b/docs/pages/x/api/chat/types.message-author-label.md
new file mode 100644
index 0000000000000..017a8d569d9fc
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-author-label.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-author-label.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-author-label.ts b/docs/pages/x/api/chat/types.message-author-label.ts
new file mode 100644
index 0000000000000..08fe9ecf511a8
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-author-label.ts
@@ -0,0 +1,4 @@
+import { MessageAuthorLabel } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageAuthorLabel = createTypes(import.meta.url, MessageAuthorLabel);
diff --git a/docs/pages/x/api/chat/types.message-avatar.md b/docs/pages/x/api/chat/types.message-avatar.md
new file mode 100644
index 0000000000000..86c1baa6740f7
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-avatar.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-avatar.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-avatar.ts b/docs/pages/x/api/chat/types.message-avatar.ts
new file mode 100644
index 0000000000000..1a13fa98fc849
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-avatar.ts
@@ -0,0 +1,4 @@
+import { MessageAvatar } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageAvatar = createTypes(import.meta.url, MessageAvatar);
diff --git a/docs/pages/x/api/chat/types.message-content.md b/docs/pages/x/api/chat/types.message-content.md
new file mode 100644
index 0000000000000..6aac7cd828f5f
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-content.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-content.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-content.ts b/docs/pages/x/api/chat/types.message-content.ts
new file mode 100644
index 0000000000000..1a475c72d9844
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-content.ts
@@ -0,0 +1,4 @@
+import { MessageContent } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageContent = createTypes(import.meta.url, MessageContent);
diff --git a/docs/pages/x/api/chat/types.message-group.md b/docs/pages/x/api/chat/types.message-group.md
new file mode 100644
index 0000000000000..c7acacb0d8d21
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-group.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-group.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-group.ts b/docs/pages/x/api/chat/types.message-group.ts
new file mode 100644
index 0000000000000..92ea0264483cf
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-group.ts
@@ -0,0 +1,4 @@
+import { MessageGroup } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageGroup = createTypes(import.meta.url, MessageGroup);
diff --git a/docs/pages/x/api/chat/types.message-list-date-divider.md b/docs/pages/x/api/chat/types.message-list-date-divider.md
new file mode 100644
index 0000000000000..87ce4b0f30532
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-list-date-divider.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-list-date-divider.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-list-date-divider.ts b/docs/pages/x/api/chat/types.message-list-date-divider.ts
new file mode 100644
index 0000000000000..a87647313529d
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-list-date-divider.ts
@@ -0,0 +1,4 @@
+import { MessageListDateDivider } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageListDateDivider = createTypes(import.meta.url, MessageListDateDivider);
diff --git a/docs/pages/x/api/chat/types.message-list-root.md b/docs/pages/x/api/chat/types.message-list-root.md
new file mode 100644
index 0000000000000..c1c6bf2c75abf
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-list-root.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-list-root.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-list-root.ts b/docs/pages/x/api/chat/types.message-list-root.ts
new file mode 100644
index 0000000000000..bd1473075a206
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-list-root.ts
@@ -0,0 +1,4 @@
+import { MessageListRoot } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageListRoot = createTypes(import.meta.url, MessageListRoot);
diff --git a/docs/pages/x/api/chat/types.message-meta.md b/docs/pages/x/api/chat/types.message-meta.md
new file mode 100644
index 0000000000000..78205bc14ad01
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-meta.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-meta.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-meta.ts b/docs/pages/x/api/chat/types.message-meta.ts
new file mode 100644
index 0000000000000..40ca864d5f813
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-meta.ts
@@ -0,0 +1,4 @@
+import { MessageMeta } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageMeta = createTypes(import.meta.url, MessageMeta);
diff --git a/docs/pages/x/api/chat/types.message-root.md b/docs/pages/x/api/chat/types.message-root.md
new file mode 100644
index 0000000000000..11c4cac291148
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-root.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.message-root.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.message-root.ts b/docs/pages/x/api/chat/types.message-root.ts
new file mode 100644
index 0000000000000..987c760dea35e
--- /dev/null
+++ b/docs/pages/x/api/chat/types.message-root.ts
@@ -0,0 +1,4 @@
+import { MessageRoot } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMessageRoot = createTypes(import.meta.url, MessageRoot);
diff --git a/docs/pages/x/api/chat/types.scroll-to-bottom-affordance.md b/docs/pages/x/api/chat/types.scroll-to-bottom-affordance.md
new file mode 100644
index 0000000000000..d44037c80b80c
--- /dev/null
+++ b/docs/pages/x/api/chat/types.scroll-to-bottom-affordance.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.scroll-to-bottom-affordance.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.scroll-to-bottom-affordance.ts b/docs/pages/x/api/chat/types.scroll-to-bottom-affordance.ts
new file mode 100644
index 0000000000000..a851719eb71f5
--- /dev/null
+++ b/docs/pages/x/api/chat/types.scroll-to-bottom-affordance.ts
@@ -0,0 +1,4 @@
+import { ScrollToBottomAffordance } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesScrollToBottomAffordance = createTypes(import.meta.url, ScrollToBottomAffordance);
diff --git a/docs/pages/x/api/chat/types.typing-indicator.md b/docs/pages/x/api/chat/types.typing-indicator.md
new file mode 100644
index 0000000000000..5cd696c44736b
--- /dev/null
+++ b/docs/pages/x/api/chat/types.typing-indicator.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.typing-indicator.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.typing-indicator.ts b/docs/pages/x/api/chat/types.typing-indicator.ts
new file mode 100644
index 0000000000000..5f5be494fc7f2
--- /dev/null
+++ b/docs/pages/x/api/chat/types.typing-indicator.ts
@@ -0,0 +1,4 @@
+import { TypingIndicator } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTypingIndicator = createTypes(import.meta.url, TypingIndicator);
diff --git a/docs/pages/x/api/chat/types.unread-marker.md b/docs/pages/x/api/chat/types.unread-marker.md
new file mode 100644
index 0000000000000..4d97a12431312
--- /dev/null
+++ b/docs/pages/x/api/chat/types.unread-marker.md
@@ -0,0 +1,4682 @@
+# Chat
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/chat/types.unread-marker.md'
+
+## API Reference
+
+### ChatDensityProvider
+
+Provides the chat density to all descendant message components.
+Controls vertical spacing without prop drilling.
+
+**ChatDensityProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| density\*  | `ChatDensity`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ChatLayout
+
+**ChatLayout Props:**
+
+| Prop      | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| slotProps | `ChatLayoutSlotProps`      | -       | -           |
+| slots     | `Partial<ChatLayoutSlots>` | -       | -           |
+| children  | `React.ReactNode`          | -       | -           |
+
+### ChatOnData
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| part      | `ChatDataMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnFinish
+
+**Parameters:**
+
+| Parameter | Type                  | Default | Description |
+| :-------- | :-------------------- | :------ | :---------- |
+| payload   | `ChatOnFinishPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatOnToolCall
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| payload   | `ChatOnToolCallPayload` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = void | Promise<void>;
+```
+
+### ChatPartRenderer
+
+**ChatPartRenderer Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatBuiltInMessagePart` | -       | -           |
+
+### ChatProvider
+
+**ChatProvider Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                          |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                          |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                           |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                            |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                           |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                            |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                      |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                          |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                          |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                          |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                          |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                          |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                          |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                          |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                  |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                      |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                          |
+
+### ChatRoot
+
+**ChatRoot Props:**
+
+| Prop                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     | Description                                                                                                                                                                                                                                                                                                                                                                        |
+| :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeConversationId        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| adapter\*                   | `ChatAdapter<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| composerValue               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| conversations               | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| currentUser                 | `ChatUser`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -           | The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`.                                                                                                                                                                                                                                                                   |
+| density                     | `ChatDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The vertical spacing density of chat messages.&#xA;When provided, wraps descendant components with `ChatDensityProvider`. `'compact'` – Reduced vertical spacing between messages.`'standard'` – Default spacing.`'comfortable'` – Increased vertical spacing between messages.                                                                                                    |
+| initialActiveConversationId | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided.                                                                                                                                                                                                                                                    |
+| initialComposerValue        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided.                                                                                                                                                                                                                                                                   |
+| initialConversations        | `ChatConversation[]`                                                                                                                                                                                                                                                                                                                                                                                                                                              | -           | The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided.                                                                                                                                                                                                                                                                    |
+| initialMessages             | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided.                                                                                                                                                                                                                                                                              |
+| localeText                  | `Partial<ChatLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| members                     | `ChatUser[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly.                                                                                                                                                                                                                         |
+| messages                    | `ChatMessage[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onActiveConversationChange  | `((conversationId?: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onComposerValueChange       | `((value: string) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                       | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onConversationsChange       | `((conversations: ChatConversation[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                   | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onData                      | `ChatOnData`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                     | `((error: ChatError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onFinish                    | `ChatOnFinish`                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onMessagesChange            | `((messages: ChatMessage[]) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                             | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| onToolCall                  | `ChatOnToolCall`                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| partRenderers               | `Partial<{ text: ChatPartRenderer<ChatTextMessagePart>; reasoning: ChatPartRenderer<ChatReasoningMessagePart>; file: ChatPartRenderer<ChatFileMessagePart>; 'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>; 'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>; 'step-start': ChatPartRenderer<ChatStepStartMessagePart>; tool: ChatPartRenderer<ChatToolMessagePart>; 'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart> }>` | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slotProps                   | `ChatRootSlotProps`                                                                                                                                                                                                                                                                                                                                                                                                                                               | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| slots                       | `Partial<ChatRootSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                          | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+| storeClass                  | `ChatStoreConstructor<Cursor>`                                                                                                                                                                                                                                                                                                                                                                                                                                    | `ChatStore` | The store class to use for this provider.                                                                                                                                                                                                                                                                                                                                          |
+| streamFlushInterval         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `16`        | Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.                                                                                                                                                                                                                                                                              |
+| variant                     | `ChatVariant`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -           | The visual layout variant of the chat.&#xA;When provided, wraps descendant components with `ChatVariantProvider`&#xA;so message and conversation components can respond to the variant. `'default'` – Standard layout with avatars, individual timestamps, and full spacing.`'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing. |
+| children                    | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -           | -                                                                                                                                                                                                                                                                                                                                                                                  |
+
+### ChatStreamError
+
+A typed error thrown by the stream processor when a handled stream failure occurs.
+Carries the `ChatError` that was already set in the store via `failStream()`.
+Callers can distinguish stream failures from unexpected bugs via `instanceof ChatStreamError`.
+
+**Static Methods:**
+
+```typescript
+function isError(error: unknown): boolean;
+```
+
+Indicates whether the argument provided is a built-in Error instance or not.
+
+```typescript
+function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void;
+```
+
+Creates a `.stack` property on `targetObject`, which when accessed returns
+a string representing the location in the code at which
+`Error.captureStackTrace()` was called.
+
+```js
+const myObject = {};
+Error.captureStackTrace(myObject);
+myObject.stack;  // Similar to `new Error().stack`
+```
+
+The first line of the trace will be prefixed with
+`${myObject.name}: ${myObject.message}`.
+
+The optional `constructorOpt` argument accepts a function. If given, all frames
+above `constructorOpt`, including `constructorOpt`, will be omitted from the
+generated stack trace.
+
+The `constructorOpt` argument is useful for hiding implementation
+details of error generation from the user. For instance:
+
+```js
+function a() {
+  b();
+}
+
+function b() {
+  c();
+}
+
+function c() {
+  // Create an error without stack trace to avoid calculating the stack trace twice.
+  const { stackTraceLimit } = Error;
+  Error.stackTraceLimit = 0;
+  const error = new Error();
+  Error.stackTraceLimit = stackTraceLimit;
+
+  // Capture the stack trace above function b
+  Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace
+  throw error;
+}
+
+a();
+```
+
+```typescript
+function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
+```
+
+**Constructor Parameters:**
+
+| Parameter | Type        | Default | Description |
+| :-------- | :---------- | :------ | :---------- |
+| chatError | `ChatError` | -       | -           |
+
+**Properties:**
+
+| Property        | Type                                                                                                                                              | Modifiers | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chatError       | `{ code: ChatErrorCode; message: string; source: ChatErrorSource; recoverable: boolean; retryable?: boolean; details?: Record<string, unknown> }` | readonly  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| name            | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| message         | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stack?          | `string`                                                                                                                                          | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| cause?          | `unknown`                                                                                                                                         | -         | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| stackTraceLimit | `number`                                                                                                                                          | static    | The `Error.stackTraceLimit` property specifies the number of stack frames&#xA;collected by a stack trace (whether generated by `new Error().stack` or&#xA;`Error.captureStackTrace(obj)`). The default value is `10` but may be set to any valid JavaScript number. Changes&#xA;will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will&#xA;not capture any frames. |
+
+### ChatVariantProvider
+
+Provides the chat variant to all descendant message components.
+Controls how messages are laid out without prop drilling.
+
+**ChatVariantProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| variant\*  | `ChatVariant`     | -       | -           |
+| children\* | `React.ReactNode` | -       | -           |
+
+### ComposerAttachButton
+
+**ComposerAttachButton Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachButtonSlots>` | -       | -           |
+
+### ComposerAttachmentList
+
+**ComposerAttachmentList Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ComposerAttachmentListSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerAttachmentListSlots>` | -       | -           |
+
+### ComposerHelperText
+
+**ComposerHelperText Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerHelperTextSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerHelperTextSlots>` | -       | -           |
+
+### ComposerLabel
+
+A `<label>` element for the conversation input textarea.
+
+Pair this with `Composer.TextArea` to create a proper
+label-for-input association. This lets screen readers announce the
+label when the textarea receives focus, and lets users click the label
+to focus the textarea.
+
+```tsx
+const textareaId = useId();
+
+<Composer.Root>
+  <Composer.Label htmlFor={textareaId}>Ask anything</Composer.Label>
+  <Composer.TextArea id={textareaId} />
+</Composer.Root>;
+```
+
+When `children` is omitted the label text falls back to the locale
+string `composerInputAriaLabel` — the same default used by the textarea's
+own `aria-label` — so you get consistent announcements without duplication.
+In that case you may want to visually hide the label while keeping it in
+the accessibility tree (e.g. via a `.sr-only` utility class).
+
+**ComposerLabel Props:**
+
+| Prop      | Type                          | Default | Description                                                                                                                                                                                                                                                                  |
+| :-------- | :---------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| htmlFor   | `string`                      | -       | The `id` of the textarea this label is associated with.&#xA;Passed directly to the native `htmlFor` attribute.&#xA;When provided, the label is semantically linked to the textarea so that&#xA;clicking the label focuses the input and screen readers announce it on focus. |
+| slotProps | `ComposerLabelSlotProps`      | -       | -                                                                                                                                                                                                                                                                            |
+| slots     | `Partial<ComposerLabelSlots>` | -       | -                                                                                                                                                                                                                                                                            |
+| children  | `React.ReactNode`             | -       | Label text. Falls back to the locale text `composerInputAriaLabel` when&#xA;omitted, so the default is consistent with the textarea's `aria-label`.                                                                                                                          |
+
+### ComposerRoot
+
+**ComposerRoot Props:**
+
+| Prop             | Type                         | Default | Description                                                                                                                 |
+| :--------------- | :--------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| attachmentConfig | `ChatAttachmentsConfig`      | -       | Configuration for attachment validation constraints.&#xA;When provided, file attachments are validated against these rules. |
+| slotProps        | `ComposerRootSlotProps`      | -       | -                                                                                                                           |
+| slots            | `Partial<ComposerRootSlots>` | -       | -                                                                                                                           |
+| disabled         | `boolean`                    | -       | -                                                                                                                           |
+
+### ComposerSendButton
+
+**ComposerSendButton Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ComposerSendButtonSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerSendButtonSlots>` | -       | -           |
+
+### ComposerTextArea
+
+**ComposerTextArea Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ComposerTextAreaSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerTextAreaSlots>` | -       | -           |
+
+### ComposerToolbar
+
+**ComposerToolbar Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `ComposerToolbarSlotProps`      | -       | -           |
+| slots     | `Partial<ComposerToolbarSlots>` | -       | -           |
+
+### ConversationHeader
+
+**ConversationHeader Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderSlots>` | -       | -           |
+| children  | `React.ReactNode`                  | -       | -           |
+
+### ConversationHeaderActions
+
+**ConversationHeaderActions Props:**
+
+| Prop      | Type                                      | Default | Description |
+| :-------- | :---------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderActionsSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderActionsSlots>` | -       | -           |
+| children  | `React.ReactNode`                         | -       | -           |
+
+### ConversationHeaderInfo
+
+**ConversationHeaderInfo Props:**
+
+| Prop      | Type                                   | Default | Description |
+| :-------- | :------------------------------------- | :------ | :---------- |
+| slotProps | `ConversationHeaderInfoSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationHeaderInfoSlots>` | -       | -           |
+| children  | `React.ReactNode`                      | -       | -           |
+
+### ConversationListItem
+
+**ConversationListItem Props:**
+
+| Prop           | Type                                 | Default | Description |
+| :------------- | :----------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                   | -       | -           |
+| focused        | `boolean`                            | -       | -           |
+| selected       | `boolean`                            | -       | -           |
+| slotProps      | `ConversationListItemSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemSlots>` | -       | -           |
+| unread         | `boolean`                            | -       | -           |
+| children       | `React.ReactNode`                    | -       | -           |
+
+### ConversationListItemActions
+
+**ConversationListItemActions Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemActionsSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemActionsSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListItemAvatar
+
+**ConversationListItemAvatar Props:**
+
+| Prop           | Type                                       | Default | Description |
+| :------------- | :----------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                         | -       | -           |
+| focused        | `boolean`                                  | -       | -           |
+| selected       | `boolean`                                  | -       | -           |
+| slotProps      | `ConversationListItemAvatarSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemAvatarSlots>` | -       | -           |
+| unread         | `boolean`                                  | -       | -           |
+
+### ConversationListItemContent
+
+**ConversationListItemContent Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListItemContentSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListItemContentSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationListPreview
+
+**ConversationListPreview Props:**
+
+| Prop           | Type                                    | Default | Description |
+| :------------- | :-------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                      | -       | -           |
+| focused        | `boolean`                               | -       | -           |
+| selected       | `boolean`                               | -       | -           |
+| slotProps      | `ConversationListPreviewSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListPreviewSlots>` | -       | -           |
+| unread         | `boolean`                               | -       | -           |
+
+### ConversationListRoot
+
+**ConversationListRoot Props:**
+
+| Prop      | Type                                 | Default     | Description                                                                                                                                                                                               |
+| :-------- | :----------------------------------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| slotProps | `ConversationListRootSlotProps`      | -           | -                                                                                                                                                                                                         |
+| slots     | `Partial<ConversationListRootSlots>` | -           | -                                                                                                                                                                                                         |
+| variant   | `ConversationListVariant`            | `'default'` | The visual variant of the conversation list. `'default'` – shows avatar, title, preview, timestamp, and unread badge.`'compact'` – shows only a small unread indicator, the title, and an actions button. |
+
+### ConversationListTimestamp
+
+**ConversationListTimestamp Props:**
+
+| Prop           | Type                                      | Default | Description |
+| :------------- | :---------------------------------------- | :------ | :---------- |
+| conversation\* | `ChatConversation`                        | -       | -           |
+| focused        | `boolean`                                 | -       | -           |
+| selected       | `boolean`                                 | -       | -           |
+| slotProps      | `ConversationListTimestampSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTimestampSlots>` | -       | -           |
+| unread         | `boolean`                                 | -       | -           |
+
+### ConversationListTitle
+
+**ConversationListTitle Props:**
+
+| Prop           | Type                                  | Default | Description |
+| :------------- | :------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                    | -       | -           |
+| focused        | `boolean`                             | -       | -           |
+| selected       | `boolean`                             | -       | -           |
+| slotProps      | `ConversationListTitleSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListTitleSlots>` | -       | -           |
+| unread         | `boolean`                             | -       | -           |
+
+### ConversationListUnreadBadge
+
+**ConversationListUnreadBadge Props:**
+
+| Prop           | Type                                        | Default | Description |
+| :------------- | :------------------------------------------ | :------ | :---------- |
+| conversation\* | `ChatConversation`                          | -       | -           |
+| focused        | `boolean`                                   | -       | -           |
+| selected       | `boolean`                                   | -       | -           |
+| slotProps      | `ConversationListUnreadBadgeSlotProps`      | -       | -           |
+| slots          | `Partial<ConversationListUnreadBadgeSlots>` | -       | -           |
+| unread         | `boolean`                                   | -       | -           |
+
+### ConversationRoot
+
+**ConversationRoot Props:**
+
+| Prop      | Type                             | Default | Description |
+| :-------- | :------------------------------- | :------ | :---------- |
+| slotProps | `ConversationRootSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationRootSlots>` | -       | -           |
+| children  | `React.ReactNode`                | -       | -           |
+
+### ConversationSubtitle
+
+**ConversationSubtitle Props:**
+
+| Prop      | Type                                 | Default | Description |
+| :-------- | :----------------------------------- | :------ | :---------- |
+| slotProps | `ConversationSubtitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationSubtitleSlots>` | -       | -           |
+
+### ConversationTitle
+
+**ConversationTitle Props:**
+
+| Prop      | Type                              | Default | Description |
+| :-------- | :-------------------------------- | :------ | :---------- |
+| slotProps | `ConversationTitleSlotProps`      | -       | -           |
+| slots     | `Partial<ConversationTitleSlots>` | -       | -           |
+
+### createFilePartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `FilePartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatFileMessagePart>;
+```
+
+### createReasoningPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `ReasoningPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatReasoningMessagePart>;
+```
+
+### createSourceDocumentPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                              | Default | Description |
+| :------------ | :-------------------------------- | :------ | :---------- |
+| defaultProps? | `SourceDocumentPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceDocumentMessagePart>;
+```
+
+### createSourceUrlPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                         | Default | Description |
+| :------------ | :--------------------------- | :------ | :---------- |
+| defaultProps? | `SourceUrlPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ChatSourceUrlMessagePart>;
+```
+
+### createTimeWindowGroupKey
+
+Creates a `groupKey` function that groups messages by author within a sliding
+time window. Messages from the same author sent more than `windowMs` milliseconds
+apart will start a new group.
+
+**Parameters:**
+
+| Parameter | Type     | Default  | Description                                                           |
+| :-------- | :------- | :------- | :-------------------------------------------------------------------- |
+| windowMs? | `number` | `300000` | The grouping window in milliseconds. Defaults to 300 000 (5 minutes). |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = GroupKeyFn;
+```
+
+### createToolPartRenderer
+
+**Parameters:**
+
+| Parameter     | Type                    | Default | Description |
+| :------------ | :---------------------- | :------ | :---------- |
+| defaultProps? | `ToolPartExternalProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<ToolPart>;
+```
+
+### FilePart
+
+**FilePart Props:**
+
+| Prop       | Type                     | Default | Description |
+| :--------- | :----------------------- | :------ | :---------- |
+| index\*    | `number`                 | -       | -           |
+| message\*  | `ChatMessage`            | -       | -           |
+| onToolCall | `ChatOnToolCall`         | -       | -           |
+| part\*     | `ChatFileMessagePart`    | -       | -           |
+| slotProps  | `FilePartSlotProps`      | -       | -           |
+| slots      | `Partial<FilePartSlots>` | -       | -           |
+| className  | `string`                 | -       | -           |
+
+### getDefaultMessagePartRenderer
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| part      | `ChatBuiltInMessagePart` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<any> | null;
+```
+
+### GroupKeyFn
+
+A function that maps a message to a group key.
+Messages that resolve to the same key are visually grouped together
+(shared avatar, author name, etc.).
+
+**Parameters:**
+
+| Parameter | Type          | Default | Description |
+| :-------- | :------------ | :------ | :---------- |
+| message   | `ChatMessage` | -       | -           |
+
+**Return Value:**
+
+The group key for the message.
+
+```tsx
+type ReturnValue = string | number;
+```
+
+### MessageActions
+
+**MessageActions Props:**
+
+| Prop      | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| slotProps | `MessageActionsSlotProps`      | -       | -           |
+| slots     | `Partial<MessageActionsSlots>` | -       | -           |
+
+### MessageActionsMenuGroup
+
+### MessageActionsMenuGroupLabel
+
+### MessageActionsMenuItem
+
+### MessageActionsMenuPopup
+
+### MessageActionsMenuPositioner
+
+### MessageActionsMenuRoot
+
+### MessageActionsMenuTrigger
+
+### MessageAuthorLabel
+
+**MessageAuthorLabel Props:**
+
+| Prop      | Type                               | Default | Description |
+| :-------- | :--------------------------------- | :------ | :---------- |
+| slotProps | `MessageAuthorLabelSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAuthorLabelSlots>` | -       | -           |
+
+### MessageAvatar
+
+**MessageAvatar Props:**
+
+| Prop      | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| slotProps | `MessageAvatarSlotProps`      | -       | -           |
+| slots     | `Partial<MessageAvatarSlots>` | -       | -           |
+
+### MessageContent
+
+**MessageContent Props:**
+
+| Prop                       | Type                                                                                       | Default | Description                                                                                                                                        |
+| :------------------------- | :----------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| afterContent               | `React.ReactNode`                                                                          | -       | Content rendered inside the bubble after the message parts.&#xA;Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.     |
+| partProps                  | `MessageContentPartProps`                                                                  | -       | Props forwarded to the built-in unstyled part renderer components.&#xA;Use this to pass `slots` and `slotProps` to individual part type renderers. |
+| resolveBuiltInPartRenderer | `((part: ChatBuiltInMessagePart, localeText: ChatLocaleText) => ChatPartRenderer \| null)` | -       | -                                                                                                                                                  |
+| slotProps                  | `MessageContentSlotProps`                                                                  | -       | -                                                                                                                                                  |
+| slots                      | `Partial<MessageContentSlots>`                                                             | -       | -                                                                                                                                                  |
+
+### MessageGroup
+
+**MessageGroup Props:**
+
+| Prop        | Type                         | Default                                                 | Description                                                                                                                                                                                                                             |
+| :---------- | :--------------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| groupKey    | `GroupKeyFn`                 | `(message) => message.author?.id ?? message.role ?? ''` | A function that maps a message to a group key.&#xA;Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).&#xA;Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping. |
+| index       | `number`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| items       | `string[]`                   | -                                                       | -                                                                                                                                                                                                                                       |
+| messageId\* | `string`                     | -                                                       | -                                                                                                                                                                                                                                       |
+| slotProps   | `MessageGroupSlotProps`      | -                                                       | -                                                                                                                                                                                                                                       |
+| slots       | `Partial<MessageGroupSlots>` | -                                                       | -                                                                                                                                                                                                                                       |
+| children    | `React.ReactNode`            | -                                                       | -                                                                                                                                                                                                                                       |
+
+### MessageListDateDivider
+
+**MessageListDateDivider Props:**
+
+| Prop        | Type                                   | Default | Description |
+| :---------- | :------------------------------------- | :------ | :---------- |
+| formatDate  | `((date: Date) => React.ReactNode)`    | -       | -           |
+| index       | `number`                               | -       | -           |
+| items       | `string[]`                             | -       | -           |
+| messageId\* | `string`                               | -       | -           |
+| slotProps   | `MessageListDateDividerSlotProps`      | -       | -           |
+| slots       | `Partial<MessageListDateDividerSlots>` | -       | -           |
+
+### MessageListRoot
+
+**MessageListRoot Props:**
+
+| Prop              | Type                                         | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :---------------- | :------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoScroll        | `boolean \| MessageListRootAutoScrollConfig` | `true`  | Controls automatic scrolling to the bottom when new messages arrive or&#xA;streaming content grows, as long as the user is within `buffer` pixels of&#xA;the bottom. `true` – enable with the default buffer (150 px).`{ buffer: number }` – enable with a custom threshold.`false` – disable (the scroll-to-bottom affordance is still available). Scrolling when the _user_ sends a message is always active. |
+| estimatedItemSize | `number`                                     | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| getItemKey        | `((id: string, index: number) => React.Key)` | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| items             | `string[]`                                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onReachTop        | `(() => void)`                               | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| overlay           | `React.ReactNode`                            | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| renderItem\*      | `renderItem`                                 | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slotProps         | `MessageListRootSlotProps`                   | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots             | `Partial<MessageListRootSlots>`              | -       | -                                                                                                                                                                                                                                                                                                                                                                                                               |
+
+### MessageMeta
+
+**MessageMeta Props:**
+
+| Prop      | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| slotProps | `MessageMetaSlotProps`      | -       | -           |
+| slots     | `Partial<MessageMetaSlots>` | -       | -           |
+
+### MessageRoot
+
+**MessageRoot Props:**
+
+| Prop        | Type                        | Default | Description |
+| :---------- | :-------------------------- | :------ | :---------- |
+| isGrouped   | `boolean`                   | -       | -           |
+| messageId\* | `string`                    | -       | -           |
+| slotProps   | `MessageRootSlotProps`      | -       | -           |
+| slots       | `Partial<MessageRootSlots>` | -       | -           |
+
+### ReasoningPart
+
+**ReasoningPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatReasoningMessagePart`    | -       | -           |
+| slotProps  | `ReasoningPartSlotProps`      | -       | -           |
+| slots      | `Partial<ReasoningPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### ScrollToBottomAffordance
+
+**ScrollToBottomAffordance Props:**
+
+| Prop           | Type                                     | Default | Description |
+| :------------- | :--------------------------------------- | :------ | :---------- |
+| scrollBehavior | `ScrollBehavior`                         | -       | -           |
+| slotProps      | `ScrollToBottomAffordanceSlotProps`      | -       | -           |
+| slots          | `Partial<ScrollToBottomAffordanceSlots>` | -       | -           |
+
+### selectActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectActiveConversationId
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string | undefined;
+```
+
+### selectComposerAttachments
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatDraftAttachment[];
+```
+
+### selectComposerValue
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### selectConversation
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | undefined;
+```
+
+### selectConversationCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectConversationIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectConversations
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### selectConversationsById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatConversation>;
+```
+
+### selectError
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatError | null;
+```
+
+### selectHasMoreHistory
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectIsStreaming
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = boolean;
+```
+
+### selectMessage
+
+**Parameters:**
+
+| Parameter | Type              | Default | Description |
+| :-------- | :---------------- | :------ | :---------- |
+| args      | `[State, string]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | undefined;
+```
+
+### selectMessageCount
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = number;
+```
+
+### selectMessageIds
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectMessages
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage[];
+```
+
+### selectMessagesById
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = Record<string, ChatMessage>;
+```
+
+### selectTypingUserIds
+
+**Parameters:**
+
+| Parameter | Type                           | Default | Description |
+| :-------- | :----------------------------- | :------ | :---------- |
+| args      | `[State, string \| undefined]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### selectTypingUserIdsForActiveConversation
+
+**Parameters:**
+
+| Parameter | Type      | Default | Description |
+| :-------- | :-------- | :------ | :---------- |
+| args      | `[State]` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### SourceDocumentPart
+
+**SourceDocumentPart Props:**
+
+| Prop       | Type                               | Default | Description |
+| :--------- | :--------------------------------- | :------ | :---------- |
+| index\*    | `number`                           | -       | -           |
+| message\*  | `ChatMessage`                      | -       | -           |
+| onToolCall | `ChatOnToolCall`                   | -       | -           |
+| part\*     | `ChatSourceDocumentMessagePart`    | -       | -           |
+| slotProps  | `SourceDocumentPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceDocumentPartSlots>` | -       | -           |
+| className  | `string`                           | -       | -           |
+
+### SourceUrlPart
+
+**SourceUrlPart Props:**
+
+| Prop       | Type                          | Default | Description |
+| :--------- | :---------------------------- | :------ | :---------- |
+| index\*    | `number`                      | -       | -           |
+| message\*  | `ChatMessage`                 | -       | -           |
+| onToolCall | `ChatOnToolCall`              | -       | -           |
+| part\*     | `ChatSourceUrlMessagePart`    | -       | -           |
+| slotProps  | `SourceUrlPartSlotProps`      | -       | -           |
+| slots      | `Partial<SourceUrlPartSlots>` | -       | -           |
+| className  | `string`                      | -       | -           |
+
+### SuggestionItem
+
+**SuggestionItem Props:**
+
+| Prop      | Type                           | Default | Description                                                             |
+| :-------- | :----------------------------- | :------ | :---------------------------------------------------------------------- |
+| label     | `string`                       | -       | Display label. Falls back to `value`.                                   |
+| value\*   | `string`                       | -       | The value to pre-fill into the composer when the suggestion is clicked. |
+| index     | `number`                       | -       | The index of this item within the suggestions list.                     |
+| slotProps | `SuggestionItemSlotProps`      | -       | -                                                                       |
+| slots     | `Partial<SuggestionItemSlots>` | -       | -                                                                       |
+| children  | `React.ReactNode`              | -       | -                                                                       |
+
+### SuggestionsRoot
+
+**SuggestionsRoot Props:**
+
+| Prop        | Type                            | Default | Description                                                                                               |
+| :---------- | :------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------- |
+| autoSubmit  | `boolean`                       | `false` | Whether to auto-submit when a suggestion is clicked.                                                      |
+| slotProps   | `SuggestionsRootSlotProps`      | -       | -                                                                                                         |
+| slots       | `Partial<SuggestionsRootSlots>` | -       | -                                                                                                         |
+| suggestions | `(string \| ChatSuggestion)[]`  | -       | Suggestion items. Strings are normalized to `{ value, label }`.&#xA;Ignored when `children` are provided. |
+| children    | `React.ReactNode`               | -       | -                                                                                                         |
+
+### ToolPart
+
+**ToolPart Props:**
+
+| Prop          | Type                                     | Default | Description                                                                                              |
+| :------------ | :--------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| index\*       | `number`                                 | -       | -                                                                                                        |
+| message\*     | `ChatMessage`                            | -       | -                                                                                                        |
+| onToolCall    | `ChatOnToolCall`                         | -       | -                                                                                                        |
+| part\*        | `ToolPart`                               | -       | -                                                                                                        |
+| slotProps     | `ToolPartSlotProps`                      | -       | -                                                                                                        |
+| slots         | `Partial<ToolPartSlots>`                 | -       | -                                                                                                        |
+| toolSlotProps | `Record<string, ToolPartSlotProps>`      | -       | Per-tool-name slotProps overrides, merged on top of `slotProps`.&#xA;Keyed by `toolInvocation.toolName`. |
+| toolSlots     | `Record<string, Partial<ToolPartSlots>>` | -       | Per-tool-name slot overrides, merged on top of `slots`.&#xA;Keyed by `toolInvocation.toolName`.          |
+| className     | `string`                                 | -       | -                                                                                                        |
+
+**`toolSlots` Prop Example:**
+
+```tsx
+toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+```
+
+### TypingIndicator
+
+**TypingIndicator Props:**
+
+| Prop      | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| slotProps | `TypingIndicatorSlotProps`      | -       | -           |
+| slots     | `Partial<TypingIndicatorSlots>` | -       | -           |
+
+### UnreadMarker
+
+**UnreadMarker Props:**
+
+| Prop        | Type                         | Default | Description |
+| :---------- | :--------------------------- | :------ | :---------- |
+| label       | `React.ReactNode`            | -       | -           |
+| index       | `number`                     | -       | -           |
+| items       | `string[]`                   | -       | -           |
+| messageId\* | `string`                     | -       | -           |
+| slotProps   | `UnreadMarkerSlotProps`      | -       | -           |
+| slots       | `Partial<UnreadMarkerSlots>` | -       | -           |
+
+### useChat
+
+**useChat Return Value:**
+
+```tsx
+type ReturnValue = UseChatValue<Cursor>;
+```
+
+### useChatComposer
+
+**useChatComposer Return Value:**
+
+```tsx
+type ReturnValue = UseChatComposerValue;
+```
+
+### useChatDensity
+
+Returns the current chat density from the nearest [`ChatDensityProvider`](#chatdensityprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply spacing-specific ownerState.
+
+**useChatDensity Return Value:**
+
+```tsx
+type ReturnValue = ChatDensity;
+```
+
+### useChatLocaleText
+
+**useChatLocaleText Return Value:**
+
+```tsx
+type ReturnValue = ChatLocaleText;
+```
+
+### useChatOnToolCall
+
+**useChatOnToolCall Return Value:**
+
+```tsx
+type ReturnValue = ChatOnToolCall | undefined;
+```
+
+### useChatPartRenderer
+
+**useChatPartRenderer Parameters:**
+
+| Parameter | Type                                                                                                                      | Default | Description |
+| :-------- | :------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| partType  | `'text' \| 'reasoning' \| 'file' \| 'source-url' \| 'source-document' \| 'step-start' \| 'tool' \| 'dynamic-tool' \| any` | -       | -           |
+
+**useChatPartRenderer Return Value:**
+
+```tsx
+type ReturnValue = ChatPartRenderer<
+  | Extract<
+      ChatTextMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatReasoningMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFileMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceUrlMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatSourceDocumentMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatFallbackDataMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatStepStartMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+  | Extract<
+      ChatDynamicToolMessagePart,
+      {
+        type:
+          | 'text'
+          | 'reasoning'
+          | 'file'
+          | 'source-url'
+          | 'source-document'
+          | 'step-start'
+          | 'tool'
+          | 'dynamic-tool'
+          | any;
+      }
+    >
+> | null;
+```
+
+### useChatStatus
+
+**useChatStatus Return Value:**
+
+```tsx
+type ReturnValue = UseChatStatusValue;
+```
+
+### useChatStore
+
+**useChatStore Return Value:**
+
+```tsx
+type ReturnValue = ChatStore<Cursor>;
+```
+
+### useChatVariant
+
+Returns the current chat variant from the nearest [`ChatVariantProvider`](#chatvariantprovider).
+Consumed by `MessageRoot` and `MessageGroup` to apply layout-specific ownerState.
+
+**useChatVariant Return Value:**
+
+```tsx
+type ReturnValue = ChatVariant;
+```
+
+### useComposerContext
+
+**useComposerContext Return Value:**
+
+```tsx
+type ReturnValue = ComposerContextValue;
+```
+
+### useConversation
+
+**useConversation Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useConversation Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation | null;
+```
+
+### useConversations
+
+**useConversations Return Value:**
+
+```tsx
+type ReturnValue = ChatConversation[];
+```
+
+### useMessage
+
+**useMessage Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| id        | `string` | -       | -           |
+
+**useMessage Return Value:**
+
+```tsx
+type ReturnValue = ChatMessage | null;
+```
+
+### useMessageIds
+
+**useMessageIds Return Value:**
+
+```tsx
+type ReturnValue = string[];
+```
+
+### useMessageListContext
+
+**useMessageListContext Return Value:**
+
+```tsx
+type ReturnValue = MessageListContextValue;
+```
+
+## Additional Types
+
+### Chat
+
+```typescript
+type Chat = { Root: ChatRootComponent; Layout: ChatLayoutComponent };
+```
+
+### ChatAdapter
+
+```typescript
+type ChatAdapter<Cursor = string> = {
+  listConversations?: listConversations;
+  listMessages?: listMessages;
+  sendMessage: sendMessage;
+  reconnectToStream?: reconnectToStream;
+  setTyping?: setTyping;
+  markRead?: markRead;
+  subscribe?: subscribe;
+  /**
+   * @deprecated
+   * Use `listMessages` with `direction: 'backward'` instead.
+   * `loadMoreHistory` now prefers `listMessages` for consistency with initial
+   * message loading. `loadMore` is kept for backward compatibility only.
+   * @see
+   */
+  loadMore?: loadMore;
+  addToolApprovalResponse?: addToolApprovalResponse;
+  stop?: stop;
+};
+```
+
+### ChatAddToolApproveResponseInput
+
+```typescript
+type ChatAddToolApproveResponseInput = { id: string; approved: boolean; reason?: string };
+```
+
+### ChatAttachmentRejection
+
+```typescript
+type ChatAttachmentRejection = { file: File; reason: ChatAttachmentRejectionReason };
+```
+
+### ChatAttachmentRejectionReason
+
+```typescript
+type ChatAttachmentRejectionReason = 'mime-type' | 'file-size' | 'file-count';
+```
+
+### ChatAttachmentsConfig
+
+```typescript
+type ChatAttachmentsConfig = {
+  /**
+   * Accepted MIME types for file attachments.
+   * Supports exact types (e.g. `'application/pdf'`) and wildcard
+   * subtypes (e.g. `'image/*'`). File extension patterns (e.g. `'.pdf'`)
+   * are **not** supported — use MIME types only.
+   * @default undefined (all file types accepted)
+   */
+  acceptedMimeTypes?: string[];
+  /**
+   * Maximum number of files that can be attached to a single message.
+   * @default undefined (unlimited)
+   */
+  maxFileCount?: number;
+  /**
+   * Maximum size of each file in bytes.
+   * @default undefined (unlimited)
+   */
+  maxFileSize?: number;
+  /**
+   * Callback invoked when one or more files are rejected during attachment.
+   * Receives an array of rejection objects describing which files failed
+   * and why.
+   */
+  onAttachmentReject?: (rejections: ChatAttachmentRejection[]) => void;
+};
+```
+
+### ChatBuiltInMessagePart
+
+```typescript
+type ChatBuiltInMessagePart =
+  | ChatTextMessagePart
+  | ChatReasoningMessagePart
+  | ChatFileMessagePart
+  | ChatSourceUrlMessagePart
+  | ChatSourceDocumentMessagePart
+  | ChatDataMessagePart
+  | ChatStepStartMessagePart
+  | ChatToolMessagePart
+  | ChatDynamicToolMessagePart;
+```
+
+### ChatConversation
+
+```typescript
+type ChatConversation = {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  /** Optional avatar URL for the conversation. When provided, this takes precedence over participant avatars in the conversation list. */
+  avatarUrl?: string;
+  participants?: ChatUser[];
+  unreadCount?: number;
+  readState?: ConversationReadState;
+  lastMessageAt?: ChatDateTimeString;
+  metadata?: ChatConversationMetadata;
+};
+```
+
+### ChatCustomMessagePart
+
+```typescript
+type ChatCustomMessagePart = never;
+```
+
+### ChatDataMessagePart
+
+```typescript
+type ChatDataMessagePart = { type: any; id?: string; data: unknown; transient?: boolean };
+```
+
+### ChatDataPartType
+
+```typescript
+type ChatDataPartType = any;
+```
+
+### ChatDateTimeString
+
+```typescript
+type ChatDateTimeString = string;
+```
+
+### ChatDensity
+
+Density for vertical spacing between chat messages.
+
+- `'compact'`: Reduced vertical spacing between messages.
+- `'standard'`: Default spacing.
+- `'comfortable'`: Increased vertical spacing between messages.
+
+```typescript
+type ChatDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### ChatDraftAttachment
+
+```typescript
+type ChatDraftAttachment = {
+  localId: string;
+  file: File;
+  previewUrl?: string;
+  status: ChatDraftAttachmentStatus;
+  progress?: number;
+};
+```
+
+### ChatDraftAttachmentStatus
+
+```typescript
+type ChatDraftAttachmentStatus = 'queued' | 'uploading' | 'uploaded' | 'error';
+```
+
+### ChatDynamicToolInvocation
+
+```typescript
+type ChatDynamicToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatDynamicToolMessagePart
+
+```typescript
+type ChatDynamicToolMessagePart<TToolName extends string = string> = {
+  type: 'dynamic-tool';
+  toolInvocation: ChatDynamicToolInvocation<TToolName>;
+};
+```
+
+### ChatError
+
+```typescript
+type ChatError = {
+  code: ChatErrorCode;
+  message: string;
+  source: ChatErrorSource;
+  recoverable: boolean;
+  retryable?: boolean;
+  details?: Record<string, unknown>;
+};
+```
+
+### ChatErrorCode
+
+```typescript
+type ChatErrorCode = 'HISTORY_ERROR' | 'SEND_ERROR' | 'STREAM_ERROR' | 'REALTIME_ERROR';
+```
+
+### ChatFileMessagePart
+
+```typescript
+type ChatFileMessagePart = { type: 'file'; mediaType: string; url: string; filename?: string };
+```
+
+### ChatLayoutOwnerState
+
+```typescript
+type ChatLayoutOwnerState = { hasConversationsPane: boolean; hasThreadPane: boolean };
+```
+
+### ChatLayoutPaneOwnerState
+
+```typescript
+type ChatLayoutPaneOwnerState = { pane: ChatLayoutPaneKind };
+```
+
+### ChatLayoutProps
+
+```typescript
+type ChatLayoutProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ChatLayoutSlots>;
+  slotProps?: ChatLayoutSlotProps;
+};
+```
+
+### ChatLayoutSlotProps
+
+```typescript
+type ChatLayoutSlotProps = {
+  root?: SlotComponentProps<'div', {}, ChatLayoutOwnerState>;
+  conversationsPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+  threadPane?: SlotComponentProps<'div', {}, ChatLayoutPaneOwnerState>;
+};
+```
+
+### ChatLayoutSlots
+
+```typescript
+type ChatLayoutSlots = {
+  root: React.ElementType;
+  conversationsPane: React.ElementType;
+  threadPane: React.ElementType;
+};
+```
+
+### ChatLocaleText
+
+```typescript
+type ChatLocaleText = {
+  composerInputPlaceholder: string;
+  composerInputAriaLabel: string;
+  composerSendButtonLabel: string;
+  composerAttachButtonLabel: string;
+  composerAttachInputLabel: string;
+  messageCopyButtonLabel: string;
+  messageCopyCodeButtonLabel: string;
+  messageCopiedCodeButtonLabel: string;
+  messageEditedLabel: string;
+  messageDeletedLabel: string;
+  messageReasoningLabel: string;
+  messageReasoningStreamingLabel: string;
+  messageToolInputLabel: string;
+  messageToolOutputLabel: string;
+  messageToolApproveButtonLabel: string;
+  messageToolDenyButtonLabel: string;
+  conversationListNoConversationsLabel: string;
+  conversationListSearchPlaceholder: string;
+  unreadMarkerLabel: string;
+  retryButtonLabel: string;
+  reconnectButtonLabel: string;
+  scrollToBottomLabel: string;
+  threadNoMessagesLabel: string;
+  threadNoMessagesHelperText: string;
+  genericErrorLabel: string;
+  loadingLabel: string;
+  messageStatusLabel: messageStatusLabel;
+  toolStateLabel: toolStateLabel;
+  messageTimestampLabel: messageTimestampLabel;
+  conversationTimestampLabel: conversationTimestampLabel;
+  typingIndicatorLabel: typingIndicatorLabel;
+  scrollToBottomWithCountLabel: scrollToBottomWithCountLabel;
+  suggestionsLabel: string;
+  messageListLabel: string;
+  messageLabel: string;
+  conversationHeaderMenuLabel: string;
+  conversationHeaderNewChatLabel: string;
+  conversationHeaderSettingsLabel: string;
+};
+```
+
+### ChatLocaleTypingUser
+
+```typescript
+type ChatLocaleTypingUser = { id: string; displayName?: string };
+```
+
+### ChatMessage
+
+```typescript
+type ChatMessage = {
+  id: string;
+  conversationId?: string;
+  role: ChatRole;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  createdAt?: ChatDateTimeString;
+  updatedAt?: ChatDateTimeString;
+  status?: ChatMessageStatus;
+  author?: ChatUser;
+  editedAt?: ChatDateTimeString;
+};
+```
+
+### ChatMessageChunk
+
+```typescript
+type ChatMessageChunk =
+  | ChatStartMessageChunk
+  | ChatFinishMessageChunk
+  | ChatAbortMessageChunk
+  | ChatTextStartChunk
+  | ChatTextDeltaChunk
+  | ChatTextEndChunk
+  | ChatReasoningStartChunk
+  | ChatReasoningDeltaChunk
+  | ChatReasoningEndChunk
+  | ChatToolInputStartChunk
+  | ChatToolInputDeltaChunk
+  | ChatToolInputAvailableChunk
+  | ChatToolInputErrorChunk
+  | ChatToolApprovalRequestChunk
+  | ChatToolOutputAvailableChunk
+  | ChatToolOutputErrorChunk
+  | ChatToolOutputDeniedChunk
+  | ChatSourceUrlChunk
+  | ChatSourceDocumentChunk
+  | ChatFileChunk
+  | ChatDataChunk
+  | ChatStartStepChunk
+  | ChatFinishStepChunk
+  | ChatMessageMetadataChunk;
+```
+
+### ChatMessagePart
+
+```typescript
+type ChatMessagePart = ChatBuiltInMessagePart;
+```
+
+### ChatMessagePartStatus
+
+```typescript
+type ChatMessagePartStatus = 'streaming' | 'done';
+```
+
+### ChatMessageStatus
+
+```typescript
+type ChatMessageStatus =
+  | 'pending'
+  | 'sending'
+  | 'streaming'
+  | 'sent'
+  | 'read'
+  | 'error'
+  | 'cancelled';
+```
+
+### ChatOnFinishPayload
+
+```typescript
+type ChatOnFinishPayload = {
+  message: ChatMessage;
+  messages: ChatMessage[];
+  isAbort: boolean;
+  isDisconnect: boolean;
+  isError: boolean;
+  finishReason?: string;
+};
+```
+
+### ChatOnToolCallPayload
+
+```typescript
+type ChatOnToolCallPayload = { toolCall: ChatToolInvocation | ChatDynamicToolInvocation };
+```
+
+### ChatPartRendererMap
+
+```typescript
+type ChatPartRendererMap = {
+  text?: ChatPartRenderer<ChatTextMessagePart>;
+  reasoning?: ChatPartRenderer<ChatReasoningMessagePart>;
+  file?: ChatPartRenderer<ChatFileMessagePart>;
+  'source-url'?: ChatPartRenderer<ChatSourceUrlMessagePart>;
+  'source-document'?: ChatPartRenderer<ChatSourceDocumentMessagePart>;
+  'step-start'?: ChatPartRenderer<ChatStepStartMessagePart>;
+  tool?: ChatPartRenderer<ChatToolMessagePart>;
+  'dynamic-tool'?: ChatPartRenderer<ChatDynamicToolMessagePart>;
+};
+```
+
+### ChatPartRendererProps
+
+```typescript
+type ChatPartRendererProps<TPart extends ChatBuiltInMessagePart = ChatBuiltInMessagePart> = {
+  part: TPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ChatProviderProps
+
+```typescript
+type ChatProviderProps<Cursor = string> = {
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatPublicState
+
+```typescript
+type ChatPublicState<Cursor = string> = {
+  conversations: ChatConversation[];
+  activeConversationId?: string;
+  messages: ChatMessage[];
+  messageCount: number;
+  isStreaming: boolean;
+  hasMoreHistory: boolean;
+  historyCursor?: Cursor;
+  error: ChatError | null;
+};
+```
+
+### ChatRealtimeEvent
+
+```typescript
+type ChatRealtimeEvent =
+  | { type: 'conversation-added'; conversation: ChatConversation }
+  | { type: 'conversation-updated'; conversation: ChatConversation }
+  | { type: 'conversation-removed'; conversationId: string }
+  | { type: 'message-added'; message: ChatMessage }
+  | { type: 'message-updated'; message: ChatMessage }
+  | { type: 'message-removed'; messageId: string; conversationId?: string }
+  | { type: 'typing'; conversationId: string; userId: string; isTyping: boolean }
+  | { type: 'presence'; userId: string; isOnline: boolean }
+  | { type: 'read'; conversationId: string; messageId?: string; userId?: string };
+```
+
+### ChatReasoningMessagePart
+
+```typescript
+type ChatReasoningMessagePart = { type: 'reasoning'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatRole
+
+```typescript
+type ChatRole = 'system' | 'user' | 'assistant';
+```
+
+### ChatRootOwnerState
+
+```typescript
+type ChatRootOwnerState = {};
+```
+
+### ChatRootProps
+
+```typescript
+type ChatRootProps<Cursor = string> = {
+  localeText?: Partial<ChatLocaleText>;
+  /**
+   * The visual layout variant of the chat.
+   * When provided, wraps descendant components with `ChatVariantProvider`
+   * so message and conversation components can respond to the variant.
+   * - `'default'` – Standard layout with avatars, individual timestamps, and full spacing.
+   * - `'compact'` – Messenger-style layout: no avatars, author + timestamp in group header, tighter spacing.
+   */
+  variant?: ChatVariant;
+  /**
+   * The vertical spacing density of chat messages.
+   * When provided, wraps descendant components with `ChatDensityProvider`.
+   * - `'compact'` – Reduced vertical spacing between messages.
+   * - `'standard'` – Default spacing.
+   * - `'comfortable'` – Increased vertical spacing between messages.
+   */
+  density?: ChatDensity;
+  slots?: Partial<ChatRootSlots>;
+  slotProps?: ChatRootSlotProps;
+  children?: React.ReactNode;
+  adapter: ChatAdapter<Cursor>;
+  onToolCall?: ChatOnToolCall;
+  onFinish?: ChatOnFinish;
+  onData?: ChatOnData;
+  onError?: (error: ChatError) => void;
+  /**
+   * Flush interval in milliseconds for batching rapid streaming deltas before applying them to the store.
+   * @default 16
+   */
+  streamFlushInterval?: number;
+  partRenderers?: Partial<{
+    text: ChatPartRenderer<ChatTextMessagePart>;
+    reasoning: ChatPartRenderer<ChatReasoningMessagePart>;
+    file: ChatPartRenderer<ChatFileMessagePart>;
+    'source-url': ChatPartRenderer<ChatSourceUrlMessagePart>;
+    'source-document': ChatPartRenderer<ChatSourceDocumentMessagePart>;
+    'step-start': ChatPartRenderer<ChatStepStartMessagePart>;
+    tool: ChatPartRenderer<ChatToolMessagePart>;
+    'dynamic-tool': ChatPartRenderer<ChatDynamicToolMessagePart>;
+  }>;
+  /**
+   * The store class to use for this provider.
+   * @default ChatStore
+   */
+  storeClass?: ChatStoreConstructor<Cursor>;
+  /** All participants in the chat. The current (local) user is derived as the first member with `role === 'user'`, unless `currentUser` is provided explicitly. */
+  members?: ChatUser[];
+  /** The local user sending messages. If omitted, derived from `members` by finding the entry with `role === 'user'`. */
+  currentUser?: ChatUser;
+  messages?: ChatMessage[];
+  /** The initial messages when uncontrolled. Ignored after initialization and when `messages` is provided. */
+  initialMessages?: ChatMessage[];
+  onMessagesChange?: (messages: ChatMessage[]) => void;
+  conversations?: ChatConversation[];
+  /** The initial conversations when uncontrolled. Ignored after initialization and when `conversations` is provided. */
+  initialConversations?: ChatConversation[];
+  onConversationsChange?: (conversations: ChatConversation[]) => void;
+  activeConversationId?: string;
+  /** The initial active conversation ID when uncontrolled. Ignored after initialization and when `activeConversationId` is provided. */
+  initialActiveConversationId?: string;
+  onActiveConversationChange?: (conversationId?: string) => void;
+  composerValue?: string;
+  /** The initial composer value when uncontrolled. Ignored after initialization and when `composerValue` is provided. */
+  initialComposerValue?: string;
+  onComposerValueChange?: (value: string) => void;
+};
+```
+
+### ChatRootSlotProps
+
+```typescript
+type ChatRootSlotProps = { root?: SlotComponentProps<'div', {}, ChatRootOwnerState> };
+```
+
+### ChatRootSlots
+
+```typescript
+type ChatRootSlots = { root: React.ElementType };
+```
+
+### chatSelectors
+
+```typescript
+type chatSelectors = {
+  messageIds: (args: [State]) => string[];
+  messagesById: (args: [State]) => Record<string, ChatMessage>;
+  conversationIds: (args: [State]) => string[];
+  conversationsById: (args: [State]) => Record<string, ChatConversation>;
+  activeConversationId: (args: [State]) => string | undefined;
+  isStreaming: (args: [State]) => boolean;
+  hasMoreHistory: (args: [State]) => boolean;
+  error: (args: [State]) => ChatError | null;
+  messages: (args: [State]) => ChatMessage[];
+  message: (args: [State, string]) => ChatMessage | undefined;
+  conversations: (args: [State]) => ChatConversation[];
+  conversation: (args: [State, string]) => ChatConversation | undefined;
+  activeConversation: (args: [State]) => ChatConversation | undefined;
+  messageCount: (args: [State]) => number;
+  conversationCount: (args: [State]) => number;
+  composerValue: (args: [State]) => string;
+  composerAttachments: (args: [State]) => ChatDraftAttachment[];
+  /**
+   * Returns the IDs of users currently typing in the given conversation.
+   * If no conversationId argument is provided, falls back to the active conversation.
+   */
+  typingUserIds: (args?: [State, string | undefined]) => string[];
+  /**
+   * Returns the IDs of users currently typing in the active conversation.
+   * Use this instead of `typingUserIds(state, undefined)` to avoid creating an inline wrapper
+   * function that would defeat memoization.
+   */
+  typingUserIdsForActiveConversation: (args: [State]) => string[];
+};
+```
+
+### ChatSourceDocumentMessagePart
+
+```typescript
+type ChatSourceDocumentMessagePart = {
+  type: 'source-document';
+  sourceId: string;
+  title?: string;
+  text?: string;
+};
+```
+
+### ChatSourceUrlMessagePart
+
+```typescript
+type ChatSourceUrlMessagePart = {
+  type: 'source-url';
+  sourceId: string;
+  url: string;
+  title?: string;
+};
+```
+
+### ChatStepStartMessagePart
+
+```typescript
+type ChatStepStartMessagePart = { type: 'step-start' };
+```
+
+### ChatStreamEnvelope
+
+```typescript
+type ChatStreamEnvelope = { eventId?: string; sequence?: number; chunk: ChatMessageChunk };
+```
+
+### ChatSuggestion
+
+```typescript
+type ChatSuggestion = {
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value` if omitted. */
+  label?: string;
+};
+```
+
+### ChatTextMessagePart
+
+```typescript
+type ChatTextMessagePart = { type: 'text'; text: string; state?: ChatMessagePartStatus };
+```
+
+### ChatToolApproval
+
+```typescript
+type ChatToolApproval = { approved: boolean; reason?: string };
+```
+
+### ChatToolInvocation
+
+```typescript
+type ChatToolInvocation<TToolName extends string = string> = {
+  toolCallId: string;
+  toolName: TToolName;
+  state: ChatToolInvocationState;
+  input?: unknown | TInput;
+  output?: unknown | TOutput;
+  errorText?: string;
+  approval?: ChatToolApproval;
+  providerExecuted?: boolean;
+  title?: string;
+  callProviderMetadata?: Record<string, unknown>;
+  preliminary?: boolean;
+};
+```
+
+### ChatToolInvocationState
+
+```typescript
+type ChatToolInvocationState =
+  | 'input-streaming'
+  | 'input-available'
+  | 'approval-requested'
+  | 'approval-responded'
+  | 'output-available'
+  | 'output-error'
+  | 'output-denied';
+```
+
+### ChatToolMessagePart
+
+```typescript
+type ChatToolMessagePart<TToolName extends string = string> = {
+  type: 'tool';
+  toolInvocation: ChatToolInvocation<TToolName>;
+};
+```
+
+### ChatUser
+
+```typescript
+type ChatUser = {
+  id: string;
+  displayName?: string;
+  avatarUrl?: string;
+  isOnline?: boolean;
+  /** The role this user plays in the conversation. Use `'user'` for the local human sender and `'assistant'` for AI participants. */
+  role?: ChatRole;
+  metadata?: ChatUserMetadata;
+};
+```
+
+### ChatVariant
+
+Variant for the chat message display layout.
+
+- `'default'`: Standard layout with avatar, content, and message meta
+- `'compact'`: Condensed layout with reduced spacing
+
+```typescript
+type ChatVariant = 'default' | 'compact';
+```
+
+### Composer
+
+```typescript
+type Composer = {
+  Root: ComposerRootComponent;
+  TextArea: ComposerTextAreaComponent;
+  SendButton: ComposerSendButtonComponent;
+  AttachButton: ComposerAttachButtonComponent;
+  AttachmentList: ComposerAttachmentListComponent;
+  Toolbar: ComposerToolbarComponent;
+  HelperText: ComposerHelperTextComponent;
+};
+```
+
+### ComposerAttachButtonOwnerState
+
+```typescript
+type ComposerAttachButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachButtonProps
+
+```typescript
+type ComposerAttachButtonProps = {
+  slots?: Partial<ComposerAttachButtonSlots>;
+  slotProps?: ComposerAttachButtonSlotProps;
+};
+```
+
+### ComposerAttachButtonSlotProps
+
+```typescript
+type ComposerAttachButtonSlotProps = {
+  attachButton?: SlotComponentProps<'button', {}, ComposerAttachButtonOwnerState>;
+  attachInput?: SlotComponentProps<'input', {}, ComposerAttachButtonOwnerState>;
+};
+```
+
+### ComposerAttachButtonSlots
+
+```typescript
+type ComposerAttachButtonSlots = {
+  attachButton: React.ElementType;
+  attachInput: React.ElementType;
+};
+```
+
+### ComposerAttachmentListOwnerState
+
+```typescript
+type ComposerAttachmentListOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerAttachmentListProps
+
+```typescript
+type ComposerAttachmentListProps = {
+  slots?: Partial<ComposerAttachmentListSlots>;
+  slotProps?: ComposerAttachmentListSlotProps;
+};
+```
+
+### ComposerAttachmentListSlotProps
+
+```typescript
+type ComposerAttachmentListSlotProps = {
+  attachmentList?: SlotComponentProps<'div', {}, ComposerAttachmentListOwnerState>;
+};
+```
+
+### ComposerAttachmentListSlots
+
+```typescript
+type ComposerAttachmentListSlots = { attachmentList: React.ElementType };
+```
+
+### ComposerHelperTextOwnerState
+
+```typescript
+type ComposerHelperTextOwnerState = {
+  /** Whether the input currently has an error. */
+  error: boolean;
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerHelperTextProps
+
+```typescript
+type ComposerHelperTextProps = {
+  slots?: Partial<ComposerHelperTextSlots>;
+  slotProps?: ComposerHelperTextSlotProps;
+};
+```
+
+### ComposerHelperTextSlotProps
+
+```typescript
+type ComposerHelperTextSlotProps = {
+  helperText?: SlotComponentProps<'div', {}, ComposerHelperTextOwnerState>;
+};
+```
+
+### ComposerHelperTextSlots
+
+```typescript
+type ComposerHelperTextSlots = { helperText: React.ElementType };
+```
+
+### ComposerLabelProps
+
+```typescript
+type ComposerLabelProps = {
+  /**
+   * The `id` of the textarea this label is associated with.
+   * Passed directly to the native `htmlFor` attribute.
+   * When provided, the label is semantically linked to the textarea so that
+   * clicking the label focuses the input and screen readers announce it on focus.
+   */
+  htmlFor?: string;
+  /**
+   * Label text. Falls back to the locale text `composerInputAriaLabel` when
+   * omitted, so the default is consistent with the textarea's `aria-label`.
+   */
+  children?: React.ReactNode;
+  slots?: Partial<ComposerLabelSlots>;
+  slotProps?: ComposerLabelSlotProps;
+};
+```
+
+### ComposerLabelSlotProps
+
+```typescript
+type ComposerLabelSlotProps = { label?: SlotComponentProps<'label', {}, ComposerOwnerState> };
+```
+
+### ComposerLabelSlots
+
+```typescript
+type ComposerLabelSlots = { label: React.ElementType };
+```
+
+### ComposerOwnerState
+
+```typescript
+type ComposerOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootOwnerState
+
+```typescript
+type ComposerRootOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerRootProps
+
+```typescript
+type ComposerRootProps = {
+  disabled?: boolean;
+  /**
+   * Configuration for attachment validation constraints.
+   * When provided, file attachments are validated against these rules.
+   */
+  attachmentConfig?: ChatAttachmentsConfig;
+  slots?: Partial<ComposerRootSlots>;
+  slotProps?: ComposerRootSlotProps;
+};
+```
+
+### ComposerRootSlotProps
+
+```typescript
+type ComposerRootSlotProps = { root?: SlotComponentProps<'form', {}, ComposerRootOwnerState> };
+```
+
+### ComposerRootSlots
+
+```typescript
+type ComposerRootSlots = { root: React.ElementType };
+```
+
+### ComposerSendButtonOwnerState
+
+```typescript
+type ComposerSendButtonOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerSendButtonProps
+
+```typescript
+type ComposerSendButtonProps = {
+  slots?: Partial<ComposerSendButtonSlots>;
+  slotProps?: ComposerSendButtonSlotProps;
+};
+```
+
+### ComposerSendButtonSlotProps
+
+```typescript
+type ComposerSendButtonSlotProps = {
+  sendButton?: SlotComponentProps<'button', {}, ComposerSendButtonOwnerState>;
+};
+```
+
+### ComposerSendButtonSlots
+
+```typescript
+type ComposerSendButtonSlots = { sendButton: React.ElementType };
+```
+
+### ComposerTextAreaOwnerState
+
+```typescript
+type ComposerTextAreaOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerTextAreaProps
+
+```typescript
+type ComposerTextAreaProps = {
+  slots?: Partial<ComposerTextAreaSlots>;
+  slotProps?: ComposerTextAreaSlotProps;
+};
+```
+
+### ComposerTextAreaSlotProps
+
+```typescript
+type ComposerTextAreaSlotProps = {
+  input?: SlotComponentProps<'textarea', {}, ComposerTextAreaOwnerState>;
+};
+```
+
+### ComposerTextAreaSlots
+
+```typescript
+type ComposerTextAreaSlots = { input: React.ElementType };
+```
+
+### ComposerToolbarOwnerState
+
+```typescript
+type ComposerToolbarOwnerState = {
+  isSubmitting: boolean;
+  hasValue: boolean;
+  isStreaming: boolean;
+  attachmentCount: number;
+  disabled: boolean;
+};
+```
+
+### ComposerToolbarProps
+
+```typescript
+type ComposerToolbarProps = {
+  slots?: Partial<ComposerToolbarSlots>;
+  slotProps?: ComposerToolbarSlotProps;
+};
+```
+
+### ComposerToolbarSlotProps
+
+```typescript
+type ComposerToolbarSlotProps = {
+  toolbar?: SlotComponentProps<'div', {}, ComposerToolbarOwnerState>;
+};
+```
+
+### ComposerToolbarSlots
+
+```typescript
+type ComposerToolbarSlots = { toolbar: React.ElementType };
+```
+
+### Conversation
+
+```typescript
+type Conversation = {
+  Root: ConversationRootComponent;
+  Header: ConversationHeaderComponent;
+  HeaderActions: ConversationHeaderActionsComponent;
+  Title: ConversationTitleComponent;
+  Subtitle: ConversationSubtitleComponent;
+};
+```
+
+### ConversationHeaderActionsOwnerState
+
+```typescript
+type ConversationHeaderActionsOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderActionsProps
+
+```typescript
+type ConversationHeaderActionsProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderActionsSlots>;
+  slotProps?: ConversationHeaderActionsSlotProps;
+};
+```
+
+### ConversationHeaderActionsSlotProps
+
+```typescript
+type ConversationHeaderActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, ConversationHeaderActionsOwnerState>;
+};
+```
+
+### ConversationHeaderActionsSlots
+
+```typescript
+type ConversationHeaderActionsSlots = { actions: React.ElementType };
+```
+
+### ConversationHeaderInfoOwnerState
+
+```typescript
+type ConversationHeaderInfoOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderInfoProps
+
+```typescript
+type ConversationHeaderInfoProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderInfoSlots>;
+  slotProps?: ConversationHeaderInfoSlotProps;
+};
+```
+
+### ConversationHeaderInfoSlotProps
+
+```typescript
+type ConversationHeaderInfoSlotProps = {
+  headerInfo?: SlotComponentProps<'div', {}, ConversationHeaderInfoOwnerState>;
+};
+```
+
+### ConversationHeaderInfoSlots
+
+```typescript
+type ConversationHeaderInfoSlots = { headerInfo: React.ElementType };
+```
+
+### ConversationHeaderOwnerState
+
+```typescript
+type ConversationHeaderOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationHeaderProps
+
+```typescript
+type ConversationHeaderProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationHeaderSlots>;
+  slotProps?: ConversationHeaderSlotProps;
+};
+```
+
+### ConversationHeaderSlotProps
+
+```typescript
+type ConversationHeaderSlotProps = {
+  header?: SlotComponentProps<'div', {}, ConversationHeaderOwnerState>;
+};
+```
+
+### ConversationHeaderSlots
+
+```typescript
+type ConversationHeaderSlots = { header: React.ElementType };
+```
+
+### ConversationList
+
+```typescript
+type ConversationList = { Root: ConversationListRootComponent };
+```
+
+### ConversationListItemActionsOwnerState
+
+```typescript
+type ConversationListItemActionsOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemActionsProps
+
+```typescript
+type ConversationListItemActionsProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemActionsSlots>;
+  slotProps?: ConversationListItemActionsSlotProps;
+};
+```
+
+### ConversationListItemActionsSlotProps
+
+```typescript
+type ConversationListItemActionsSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemActionsOwnerState>;
+};
+```
+
+### ConversationListItemActionsSlots
+
+```typescript
+type ConversationListItemActionsSlots = { root: React.ElementType };
+```
+
+### ConversationListItemAvatarOwnerState
+
+```typescript
+type ConversationListItemAvatarOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemAvatarProps
+
+```typescript
+type ConversationListItemAvatarProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemAvatarSlots>;
+  slotProps?: ConversationListItemAvatarSlotProps;
+};
+```
+
+### ConversationListItemAvatarSlotProps
+
+```typescript
+type ConversationListItemAvatarSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, ConversationListItemAvatarOwnerState>;
+};
+```
+
+### ConversationListItemAvatarSlots
+
+```typescript
+type ConversationListItemAvatarSlots = { root: React.ElementType; image: React.ElementType };
+```
+
+### ConversationListItemContentOwnerState
+
+```typescript
+type ConversationListItemContentOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemContentProps
+
+```typescript
+type ConversationListItemContentProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemContentSlots>;
+  slotProps?: ConversationListItemContentSlotProps;
+};
+```
+
+### ConversationListItemContentSlotProps
+
+```typescript
+type ConversationListItemContentSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemContentOwnerState>;
+};
+```
+
+### ConversationListItemContentSlots
+
+```typescript
+type ConversationListItemContentSlots = { root: React.ElementType };
+```
+
+### ConversationListItemOwnerState
+
+```typescript
+type ConversationListItemOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListItemProps
+
+```typescript
+type ConversationListItemProps = {
+  children?: React.ReactNode;
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListItemSlots>;
+  slotProps?: ConversationListItemSlotProps;
+};
+```
+
+### ConversationListItemSlotProps
+
+```typescript
+type ConversationListItemSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListItemOwnerState>;
+};
+```
+
+### ConversationListItemSlots
+
+```typescript
+type ConversationListItemSlots = { root: React.ElementType };
+```
+
+### ConversationListPreviewOwnerState
+
+```typescript
+type ConversationListPreviewOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListPreviewProps
+
+```typescript
+type ConversationListPreviewProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListPreviewSlots>;
+  slotProps?: ConversationListPreviewSlotProps;
+};
+```
+
+### ConversationListPreviewSlotProps
+
+```typescript
+type ConversationListPreviewSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListPreviewOwnerState>;
+};
+```
+
+### ConversationListPreviewSlots
+
+```typescript
+type ConversationListPreviewSlots = { root: React.ElementType };
+```
+
+### ConversationListRootOwnerState
+
+```typescript
+type ConversationListRootOwnerState = {
+  conversationCount: number;
+  activeConversationId?: string;
+  variant: ConversationListVariant;
+};
+```
+
+### ConversationListRootProps
+
+```typescript
+type ConversationListRootProps = {
+  /**
+   * The visual variant of the conversation list.
+   * - `'default'` – shows avatar, title, preview, timestamp, and unread badge.
+   * - `'compact'` – shows only a small unread indicator, the title, and an actions button.
+   * @default 'default'
+   */
+  variant?: ConversationListVariant;
+  slots?: Partial<ConversationListRootSlots>;
+  slotProps?: ConversationListRootSlotProps;
+};
+```
+
+### ConversationListRootSlotProps
+
+```typescript
+type ConversationListRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scroller?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  viewport?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbar?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  scrollbarThumb?: SlotComponentProps<'div', {}, ConversationListRootOwnerState>;
+  item?: SlotComponentProps<ConversationListItemComponent, {}, ConversationListItemOwnerState>;
+  itemAvatar?: SlotComponentProps<
+    ConversationListItemAvatarComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemContent?: SlotComponentProps<
+    ConversationListItemContentComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  title?: SlotComponentProps<ConversationListTitleComponent, {}, ConversationListItemOwnerState>;
+  preview?: SlotComponentProps<
+    ConversationListPreviewComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  timestamp?: SlotComponentProps<
+    ConversationListTimestampComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  unreadBadge?: SlotComponentProps<
+    ConversationListUnreadBadgeComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+  itemActions?: SlotComponentProps<
+    ConversationListItemActionsComponent,
+    {},
+    ConversationListItemOwnerState
+  >;
+};
+```
+
+### ConversationListRootSlots
+
+```typescript
+type ConversationListRootSlots = {
+  root: React.ElementType;
+  scroller: React.ElementType;
+  viewport: React.ElementType;
+  scrollbar: React.ElementType;
+  scrollbarThumb: React.ElementType;
+  item: React.JSXElementConstructor<ConversationListItemProps>;
+  itemAvatar: React.JSXElementConstructor<ConversationListItemAvatarProps>;
+  itemContent: React.JSXElementConstructor<ConversationListItemContentProps>;
+  title: React.JSXElementConstructor<ConversationListTitleProps>;
+  preview: React.JSXElementConstructor<ConversationListPreviewProps>;
+  timestamp: React.JSXElementConstructor<ConversationListTimestampProps>;
+  unreadBadge: React.JSXElementConstructor<ConversationListUnreadBadgeProps>;
+  itemActions: React.JSXElementConstructor<ConversationListItemActionsProps>;
+};
+```
+
+### ConversationListTimestampOwnerState
+
+```typescript
+type ConversationListTimestampOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTimestampProps
+
+```typescript
+type ConversationListTimestampProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTimestampSlots>;
+  slotProps?: ConversationListTimestampSlotProps;
+};
+```
+
+### ConversationListTimestampSlotProps
+
+```typescript
+type ConversationListTimestampSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTimestampOwnerState>;
+};
+```
+
+### ConversationListTimestampSlots
+
+```typescript
+type ConversationListTimestampSlots = { root: React.ElementType };
+```
+
+### ConversationListTitleOwnerState
+
+```typescript
+type ConversationListTitleOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListTitleProps
+
+```typescript
+type ConversationListTitleProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListTitleSlots>;
+  slotProps?: ConversationListTitleSlotProps;
+};
+```
+
+### ConversationListTitleSlotProps
+
+```typescript
+type ConversationListTitleSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationListTitleOwnerState>;
+};
+```
+
+### ConversationListTitleSlots
+
+```typescript
+type ConversationListTitleSlots = { root: React.ElementType };
+```
+
+### ConversationListUnreadBadgeOwnerState
+
+```typescript
+type ConversationListUnreadBadgeOwnerState = {
+  conversation: ChatConversation;
+  selected: boolean;
+  unread: boolean;
+  focused: boolean;
+  variant?: ConversationListVariant;
+};
+```
+
+### ConversationListUnreadBadgeProps
+
+```typescript
+type ConversationListUnreadBadgeProps = {
+  conversation: ChatConversation;
+  selected?: boolean;
+  unread?: boolean;
+  focused?: boolean;
+  slots?: Partial<ConversationListUnreadBadgeSlots>;
+  slotProps?: ConversationListUnreadBadgeSlotProps;
+};
+```
+
+### ConversationListUnreadBadgeSlotProps
+
+```typescript
+type ConversationListUnreadBadgeSlotProps = {
+  root?: SlotComponentProps<'span', {}, ConversationListUnreadBadgeOwnerState>;
+};
+```
+
+### ConversationListUnreadBadgeSlots
+
+```typescript
+type ConversationListUnreadBadgeSlots = { root: React.ElementType };
+```
+
+### ConversationListVariant
+
+```typescript
+type ConversationListVariant = 'default' | 'compact';
+```
+
+### ConversationOwnerState
+
+```typescript
+type ConversationOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationReadState
+
+```typescript
+type ConversationReadState = 'read' | 'unread';
+```
+
+### ConversationRootOwnerState
+
+```typescript
+type ConversationRootOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationRootProps
+
+```typescript
+type ConversationRootProps = {
+  children?: React.ReactNode;
+  slots?: Partial<ConversationRootSlots>;
+  slotProps?: ConversationRootSlotProps;
+};
+```
+
+### ConversationRootSlotProps
+
+```typescript
+type ConversationRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, ConversationRootOwnerState>;
+};
+```
+
+### ConversationRootSlots
+
+```typescript
+type ConversationRootSlots = { root: React.ElementType };
+```
+
+### ConversationSubtitleOwnerState
+
+```typescript
+type ConversationSubtitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationSubtitleProps
+
+```typescript
+type ConversationSubtitleProps = {
+  slots?: Partial<ConversationSubtitleSlots>;
+  slotProps?: ConversationSubtitleSlotProps;
+};
+```
+
+### ConversationSubtitleSlotProps
+
+```typescript
+type ConversationSubtitleSlotProps = {
+  subtitle?: SlotComponentProps<'div', {}, ConversationSubtitleOwnerState>;
+};
+```
+
+### ConversationSubtitleSlots
+
+```typescript
+type ConversationSubtitleSlots = { subtitle: React.ElementType };
+```
+
+### ConversationTitleOwnerState
+
+```typescript
+type ConversationTitleOwnerState = {
+  conversationId?: string;
+  hasConversation: boolean;
+  conversation: ChatConversation | null;
+};
+```
+
+### ConversationTitleProps
+
+```typescript
+type ConversationTitleProps = {
+  slots?: Partial<ConversationTitleSlots>;
+  slotProps?: ConversationTitleSlotProps;
+};
+```
+
+### ConversationTitleSlotProps
+
+```typescript
+type ConversationTitleSlotProps = {
+  title?: SlotComponentProps<'div', {}, ConversationTitleOwnerState>;
+};
+```
+
+### ConversationTitleSlots
+
+```typescript
+type ConversationTitleSlots = { title: React.ElementType };
+```
+
+### FilePartExternalProps
+
+```typescript
+type FilePartExternalProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+};
+```
+
+### FilePartOwnerState
+
+```typescript
+type FilePartOwnerState = { image: boolean; mediaType: string; messageId: string; role: ChatRole };
+```
+
+### FilePartProps
+
+```typescript
+type FilePartProps = {
+  className?: string;
+  slots?: Partial<FilePartSlots>;
+  slotProps?: FilePartSlotProps;
+  part: ChatFileMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### FilePartSlotProps
+
+```typescript
+type FilePartSlotProps = {
+  root?: SlotComponentProps<'div', {}, FilePartOwnerState>;
+  preview?: SlotComponentProps<'img', {}, FilePartOwnerState>;
+  link?: SlotComponentProps<'a', {}, FilePartOwnerState>;
+  filename?: SlotComponentProps<'span', {}, FilePartOwnerState>;
+};
+```
+
+### FilePartSlots
+
+```typescript
+type FilePartSlots = {
+  root: React.ElementType;
+  preview: React.ElementType;
+  link: React.ElementType;
+  filename: React.ElementType;
+};
+```
+
+### Indicators
+
+```typescript
+type Indicators = {
+  TypingIndicator: TypingIndicatorComponent;
+  UnreadMarker: UnreadMarkerComponent;
+  ScrollToBottomAffordance: ScrollToBottomAffordanceComponent;
+};
+```
+
+### Message
+
+```typescript
+type Message = {
+  Root: MessageRootComponent;
+  Avatar: MessageAvatarComponent;
+  Content: MessageContentComponent;
+  Meta: MessageMetaComponent;
+  Actions: MessageActionsComponent;
+};
+```
+
+### MessageActionsMenu
+
+```typescript
+type MessageActionsMenu = {
+  Root: MessageActionsMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<
+    Omit<MessageActionsMenuTriggerProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >;
+  Positioner: React.ForwardRefExoticComponent<
+    Omit<MenuPositionerProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Popup: React.ForwardRefExoticComponent<
+    Omit<MenuPopupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Item: React.ForwardRefExoticComponent<
+    Omit<MenuItemProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  Group: React.ForwardRefExoticComponent<
+    Omit<MenuGroupProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+  GroupLabel: React.ForwardRefExoticComponent<
+    Omit<MenuGroupLabelProps, 'ref'> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### MessageActionsMenuGroupLabelProps
+
+A label for a group of menu items.
+Wraps Base UI `Menu.GroupLabel`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupLabelProps = MenuGroupLabelProps;
+```
+
+### MessageActionsMenuGroupProps
+
+Groups a set of related menu items together.
+Wraps Base UI `Menu.Group`. Renders a `<div>` element.
+
+```typescript
+type MessageActionsMenuGroupProps = MenuGroupProps;
+```
+
+### MessageActionsMenuItemProps
+
+An individual action item inside the menu. Wraps Base UI `Menu.Item`.
+Renders a `<div>` with `role="menuitem"`.
+
+Receives `data-highlighted` when focused via keyboard or pointer.
+
+```typescript
+type MessageActionsMenuItemProps = MenuItemProps;
+```
+
+### MessageActionsMenuPopupProps
+
+The container for menu items. Wraps Base UI `Menu.Popup`.
+Renders a `<div>` with `role="menu"`.
+
+```typescript
+type MessageActionsMenuPopupProps = MenuPopupProps;
+```
+
+### MessageActionsMenuPositionerProps
+
+Positions the menu popup relative to the trigger.
+Wraps Base UI `Menu.Positioner`. Renders a `<div>` element.
+
+Accepts all Base UI anchor-positioning props (`side`, `align`,
+`sideOffset`, `alignOffset`, `collisionBoundary`, etc.).
+
+```typescript
+type MessageActionsMenuPositionerProps = MenuPositionerProps;
+```
+
+### MessageActionsMenuRootProps
+
+The root of a message action menu. Wraps Base UI `Menu.Root`.
+Does not render an HTML element itself.
+
+Usage:
+
+```tsx
+<MessageActionsMenu.Root>
+  <MessageActionsMenu.Trigger>⋮</MessageActionsMenu.Trigger>
+  <MessageActionsMenu.Positioner>
+    <MessageActionsMenu.Popup>
+      <MessageActionsMenu.Item onClick={handleCopy}>Copy</MessageActionsMenu.Item>
+      <MessageActionsMenu.Item onClick={handleDelete}>Delete</MessageActionsMenu.Item>
+    </MessageActionsMenu.Popup>
+  </MessageActionsMenu.Positioner>
+</MessageActionsMenu.Root>
+```
+
+```typescript
+type MessageActionsMenuRootProps = {};
+```
+
+### MessageActionsMenuTriggerProps
+
+A button that opens the message action menu. Wraps Base UI `Menu.Trigger`.
+Renders a `<button>` element.
+
+Automatically receives `aria-haspopup="menu"` and `aria-expanded` from
+Base UI.
+
+```typescript
+type MessageActionsMenuTriggerProps = {};
+```
+
+### MessageActionsOwnerState
+
+```typescript
+type MessageActionsOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageActionsProps
+
+```typescript
+type MessageActionsProps = {
+  slots?: Partial<MessageActionsSlots>;
+  slotProps?: MessageActionsSlotProps;
+};
+```
+
+### MessageActionsSlotProps
+
+```typescript
+type MessageActionsSlotProps = {
+  actions?: SlotComponentProps<'div', {}, MessageActionsOwnerState>;
+};
+```
+
+### MessageActionsSlots
+
+```typescript
+type MessageActionsSlots = { actions: React.ElementType };
+```
+
+### MessageAuthorLabelOwnerState
+
+```typescript
+type MessageAuthorLabelOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAuthorLabelProps
+
+```typescript
+type MessageAuthorLabelProps = {
+  slots?: Partial<MessageAuthorLabelSlots>;
+  slotProps?: MessageAuthorLabelSlotProps;
+};
+```
+
+### MessageAuthorLabelSlotProps
+
+```typescript
+type MessageAuthorLabelSlotProps = {
+  authorLabel?: SlotComponentProps<'span', {}, MessageAuthorLabelOwnerState>;
+};
+```
+
+### MessageAuthorLabelSlots
+
+```typescript
+type MessageAuthorLabelSlots = { authorLabel: React.ElementType };
+```
+
+### MessageAvatarOwnerState
+
+```typescript
+type MessageAvatarOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageAvatarProps
+
+```typescript
+type MessageAvatarProps = {
+  slots?: Partial<MessageAvatarSlots>;
+  slotProps?: MessageAvatarSlotProps;
+};
+```
+
+### MessageAvatarSlotProps
+
+```typescript
+type MessageAvatarSlotProps = {
+  avatar?: SlotComponentProps<'div', {}, MessageAvatarOwnerState>;
+  image?: SlotComponentProps<'img', {}, MessageAvatarOwnerState>;
+};
+```
+
+### MessageAvatarSlots
+
+```typescript
+type MessageAvatarSlots = { avatar: React.ElementType; image: React.ElementType };
+```
+
+### MessageContentOwnerState
+
+```typescript
+type MessageContentOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageContentPartProps
+
+```typescript
+type MessageContentPartProps = {
+  text?: TextPartExternalProps;
+  reasoning?: ReasoningPartExternalProps;
+  tool?: ToolPartExternalProps;
+  'dynamic-tool'?: ToolPartExternalProps;
+  file?: FilePartExternalProps;
+  'source-url'?: SourceUrlPartExternalProps;
+  'source-document'?: SourceDocumentPartExternalProps;
+};
+```
+
+### MessageContentProps
+
+```typescript
+type MessageContentProps = {
+  /**
+   * Props forwarded to the built-in unstyled part renderer components.
+   * Use this to pass `slots` and `slotProps` to individual part type renderers.
+   */
+  partProps?: MessageContentPartProps;
+  /**
+   * @deprecated
+   * Use `partProps` instead.
+   * Callback to resolve a built-in part renderer for a given part type.
+   * @returns A renderer or null.
+   */
+  resolveBuiltInPartRenderer?: (
+    part: ChatBuiltInMessagePart,
+    localeText: ChatLocaleText,
+  ) => ChatPartRenderer | null;
+  /**
+   * Content rendered inside the bubble after the message parts.
+   * Useful for placing inline metadata (e.g. timestamp, status) inside the bubble.
+   */
+  afterContent?: React.ReactNode;
+  slots?: Partial<MessageContentSlots>;
+  slotProps?: MessageContentSlotProps;
+};
+```
+
+### MessageContentSlotProps
+
+```typescript
+type MessageContentSlotProps = {
+  content?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+  bubble?: SlotComponentProps<'div', {}, MessageContentOwnerState>;
+};
+```
+
+### MessageContentSlots
+
+```typescript
+type MessageContentSlots = { content: React.ElementType; bubble: React.ElementType };
+```
+
+### MessageGroupOwnerState
+
+```typescript
+type MessageGroupOwnerState = {
+  isFirst: boolean;
+  isFirstInList: boolean;
+  isLast: boolean;
+  authorRole?: ChatRole;
+  authorId?: string;
+  variant: ChatVariant;
+  density: ChatDensity;
+};
+```
+
+### MessageGroupProps
+
+```typescript
+type MessageGroupProps = {
+  children?: React.ReactNode;
+  messageId: string;
+  index?: number;
+  items?: string[];
+  /**
+   * A function that maps a message to a group key.
+   * Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.).
+   * Use `createTimeWindowGroupKey(windowMs)` to replicate time-window-based grouping.
+   * @default (message) => message.author?.id ?? message.role ?? ''
+   */
+  groupKey?: GroupKeyFn;
+  slots?: Partial<MessageGroupSlots>;
+  slotProps?: MessageGroupSlotProps;
+};
+```
+
+### MessageGroupSlotProps
+
+```typescript
+type MessageGroupSlotProps = {
+  group?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  authorName?: SlotComponentProps<'div', {}, MessageGroupOwnerState>;
+  groupTimestamp?: SlotComponentProps<'span', {}, MessageGroupOwnerState>;
+};
+```
+
+### MessageGroupSlots
+
+```typescript
+type MessageGroupSlots = {
+  group: React.ElementType;
+  authorName: React.ElementType;
+  /**
+   * The timestamp element rendered next to the author name in compact mode.
+   * Only rendered when `variant === 'compact'` and the message has a `createdAt` value.
+   * @default 'span'
+   */
+  groupTimestamp: React.ElementType;
+};
+```
+
+### MessageList
+
+```typescript
+type MessageList = { Root: MessageListRootComponent; DateDivider: MessageListDateDividerComponent };
+```
+
+### MessageListContextValue
+
+```typescript
+type MessageListContextValue = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  scrollToBottom: scrollToBottom;
+};
+```
+
+### MessageListDateDividerOwnerState
+
+```typescript
+type MessageListDateDividerOwnerState = {
+  messageId: string;
+  hasBoundary: boolean;
+  label: React.ReactNode;
+};
+```
+
+### MessageListDateDividerProps
+
+```typescript
+type MessageListDateDividerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  formatDate?: (date: Date) => React.ReactNode;
+  slots?: Partial<MessageListDateDividerSlots>;
+  slotProps?: MessageListDateDividerSlotProps;
+};
+```
+
+### MessageListDateDividerSlotProps
+
+```typescript
+type MessageListDateDividerSlotProps = {
+  divider?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  line?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+  label?: SlotComponentProps<'div', {}, MessageListDateDividerOwnerState>;
+};
+```
+
+### MessageListDateDividerSlots
+
+```typescript
+type MessageListDateDividerSlots = {
+  divider: React.ElementType;
+  line: React.ElementType;
+  label: React.ElementType;
+};
+```
+
+### MessageListRootAutoScrollConfig
+
+```typescript
+type MessageListRootAutoScrollConfig = {
+  /**
+   * Distance in pixels from the bottom of the scroll container within which the
+   * user is still considered "at the bottom" and auto-scroll will trigger.
+   * @default 150
+   */
+  buffer?: number;
+};
+```
+
+### MessageListRootHandle
+
+```typescript
+type MessageListRootHandle = { scrollToBottom: scrollToBottom };
+```
+
+### MessageListRootOwnerState
+
+```typescript
+type MessageListRootOwnerState = { messageCount: number; isAtBottom: boolean };
+```
+
+### MessageListRootProps
+
+```typescript
+type MessageListRootProps = {
+  items?: string[];
+  overlay?: React.ReactNode;
+  renderItem: renderItem;
+  getItemKey?: (id: string, index: number) => React.Key;
+  estimatedItemSize?: number;
+  onReachTop?: () => void;
+  /**
+   * Controls automatic scrolling to the bottom when new messages arrive or
+   * streaming content grows, as long as the user is within `buffer` pixels of
+   * the bottom.
+   *
+   * - `true` – enable with the default buffer (150 px).
+   * - `{ buffer: number }` – enable with a custom threshold.
+   * - `false` – disable (the scroll-to-bottom affordance is still available).
+   *
+   * Scrolling when the *user* sends a message is always active.
+   * @default true
+   */
+  autoScroll?: boolean | MessageListRootAutoScrollConfig;
+  slots?: Partial<MessageListRootSlots>;
+  slotProps?: MessageListRootSlotProps;
+};
+```
+
+### MessageListRootSlotProps
+
+```typescript
+type MessageListRootSlotProps = {
+  messageList?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScroller?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListContent?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListOverlay?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbar?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+  messageListScrollbarThumb?: SlotComponentProps<'div', {}, MessageListRootOwnerState>;
+};
+```
+
+### MessageListRootSlots
+
+```typescript
+type MessageListRootSlots = {
+  messageList: React.ElementType;
+  messageListScroller: React.ElementType;
+  messageListContent: React.ElementType;
+  messageListOverlay: React.ElementType;
+  messageListScrollbar: React.ElementType;
+  messageListScrollbarThumb: React.ElementType;
+};
+```
+
+### MessageMetaOwnerState
+
+```typescript
+type MessageMetaOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageMetaProps
+
+```typescript
+type MessageMetaProps = { slots?: Partial<MessageMetaSlots>; slotProps?: MessageMetaSlotProps };
+```
+
+### MessageMetaSlotProps
+
+```typescript
+type MessageMetaSlotProps = {
+  meta?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  timestamp?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  status?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  edited?: SlotComponentProps<'span', {}, MessageMetaOwnerState>;
+  streamingProgress?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressTrack?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+  streamingProgressIndicator?: SlotComponentProps<'div', {}, MessageMetaOwnerState>;
+};
+```
+
+### MessageMetaSlots
+
+```typescript
+type MessageMetaSlots = {
+  meta: React.ElementType;
+  timestamp: React.ElementType;
+  status: React.ElementType;
+  edited: React.ElementType;
+  /**
+   * The root element of the streaming progress indicator.
+   * Rendered by Base UI `Progress.Root` when `message.status === 'streaming'`.
+   * Provides `role="progressbar"` and `aria-valuetext` for screen readers.
+   * @default ProgressRoot (Base UI Progress.Root wrapper)
+   */
+  streamingProgress: React.ElementType;
+  /** The track element wrapping the streaming progress indicator. */
+  streamingProgressTrack: React.ElementType;
+  /** The animated indicator bar inside the streaming progress track. */
+  streamingProgressIndicator: React.ElementType;
+};
+```
+
+### MessageOwnerState
+
+```typescript
+type MessageOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootOwnerState
+
+```typescript
+type MessageRootOwnerState = {
+  messageId: string;
+  message: ChatMessage | null;
+  role?: ChatRole;
+  status?: ChatMessageStatus;
+  streaming: boolean;
+  error: boolean;
+  isGrouped: boolean;
+  variant: ChatVariant;
+  density: ChatDensity;
+  /**
+   * Whether the message has an avatar to display.
+   * Drives the `--MuiChatMessage-avatarSize` CSS variable so the opposite-side
+   * phantom column collapses when no avatar is present.
+   */
+  showAvatar: boolean;
+};
+```
+
+### MessageRootProps
+
+```typescript
+type MessageRootProps = {
+  messageId: string;
+  isGrouped?: boolean;
+  slots?: Partial<MessageRootSlots>;
+  slotProps?: MessageRootSlotProps;
+};
+```
+
+### MessageRootSlotProps
+
+```typescript
+type MessageRootSlotProps = { root?: SlotComponentProps<'div', {}, MessageRootOwnerState> };
+```
+
+### MessageRootSlots
+
+```typescript
+type MessageRootSlots = { root: React.ElementType };
+```
+
+### PaginationDirection
+
+```typescript
+type PaginationDirection = 'forward' | 'backward';
+```
+
+### ReasoningPartExternalProps
+
+```typescript
+type ReasoningPartExternalProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+};
+```
+
+### ReasoningPartOwnerState
+
+```typescript
+type ReasoningPartOwnerState = { messageId: string; role: ChatRole; streaming: boolean };
+```
+
+### ReasoningPartProps
+
+```typescript
+type ReasoningPartProps = {
+  className?: string;
+  slots?: Partial<ReasoningPartSlots>;
+  slotProps?: ReasoningPartSlotProps;
+  part: ChatReasoningMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ReasoningPartSlotProps
+
+```typescript
+type ReasoningPartSlotProps = {
+  root?: SlotComponentProps<'details', {}, ReasoningPartOwnerState>;
+  summary?: SlotComponentProps<'summary', {}, ReasoningPartOwnerState>;
+  content?: SlotComponentProps<'div', {}, ReasoningPartOwnerState>;
+};
+```
+
+### ReasoningPartSlots
+
+```typescript
+type ReasoningPartSlots = {
+  root: React.ElementType;
+  summary: React.ElementType;
+  content: React.ElementType;
+};
+```
+
+### ScrollToBottomAffordanceOwnerState
+
+```typescript
+type ScrollToBottomAffordanceOwnerState = {
+  isAtBottom: boolean;
+  unseenMessageCount: number;
+  label: string;
+};
+```
+
+### ScrollToBottomAffordanceProps
+
+```typescript
+type ScrollToBottomAffordanceProps = {
+  scrollBehavior?: ScrollBehavior;
+  slots?: Partial<ScrollToBottomAffordanceSlots>;
+  slotProps?: ScrollToBottomAffordanceSlotProps;
+};
+```
+
+### ScrollToBottomAffordanceSlotProps
+
+```typescript
+type ScrollToBottomAffordanceSlotProps = {
+  root?: SlotComponentProps<'button', {}, ScrollToBottomAffordanceOwnerState>;
+  badge?: SlotComponentProps<'span', {}, ScrollToBottomAffordanceOwnerState>;
+  icon?: SlotComponentProps<'svg', {}, ScrollToBottomAffordanceOwnerState>;
+};
+```
+
+### ScrollToBottomAffordanceSlots
+
+```typescript
+type ScrollToBottomAffordanceSlots = {
+  root: React.ElementType;
+  badge: React.ElementType;
+  icon?: React.ElementType;
+};
+```
+
+### SourceDocumentPartExternalProps
+
+```typescript
+type SourceDocumentPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+};
+```
+
+### SourceDocumentPartOwnerState
+
+```typescript
+type SourceDocumentPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceDocumentPartProps
+
+```typescript
+type SourceDocumentPartProps = {
+  className?: string;
+  slots?: Partial<SourceDocumentPartSlots>;
+  slotProps?: SourceDocumentPartSlotProps;
+  part: ChatSourceDocumentMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceDocumentPartSlotProps
+
+```typescript
+type SourceDocumentPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+  excerpt?: SlotComponentProps<'div', {}, SourceDocumentPartOwnerState>;
+};
+```
+
+### SourceDocumentPartSlots
+
+```typescript
+type SourceDocumentPartSlots = {
+  root: React.ElementType;
+  title: React.ElementType;
+  excerpt: React.ElementType;
+};
+```
+
+### SourceUrlPartExternalProps
+
+```typescript
+type SourceUrlPartExternalProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+};
+```
+
+### SourceUrlPartOwnerState
+
+```typescript
+type SourceUrlPartOwnerState = { messageId: string; role: ChatRole };
+```
+
+### SourceUrlPartProps
+
+```typescript
+type SourceUrlPartProps = {
+  className?: string;
+  slots?: Partial<SourceUrlPartSlots>;
+  slotProps?: SourceUrlPartSlotProps;
+  part: ChatSourceUrlMessagePart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### SourceUrlPartSlotProps
+
+```typescript
+type SourceUrlPartSlotProps = {
+  root?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, SourceUrlPartOwnerState>;
+  link?: SlotComponentProps<'a', {}, SourceUrlPartOwnerState>;
+};
+```
+
+### SourceUrlPartSlots
+
+```typescript
+type SourceUrlPartSlots = {
+  root: React.ElementType;
+  icon: React.ElementType;
+  link: React.ElementType;
+};
+```
+
+### SuggestionItemOwnerState
+
+```typescript
+type SuggestionItemOwnerState = { value: string; label: string; index: number };
+```
+
+### SuggestionItemProps
+
+```typescript
+type SuggestionItemProps = {
+  slots?: Partial<SuggestionItemSlots>;
+  slotProps?: SuggestionItemSlotProps;
+  /** The value to pre-fill into the composer when the suggestion is clicked. */
+  value: string;
+  /** Display label. Falls back to `value`. */
+  label?: string;
+  /** The index of this item within the suggestions list. */
+  index?: number;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionItemSlotProps
+
+```typescript
+type SuggestionItemSlotProps = {
+  root?: SlotComponentProps<'button', {}, SuggestionItemOwnerState>;
+};
+```
+
+### SuggestionItemSlots
+
+```typescript
+type SuggestionItemSlots = { root: React.ElementType };
+```
+
+### SuggestionsRootOwnerState
+
+```typescript
+type SuggestionsRootOwnerState = { isEmpty: boolean; suggestionCount: number };
+```
+
+### SuggestionsRootProps
+
+```typescript
+type SuggestionsRootProps = {
+  slots?: Partial<SuggestionsRootSlots>;
+  slotProps?: SuggestionsRootSlotProps;
+  /**
+   * Suggestion items. Strings are normalized to `{ value, label }`.
+   * Ignored when `children` are provided.
+   */
+  suggestions?: (string | ChatSuggestion)[];
+  /**
+   * Whether to auto-submit when a suggestion is clicked.
+   * @default false
+   */
+  autoSubmit?: boolean;
+  children?: React.ReactNode;
+};
+```
+
+### SuggestionsRootSlotProps
+
+```typescript
+type SuggestionsRootSlotProps = {
+  root?: SlotComponentProps<'div', {}, SuggestionsRootOwnerState>;
+  item?: SlotComponentProps<'button', {}, {}>;
+};
+```
+
+### SuggestionsRootSlots
+
+```typescript
+type SuggestionsRootSlots = { root: React.ElementType; item: React.ElementType };
+```
+
+### ToolPartExternalProps
+
+```typescript
+type ToolPartExternalProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+};
+```
+
+### ToolPartOwnerState
+
+```typescript
+type ToolPartOwnerState = {
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartProps
+
+```typescript
+type ToolPartProps = {
+  className?: string;
+  slots?: Partial<ToolPartSlots>;
+  slotProps?: ToolPartSlotProps;
+  /**
+   * Per-tool-name slot overrides, merged on top of `slots`.
+   * Keyed by `toolInvocation.toolName`.
+   * @example toolSlots={{ bash: { icon: TerminalIcon }, glob: { icon: FolderSearchIcon } }}
+   */
+  toolSlots?: Record<string, Partial<ToolPartSlots>>;
+  /**
+   * Per-tool-name slotProps overrides, merged on top of `slotProps`.
+   * Keyed by `toolInvocation.toolName`.
+   */
+  toolSlotProps?: Record<string, ToolPartSlotProps>;
+  part: ToolPart;
+  message: ChatMessage;
+  index: number;
+  onToolCall?: ChatOnToolCall;
+};
+```
+
+### ToolPartSectionOwnerState
+
+```typescript
+type ToolPartSectionOwnerState = {
+  section: 'input' | 'output';
+  messageId: string;
+  pendingApproval: boolean;
+  role: ChatRole;
+  state: ChatToolInvocationState;
+  toolName: string;
+};
+```
+
+### ToolPartSlotProps
+
+```typescript
+type ToolPartSlotProps = {
+  root?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  header?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  title?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  state?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  icon?: SlotComponentProps<'span', {}, ToolPartOwnerState>;
+  section?: SlotComponentProps<'div', {}, ToolPartSectionOwnerState>;
+  sectionContent?: SlotComponentProps<'pre', {}, ToolPartSectionOwnerState>;
+  error?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  actions?: SlotComponentProps<'div', {}, ToolPartOwnerState>;
+  approveButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+  denyButton?: SlotComponentProps<'button', {}, ToolPartOwnerState>;
+};
+```
+
+### ToolPartSlots
+
+```typescript
+type ToolPartSlots = {
+  root: React.ElementType;
+  header: React.ElementType;
+  title: React.ElementType;
+  state: React.ElementType;
+  icon?: React.ElementType;
+  section: React.ElementType;
+  sectionContent: React.ElementType;
+  error: React.ElementType;
+  actions: React.ElementType;
+  approveButton: React.ElementType;
+  denyButton: React.ElementType;
+};
+```
+
+### TypingIndicatorOwnerState
+
+```typescript
+type TypingIndicatorOwnerState = {
+  activeConversationId?: string;
+  users: ChatUser[];
+  count: number;
+  label: string;
+};
+```
+
+### TypingIndicatorProps
+
+```typescript
+type TypingIndicatorProps = {
+  slots?: Partial<TypingIndicatorSlots>;
+  slotProps?: TypingIndicatorSlotProps;
+};
+```
+
+### TypingIndicatorSlotProps
+
+```typescript
+type TypingIndicatorSlotProps = { root?: SlotComponentProps<'div', {}, TypingIndicatorOwnerState> };
+```
+
+### TypingIndicatorSlots
+
+```typescript
+type TypingIndicatorSlots = { root: React.ElementType };
+```
+
+### UnreadMarkerOwnerState
+
+```typescript
+type UnreadMarkerOwnerState = { messageId: string; hasBoundary: boolean; label: React.ReactNode };
+```
+
+### UnreadMarkerProps
+
+```typescript
+type UnreadMarkerProps = {
+  messageId: string;
+  index?: number;
+  items?: string[];
+  label?: React.ReactNode;
+  slots?: Partial<UnreadMarkerSlots>;
+  slotProps?: UnreadMarkerSlotProps;
+};
+```
+
+### UnreadMarkerSlotProps
+
+```typescript
+type UnreadMarkerSlotProps = {
+  root?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+  label?: SlotComponentProps<'div', {}, UnreadMarkerOwnerState>;
+};
+```
+
+### UnreadMarkerSlots
+
+```typescript
+type UnreadMarkerSlots = { root: React.ElementType; label: React.ElementType };
+```
+
+### UseChatSendMessageInput
+
+```typescript
+type UseChatSendMessageInput = {
+  id?: string;
+  conversationId?: string;
+  parts: ChatBuiltInMessagePart[];
+  metadata?: ChatMessageMetadata;
+  author?: ChatUser;
+  createdAt?: string;
+  attachments?: ChatDraftAttachment[];
+};
+```
+
+## External Types
+
+### listConversations
+
+```typescript
+type listConversations = (
+  input?: { cursor?: unknown | undefined; query?: string | undefined } | undefined,
+) => Promise;
+```
+
+### listMessages
+
+```typescript
+type listMessages = (input: {
+  conversationId: string;
+  cursor?: unknown | undefined;
+  direction?: 'forward' | 'backward' | undefined;
+}) => Promise;
+```
+
+### sendMessage
+
+```typescript
+type sendMessage = (input: {
+  conversationId?: string | undefined;
+  message: {
+    id: string;
+    conversationId?: string | undefined;
+    role: 'system' | 'user' | 'assistant';
+    parts: unknown;
+    metadata?: {} | undefined;
+    createdAt?: string | undefined;
+    updatedAt?: string | undefined;
+    status?:
+      | 'pending'
+      | 'sending'
+      | 'streaming'
+      | 'sent'
+      | 'read'
+      | 'error'
+      | 'cancelled'
+      | undefined;
+    author?:
+      | {
+          id: string;
+          displayName?: string | undefined;
+          avatarUrl?: string | undefined;
+          isOnline?: boolean | undefined;
+          role?: 'system' | 'user' | 'assistant' | undefined;
+          metadata?: {} | undefined;
+        }
+      | undefined;
+    editedAt?: string | undefined;
+  };
+  messages: unknown;
+  attachments?: unknown | undefined;
+  metadata?: Record | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### reconnectToStream
+
+```typescript
+type reconnectToStream = (input: {
+  conversationId?: string | undefined;
+  messageId?: string | undefined;
+  signal: AbortSignal;
+}) => Promise;
+```
+
+### setTyping
+
+```typescript
+type setTyping = (input: { conversationId: string; isTyping: boolean }) => Promise;
+```
+
+### markRead
+
+```typescript
+type markRead = (input: { conversationId: string; messageId?: string | undefined }) => Promise;
+```
+
+### subscribe
+
+```typescript
+type subscribe = (input: { onEvent: unknown }) => unknown | Promise;
+```
+
+### loadMore
+
+```typescript
+type loadMore = (cursor?: unknown | undefined) => Promise;
+```
+
+### addToolApprovalResponse
+
+```typescript
+type addToolApprovalResponse = (input: {
+  id: string;
+  approved: boolean;
+  reason?: string | undefined;
+}) => Promise;
+```
+
+### stop
+
+```typescript
+type stop = () => void;
+```
+
+### ChatErrorSource
+
+```typescript
+type ChatErrorSource = 'send' | 'stream' | 'history' | 'render' | 'adapter';
+```
+
+### renderItem
+
+```typescript
+type renderItem = (params: { id: string; index: number }) => ReactNode;
+```
+
+### scrollToBottom
+
+```typescript
+type scrollToBottom = (options?: { behavior?: ScrollBehavior | undefined } | undefined) => void;
+```
+
+### ChatLayoutPaneKind
+
+```typescript
+type ChatLayoutPaneKind = 'conversations' | 'thread';
+```
+
+### messageStatusLabel
+
+```typescript
+type messageStatusLabel = (
+  status: 'pending' | 'sending' | 'streaming' | 'sent' | 'read' | 'error' | 'cancelled',
+) => string;
+```
+
+### toolStateLabel
+
+```typescript
+type toolStateLabel = (
+  state:
+    | 'input-streaming'
+    | 'input-available'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-available'
+    | 'output-error'
+    | 'output-denied',
+) => string;
+```
+
+### messageTimestampLabel
+
+```typescript
+type messageTimestampLabel = (dateTime: string) => string;
+```
+
+### conversationTimestampLabel
+
+```typescript
+type conversationTimestampLabel = (dateTime: string) => string;
+```
+
+### typingIndicatorLabel
+
+```typescript
+type typingIndicatorLabel = (users: unknown) => string;
+```
+
+### scrollToBottomWithCountLabel
+
+```typescript
+type scrollToBottomWithCountLabel = (unseenCount: number) => string;
+```
+
+### ChatRootComponent
+
+```typescript
+type ChatRootComponent = (props: unknown) => Element;
+```
+
+### ChatLayoutComponent
+
+```typescript
+type ChatLayoutComponent = (props: unknown) => Element;
+```
+
+### ConversationRootComponent
+
+```typescript
+type ConversationRootComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderComponent
+
+```typescript
+type ConversationHeaderComponent = (props: unknown) => Element;
+```
+
+### ConversationHeaderActionsComponent
+
+```typescript
+type ConversationHeaderActionsComponent = (props: unknown) => Element;
+```
+
+### ConversationTitleComponent
+
+```typescript
+type ConversationTitleComponent = (props: unknown) => Element;
+```
+
+### ConversationSubtitleComponent
+
+```typescript
+type ConversationSubtitleComponent = (props: unknown) => Element;
+```
+
+### ConversationListRootComponent
+
+```typescript
+type ConversationListRootComponent = (props: unknown) => Element;
+```
+
+### ComposerRootComponent
+
+```typescript
+type ComposerRootComponent = (props: unknown) => Element;
+```
+
+### ComposerTextAreaComponent
+
+```typescript
+type ComposerTextAreaComponent = (props: unknown) => Element;
+```
+
+### ComposerSendButtonComponent
+
+```typescript
+type ComposerSendButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachButtonComponent
+
+```typescript
+type ComposerAttachButtonComponent = (props: unknown) => Element;
+```
+
+### ComposerAttachmentListComponent
+
+```typescript
+type ComposerAttachmentListComponent = (props: unknown) => Element | null;
+```
+
+### ComposerToolbarComponent
+
+```typescript
+type ComposerToolbarComponent = (props: unknown) => Element;
+```
+
+### ComposerHelperTextComponent
+
+```typescript
+type ComposerHelperTextComponent = (props: unknown) => Element | null;
+```
+
+### MessageRootComponent
+
+```typescript
+type MessageRootComponent = (props: unknown) => Element;
+```
+
+### MessageAvatarComponent
+
+```typescript
+type MessageAvatarComponent = (props: unknown) => Element | null;
+```
+
+### MessageContentComponent
+
+```typescript
+type MessageContentComponent = (props: unknown) => Element;
+```
+
+### MessageMetaComponent
+
+```typescript
+type MessageMetaComponent = (props: unknown) => Element | null;
+```
+
+### MessageActionsComponent
+
+```typescript
+type MessageActionsComponent = (props: unknown) => Element;
+```
+
+### MessageListRootComponent
+
+```typescript
+type MessageListRootComponent = (props: unknown) => Element;
+```
+
+### MessageListDateDividerComponent
+
+```typescript
+type MessageListDateDividerComponent = (props: unknown) => Element | null;
+```
+
+### TypingIndicatorComponent
+
+```typescript
+type TypingIndicatorComponent = (props: unknown) => Element | null;
+```
+
+### UnreadMarkerComponent
+
+```typescript
+type UnreadMarkerComponent = (props: unknown) => Element | null;
+```
+
+### ScrollToBottomAffordanceComponent
+
+```typescript
+type ScrollToBottomAffordanceComponent = (props: unknown) => Element | null;
+```
diff --git a/docs/pages/x/api/chat/types.unread-marker.ts b/docs/pages/x/api/chat/types.unread-marker.ts
new file mode 100644
index 0000000000000..951610ef31014
--- /dev/null
+++ b/docs/pages/x/api/chat/types.unread-marker.ts
@@ -0,0 +1,4 @@
+import { UnreadMarker } from '@mui/x-chat/headless';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesUnreadMarker = createTypes(import.meta.url, UnreadMarker);
diff --git a/docs/pages/x/api/chat/typing-indicator.js b/docs/pages/x/api/chat/typing-indicator.js
index b337a7d9c3b4e..8b3ed4582abb0 100644
--- a/docs/pages/x/api/chat/typing-indicator.js
+++ b/docs/pages/x/api/chat/typing-indicator.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './typing-indicator.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTypingIndicator } from './types.typing-indicator';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/typing-indicator',
-    false,
-    /\.\/typing-indicator.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TypingIndicator" allowedProps={allowedProps}>
+      <TypesTypingIndicator />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/chat/unread-marker.js b/docs/pages/x/api/chat/unread-marker.js
index cae87d355c1cb..feb4710c5936f 100644
--- a/docs/pages/x/api/chat/unread-marker.js
+++ b/docs/pages/x/api/chat/unread-marker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './unread-marker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesUnreadMarker } from './types.unread-marker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/chat/unread-marker',
-    false,
-    /\.\/unread-marker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="UnreadMarker" allowedProps={allowedProps}>
+      <TypesUnreadMarker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/ai-assistant-panel-trigger.js b/docs/pages/x/api/data-grid/ai-assistant-panel-trigger.js
index 945311dd3cc10..e387500dd26d7 100644
--- a/docs/pages/x/api/data-grid/ai-assistant-panel-trigger.js
+++ b/docs/pages/x/api/data-grid/ai-assistant-panel-trigger.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './ai-assistant-panel-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesAiAssistantPanelTrigger } from './types.ai-assistant-panel-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/ai-assistant-panel-trigger',
-    false,
-    /\.\/ai-assistant-panel-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="AiAssistantPanelTrigger" allowedProps={allowedProps}>
+      <TypesAiAssistantPanelTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/charts-panel-trigger.js b/docs/pages/x/api/data-grid/charts-panel-trigger.js
index 4e1967d2ac610..8723c5498acbe 100644
--- a/docs/pages/x/api/data-grid/charts-panel-trigger.js
+++ b/docs/pages/x/api/data-grid/charts-panel-trigger.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './charts-panel-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesChartsPanelTrigger } from './types.charts-panel-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/charts-panel-trigger',
-    false,
-    /\.\/charts-panel-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ChartsPanelTrigger" allowedProps={allowedProps}>
+      <TypesChartsPanelTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/columns-panel-trigger.js b/docs/pages/x/api/data-grid/columns-panel-trigger.js
index bd7a1c4d34751..f0435303c67c6 100644
--- a/docs/pages/x/api/data-grid/columns-panel-trigger.js
+++ b/docs/pages/x/api/data-grid/columns-panel-trigger.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './columns-panel-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesColumnsPanelTrigger } from './types.columns-panel-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/columns-panel-trigger',
-    false,
-    /\.\/columns-panel-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ColumnsPanelTrigger" allowedProps={allowedProps}>
+      <TypesColumnsPanelTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.js b/docs/pages/x/api/data-grid/data-grid-premium.js
index 6bd68d1e9f61f..9fb41959a1873 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.js
+++ b/docs/pages/x/api/data-grid/data-grid-premium.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './data-grid-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDataGridPremium } from './types.data-grid-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['activeChartId', 'aggregationFunctions', 'aggregationModel', 'aggregationRowsScope', 'aiAssistant', 'aiAssistantActiveConversationIndex', 'aiAssistantConversations', 'aiAssistantSuggestions', 'allowAiAssistantDataSampling', 'apiRef', 'aria-label', 'aria-labelledby', 'autoHeight', 'autoPageSize', 'autosizeOnMount', 'autosizeOptions', 'cellModesModel', 'cellSelection', 'cellSelectionFillHandle', 'cellSelectionModel', 'chartsIntegration', 'checkboxColDef', 'checkboxSelection', 'checkboxSelectionVisibleOnly', 'classes', 'clipboardCopyCellDelimiter', 'columnBufferPx', 'columnFilterDebounceMs', 'columnGroupHeaderHeight', 'columnHeaderHeight', 'columnVisibilityModel', 'columns', 'dataSource', 'dataSourceCache', 'dataSourceRevalidateMs', 'defaultGroupingExpansionDepth', 'density', 'detailPanelExpandedRowIds', 'disableAggregation', 'disableAutosize', 'disableChildrenFiltering', 'disableChildrenSorting', 'disableClipboardPaste', 'disableColumnFilter', 'disableColumnMenu', 'disableColumnPinning', 'disableColumnReorder', 'disableColumnResize', 'disableColumnSelector', 'disableColumnSorting', 'disableDensitySelector', 'disableEval', 'disableMultipleColumnsFiltering', 'disableMultipleColumnsSorting', 'disableMultipleRowSelection', 'disablePivoting', 'disableRowGrouping', 'disableRowSelectionExcludeModel', 'disableRowSelectionOnClick', 'disableVirtualization', 'editMode', 'estimatedRowCount', 'experimentalFeatures', 'filterDebounceMs', 'filterMode', 'filterModel', 'getAggregationPosition', 'getCellClassName', 'getDetailPanelContent', 'getDetailPanelHeight', 'getEstimatedRowHeight', 'getPivotDerivedColumns', 'getRowClassName', 'getRowHeight', 'getRowId', 'getRowSpacing', 'getTreeDataPath', 'groupingColDef', 'headerFilterHeight', 'headerFilters', 'hideFooter', 'hideFooterPagination', 'hideFooterRowCount', 'hideFooterSelectedRowCount', 'historyEventHandlers', 'historyStackSize', 'historyValidationEvents', 'ignoreDiacritics', 'ignoreValueFormatterDuringExport', 'initialState', 'isCellEditable', 'isGroupExpandedByDefault', 'isRowReorderable', 'isRowSelectable', 'isValidRowReorder', 'keepColumnPositionIfDraggedOutside', 'keepNonExistentRowsSelected', 'label', 'lazyLoading', 'lazyLoadingRequestThrottleMs', 'listView', 'listViewColumn', 'loading', 'localeText', 'logLevel', 'logger', 'multipleColumnsSortingMode', 'nonce', 'onActiveChartIdChange', 'onAggregationModelChange', 'onAiAssistantActiveConversationIndexChange', 'onAiAssistantConversationsChange', 'onBeforeClipboardPasteStart', 'onCellClick', 'onCellDoubleClick', 'onCellEditStart', 'onCellEditStop', 'onCellKeyDown', 'onCellModesModelChange', 'onCellSelectionModelChange', 'onClipboardCopy', 'onClipboardPasteEnd', 'onClipboardPasteStart', 'onColumnHeaderClick', 'onColumnHeaderContextMenu', 'onColumnHeaderDoubleClick', 'onColumnHeaderEnter', 'onColumnHeaderLeave', 'onColumnHeaderOut', 'onColumnHeaderOver', 'onColumnOrderChange', 'onColumnResize', 'onColumnVisibilityModelChange', 'onColumnWidthChange', 'onDataSourceError', 'onDensityChange', 'onDetailPanelExpandedRowIdsChange', 'onExcelExportStateChange', 'onFetchRows', 'onFilterModelChange', 'onMenuClose', 'onMenuOpen', 'onPaginationMetaChange', 'onPaginationModelChange', 'onPinnedColumnsChange', 'onPivotActiveChange', 'onPivotModelChange', 'onPivotPanelOpenChange', 'onPreferencePanelClose', 'onPreferencePanelOpen', 'onProcessRowUpdateError', 'onPrompt', 'onRedo', 'onResize', 'onRowClick', 'onRowCountChange', 'onRowDoubleClick', 'onRowEditStart', 'onRowEditStop', 'onRowGroupingModelChange', 'onRowModesModelChange', 'onRowOrderChange', 'onRowSelectionModelChange', 'onRowsScrollEnd', 'onSidebarClose', 'onSidebarOpen', 'onSortModelChange', 'onUndo', 'pageSizeOptions', 'pagination', 'paginationMeta', 'paginationMode', 'paginationModel', 'pinnedColumns', 'pinnedColumnsSectionSeparator', 'pinnedRows', 'pinnedRowsSectionSeparator', 'pivotActive', 'pivotModel', 'pivotPanelOpen', 'pivotingColDef', 'processRowUpdate', 'resizeThrottleMs', 'rowBufferPx', 'rowCount', 'rowGroupingColumnMode', 'rowGroupingModel', 'rowHeight', 'rowModesModel', 'rowReordering', 'rowSelection', 'rowSelectionModel', 'rowSelectionPropagation', 'rowSpacingType', 'rowSpanning', 'rows', 'rowsLoadingMode', 'scrollEndThreshold', 'scrollbarSize', 'setTreeDataPath', 'showCellVerticalBorder', 'showColumnVerticalBorder', 'showToolbar', 'slotProps', 'slots', 'sortModel', 'sortingMode', 'sortingOrder', 'splitClipboardPastedText', 'sx', 'tabNavigation', 'throttleRowsMs', 'treeData', 'virtualizeColumnsWithAutoRowHeight'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/data-grid-premium',
-    false,
-    /\.\/data-grid-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DataGridPremium" allowedProps={allowedProps}>
+      <TypesDataGridPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.js b/docs/pages/x/api/data-grid/data-grid-pro.js
index 3d6a7378b6037..1864dac43f61c 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.js
+++ b/docs/pages/x/api/data-grid/data-grid-pro.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './data-grid-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDataGridPro } from './types.data-grid-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'aria-label', 'aria-labelledby', 'autoHeight', 'autoPageSize', 'autosizeOnMount', 'autosizeOptions', 'cellModesModel', 'checkboxColDef', 'checkboxSelection', 'checkboxSelectionVisibleOnly', 'classes', 'clipboardCopyCellDelimiter', 'columnBufferPx', 'columnFilterDebounceMs', 'columnGroupHeaderHeight', 'columnHeaderHeight', 'columnVisibilityModel', 'columns', 'dataSource', 'dataSourceCache', 'dataSourceRevalidateMs', 'defaultGroupingExpansionDepth', 'density', 'detailPanelExpandedRowIds', 'disableAutosize', 'disableChildrenFiltering', 'disableChildrenSorting', 'disableColumnFilter', 'disableColumnMenu', 'disableColumnPinning', 'disableColumnReorder', 'disableColumnResize', 'disableColumnSelector', 'disableColumnSorting', 'disableDensitySelector', 'disableEval', 'disableMultipleColumnsFiltering', 'disableMultipleColumnsSorting', 'disableMultipleRowSelection', 'disableRowSelectionExcludeModel', 'disableRowSelectionOnClick', 'disableVirtualization', 'editMode', 'estimatedRowCount', 'experimentalFeatures', 'filterDebounceMs', 'filterMode', 'filterModel', 'getCellClassName', 'getDetailPanelContent', 'getDetailPanelHeight', 'getEstimatedRowHeight', 'getRowClassName', 'getRowHeight', 'getRowId', 'getRowSpacing', 'getTreeDataPath', 'groupingColDef', 'headerFilterHeight', 'headerFilters', 'hideFooter', 'hideFooterPagination', 'hideFooterRowCount', 'hideFooterSelectedRowCount', 'ignoreDiacritics', 'ignoreValueFormatterDuringExport', 'initialState', 'isCellEditable', 'isGroupExpandedByDefault', 'isRowReorderable', 'isRowSelectable', 'isValidRowReorder', 'keepColumnPositionIfDraggedOutside', 'keepNonExistentRowsSelected', 'label', 'lazyLoading', 'lazyLoadingRequestThrottleMs', 'listView', 'listViewColumn', 'loading', 'localeText', 'logLevel', 'logger', 'multipleColumnsSortingMode', 'nonce', 'onCellClick', 'onCellDoubleClick', 'onCellEditStart', 'onCellEditStop', 'onCellKeyDown', 'onCellModesModelChange', 'onClipboardCopy', 'onColumnHeaderClick', 'onColumnHeaderContextMenu', 'onColumnHeaderDoubleClick', 'onColumnHeaderEnter', 'onColumnHeaderLeave', 'onColumnHeaderOut', 'onColumnHeaderOver', 'onColumnOrderChange', 'onColumnResize', 'onColumnVisibilityModelChange', 'onColumnWidthChange', 'onDataSourceError', 'onDensityChange', 'onDetailPanelExpandedRowIdsChange', 'onFetchRows', 'onFilterModelChange', 'onMenuClose', 'onMenuOpen', 'onPaginationMetaChange', 'onPaginationModelChange', 'onPinnedColumnsChange', 'onPreferencePanelClose', 'onPreferencePanelOpen', 'onProcessRowUpdateError', 'onResize', 'onRowClick', 'onRowCountChange', 'onRowDoubleClick', 'onRowEditStart', 'onRowEditStop', 'onRowModesModelChange', 'onRowOrderChange', 'onRowSelectionModelChange', 'onRowsScrollEnd', 'onSortModelChange', 'pageSizeOptions', 'pagination', 'paginationMeta', 'paginationMode', 'paginationModel', 'pinnedColumns', 'pinnedColumnsSectionSeparator', 'pinnedRows', 'pinnedRowsSectionSeparator', 'processRowUpdate', 'resizeThrottleMs', 'rowBufferPx', 'rowCount', 'rowHeight', 'rowModesModel', 'rowReordering', 'rowSelection', 'rowSelectionModel', 'rowSelectionPropagation', 'rowSpacingType', 'rowSpanning', 'rows', 'rowsLoadingMode', 'scrollEndThreshold', 'scrollbarSize', 'setTreeDataPath', 'showCellVerticalBorder', 'showColumnVerticalBorder', 'showToolbar', 'slotProps', 'slots', 'sortModel', 'sortingMode', 'sortingOrder', 'sx', 'tabNavigation', 'throttleRowsMs', 'treeData', 'virtualizeColumnsWithAutoRowHeight'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/data-grid-pro',
-    false,
-    /\.\/data-grid-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DataGridPro" allowedProps={allowedProps}>
+      <TypesDataGridPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/data-grid.js b/docs/pages/x/api/data-grid/data-grid.js
index c422a7a5d7421..4959c57fece1c 100644
--- a/docs/pages/x/api/data-grid/data-grid.js
+++ b/docs/pages/x/api/data-grid/data-grid.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './data-grid.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDataGrid } from './types.data-grid';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'aria-label', 'aria-labelledby', 'autoHeight', 'autoPageSize', 'autosizeOnMount', 'autosizeOptions', 'cellModesModel', 'checkboxColDef', 'checkboxSelection', 'classes', 'clipboardCopyCellDelimiter', 'columnBufferPx', 'columnFilterDebounceMs', 'columnGroupHeaderHeight', 'columnHeaderHeight', 'columnVisibilityModel', 'columns', 'dataSource', 'dataSourceCache', 'dataSourceRevalidateMs', 'density', 'disableAutosize', 'disableColumnFilter', 'disableColumnMenu', 'disableColumnResize', 'disableColumnSelector', 'disableColumnSorting', 'disableDensitySelector', 'disableEval', 'disableMultipleRowSelection', 'disableRowSelectionExcludeModel', 'disableRowSelectionOnClick', 'disableVirtualization', 'editMode', 'estimatedRowCount', 'experimentalFeatures', 'filterDebounceMs', 'filterMode', 'filterModel', 'getCellClassName', 'getDetailPanelContent', 'getEstimatedRowHeight', 'getRowClassName', 'getRowHeight', 'getRowId', 'getRowSpacing', 'hideFooter', 'hideFooterPagination', 'hideFooterSelectedRowCount', 'ignoreDiacritics', 'ignoreValueFormatterDuringExport', 'initialState', 'isCellEditable', 'isRowSelectable', 'keepNonExistentRowsSelected', 'label', 'loading', 'localeText', 'logLevel', 'logger', 'nonce', 'onCellClick', 'onCellDoubleClick', 'onCellEditStart', 'onCellEditStop', 'onCellKeyDown', 'onCellModesModelChange', 'onClipboardCopy', 'onColumnHeaderClick', 'onColumnHeaderContextMenu', 'onColumnHeaderDoubleClick', 'onColumnHeaderEnter', 'onColumnHeaderLeave', 'onColumnHeaderOut', 'onColumnHeaderOver', 'onColumnOrderChange', 'onColumnResize', 'onColumnVisibilityModelChange', 'onColumnWidthChange', 'onDataSourceError', 'onDensityChange', 'onFilterModelChange', 'onMenuClose', 'onMenuOpen', 'onPaginationMetaChange', 'onPaginationModelChange', 'onPreferencePanelClose', 'onPreferencePanelOpen', 'onProcessRowUpdateError', 'onResize', 'onRowClick', 'onRowCountChange', 'onRowDoubleClick', 'onRowEditStart', 'onRowEditStop', 'onRowModesModelChange', 'onRowSelectionModelChange', 'onSortModelChange', 'pageSizeOptions', 'paginationMeta', 'paginationMode', 'paginationModel', 'processRowUpdate', 'resizeThrottleMs', 'rowBufferPx', 'rowCount', 'rowHeight', 'rowModesModel', 'rowSelection', 'rowSelectionModel', 'rowSpacingType', 'rowSpanning', 'rows', 'scrollbarSize', 'showCellVerticalBorder', 'showColumnVerticalBorder', 'showToolbar', 'slotProps', 'slots', 'sortModel', 'sortingMode', 'sortingOrder', 'sx', 'virtualizeColumnsWithAutoRowHeight'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/data-grid',
-    false,
-    /\.\/data-grid.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DataGrid" allowedProps={allowedProps}>
+      <TypesDataGrid />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/export-csv.js b/docs/pages/x/api/data-grid/export-csv.js
index a8d355e053809..6a45b609b4163 100644
--- a/docs/pages/x/api/data-grid/export-csv.js
+++ b/docs/pages/x/api/data-grid/export-csv.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './export-csv.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesExportCsv } from './types.export-csv';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['options', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/export-csv',
-    false,
-    /\.\/export-csv.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ExportCsv" allowedProps={allowedProps}>
+      <TypesExportCsv />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/export-excel.js b/docs/pages/x/api/data-grid/export-excel.js
index adc6be39b5c98..d0212f5c344bd 100644
--- a/docs/pages/x/api/data-grid/export-excel.js
+++ b/docs/pages/x/api/data-grid/export-excel.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './export-excel.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesExportExcel } from './types.export-excel';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['options', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/export-excel',
-    false,
-    /\.\/export-excel.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ExportExcel" allowedProps={allowedProps}>
+      <TypesExportExcel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/export-print.js b/docs/pages/x/api/data-grid/export-print.js
index 9a21a5264e0ff..b51b460f2037b 100644
--- a/docs/pages/x/api/data-grid/export-print.js
+++ b/docs/pages/x/api/data-grid/export-print.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './export-print.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesExportPrint } from './types.export-print';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['options', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/export-print',
-    false,
-    /\.\/export-print.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ExportPrint" allowedProps={allowedProps}>
+      <TypesExportPrint />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/filter-panel-trigger.js b/docs/pages/x/api/data-grid/filter-panel-trigger.js
index 64deb079af936..7ecc122bd2b09 100644
--- a/docs/pages/x/api/data-grid/filter-panel-trigger.js
+++ b/docs/pages/x/api/data-grid/filter-panel-trigger.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './filter-panel-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesFilterPanelTrigger } from './types.filter-panel-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/filter-panel-trigger',
-    false,
-    /\.\/filter-panel-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="FilterPanelTrigger" allowedProps={allowedProps}>
+      <TypesFilterPanelTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-actions-col-def.js b/docs/pages/x/api/data-grid/grid-actions-col-def.js
index 63c010197048d..043321d3ffb04 100644
--- a/docs/pages/x/api/data-grid/grid-actions-col-def.js
+++ b/docs/pages/x/api/data-grid/grid-actions-col-def.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-actions-col-def.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridActionsColDef } from './types.grid-actions-col-def';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-actions-col-def.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridActionsColDef" allowedProps={allowedProps}>
+      <TypesGridActionsColDef />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-aggregation-function-data-source.js b/docs/pages/x/api/data-grid/grid-aggregation-function-data-source.js
index daa2fe828e013..e096e97ce5193 100644
--- a/docs/pages/x/api/data-grid/grid-aggregation-function-data-source.js
+++ b/docs/pages/x/api/data-grid/grid-aggregation-function-data-source.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-aggregation-function-data-source.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridAggregationFunctionDataSource } from './types.grid-aggregation-function-data-source';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-aggregation-function-data-source.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridAggregationFunctionDataSource" allowedProps={allowedProps}>
+      <TypesGridAggregationFunctionDataSource />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-aggregation-function.js b/docs/pages/x/api/data-grid/grid-aggregation-function.js
index 15c7b25e9ea52..d4285d979e8e4 100644
--- a/docs/pages/x/api/data-grid/grid-aggregation-function.js
+++ b/docs/pages/x/api/data-grid/grid-aggregation-function.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-aggregation-function.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridAggregationFunction } from './types.grid-aggregation-function';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-aggregation-function.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridAggregationFunction" allowedProps={allowedProps}>
+      <TypesGridAggregationFunction />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-api.js b/docs/pages/x/api/data-grid/grid-api.js
index cb2f63ba6fda1..3b9d3d54e2240 100644
--- a/docs/pages/x/api/data-grid/grid-api.js
+++ b/docs/pages/x/api/data-grid/grid-api.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-api.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridApi } from './types.grid-api';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-api.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridApi" allowedProps={allowedProps}>
+      <TypesGridApi />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-cell-params.js b/docs/pages/x/api/data-grid/grid-cell-params.js
index a45d8605abced..77c79aac78c9f 100644
--- a/docs/pages/x/api/data-grid/grid-cell-params.js
+++ b/docs/pages/x/api/data-grid/grid-cell-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-cell-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridCellParams } from './types.grid-cell-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-cell-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridCellParams" allowedProps={allowedProps}>
+      <TypesGridCellParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-charts-panel.js b/docs/pages/x/api/data-grid/grid-charts-panel.js
index 332fb8782eef7..bd11666a99e29 100644
--- a/docs/pages/x/api/data-grid/grid-charts-panel.js
+++ b/docs/pages/x/api/data-grid/grid-charts-panel.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './grid-charts-panel.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridChartsPanel } from './types.grid-charts-panel';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['getColumnName', 'schema'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/grid-charts-panel',
-    false,
-    /\.\/grid-charts-panel.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridChartsPanel" allowedProps={allowedProps}>
+      <TypesGridChartsPanel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-charts-renderer-proxy.js b/docs/pages/x/api/data-grid/grid-charts-renderer-proxy.js
index 8027a9ec1f538..d883bbba99293 100644
--- a/docs/pages/x/api/data-grid/grid-charts-renderer-proxy.js
+++ b/docs/pages/x/api/data-grid/grid-charts-renderer-proxy.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './grid-charts-renderer-proxy.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridChartsRendererProxy } from './types.grid-charts-renderer-proxy';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['id', 'label', 'onRender', 'renderer'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/grid-charts-renderer-proxy',
-    false,
-    /\.\/grid-charts-renderer-proxy.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridChartsRendererProxy" allowedProps={allowedProps}>
+      <TypesGridChartsRendererProxy />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-col-def.js b/docs/pages/x/api/data-grid/grid-col-def.js
index bee73cc808bda..5ee0d07e2643e 100644
--- a/docs/pages/x/api/data-grid/grid-col-def.js
+++ b/docs/pages/x/api/data-grid/grid-col-def.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-col-def.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridColDef } from './types.grid-col-def';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-col-def.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridColDef" allowedProps={allowedProps}>
+      <TypesGridColDef />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-csv-export-options.js b/docs/pages/x/api/data-grid/grid-csv-export-options.js
index de92b44c6204c..2670bc8933d59 100644
--- a/docs/pages/x/api/data-grid/grid-csv-export-options.js
+++ b/docs/pages/x/api/data-grid/grid-csv-export-options.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-csv-export-options.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridCsvExportOptions } from './types.grid-csv-export-options';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-csv-export-options.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridCsvExportOptions" allowedProps={allowedProps}>
+      <TypesGridCsvExportOptions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-excel-export-options.js b/docs/pages/x/api/data-grid/grid-excel-export-options.js
index 7862c79516f45..ca4356571c9e1 100644
--- a/docs/pages/x/api/data-grid/grid-excel-export-options.js
+++ b/docs/pages/x/api/data-grid/grid-excel-export-options.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-excel-export-options.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridExcelExportOptions } from './types.grid-excel-export-options';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-excel-export-options.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridExcelExportOptions" allowedProps={allowedProps}>
+      <TypesGridExcelExportOptions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-export-state-params.js b/docs/pages/x/api/data-grid/grid-export-state-params.js
index 8cf04c5569a11..152c14ad55b9e 100644
--- a/docs/pages/x/api/data-grid/grid-export-state-params.js
+++ b/docs/pages/x/api/data-grid/grid-export-state-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-export-state-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridExportStateParams } from './types.grid-export-state-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-export-state-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridExportStateParams" allowedProps={allowedProps}>
+      <TypesGridExportStateParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-filter-form.js b/docs/pages/x/api/data-grid/grid-filter-form.js
index 729bceeb8a8f2..28170d102cbbd 100644
--- a/docs/pages/x/api/data-grid/grid-filter-form.js
+++ b/docs/pages/x/api/data-grid/grid-filter-form.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './grid-filter-form.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridFilterForm } from './types.grid-filter-form';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['applyFilterChanges', 'applyMultiFilterOperatorChanges', 'columnInputProps', 'columnsSort', 'deleteFilter', 'deleteIconProps', 'disableMultiFilterOperator', 'filterColumns', 'focusElementRef', 'hasMultipleFilters', 'item', 'logicOperatorInputProps', 'logicOperators', 'operatorInputProps', 'readOnly', 'showMultiFilterOperators', 'valueInputProps'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/grid-filter-form',
-    false,
-    /\.\/grid-filter-form.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridFilterForm" allowedProps={allowedProps}>
+      <TypesGridFilterForm />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-filter-item.js b/docs/pages/x/api/data-grid/grid-filter-item.js
index 02f9a35fa5bdc..412f63ef4ed78 100644
--- a/docs/pages/x/api/data-grid/grid-filter-item.js
+++ b/docs/pages/x/api/data-grid/grid-filter-item.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-filter-item.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridFilterItem } from './types.grid-filter-item';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-filter-item.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridFilterItem" allowedProps={allowedProps}>
+      <TypesGridFilterItem />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-filter-model.js b/docs/pages/x/api/data-grid/grid-filter-model.js
index 79f2f0c890fdd..03f42f9df3ac0 100644
--- a/docs/pages/x/api/data-grid/grid-filter-model.js
+++ b/docs/pages/x/api/data-grid/grid-filter-model.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-filter-model.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridFilterModel } from './types.grid-filter-model';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-filter-model.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridFilterModel" allowedProps={allowedProps}>
+      <TypesGridFilterModel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-filter-operator.js b/docs/pages/x/api/data-grid/grid-filter-operator.js
index 1fbb4046eb935..bccd3e30df945 100644
--- a/docs/pages/x/api/data-grid/grid-filter-operator.js
+++ b/docs/pages/x/api/data-grid/grid-filter-operator.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-filter-operator.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridFilterOperator } from './types.grid-filter-operator';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-filter-operator.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridFilterOperator" allowedProps={allowedProps}>
+      <TypesGridFilterOperator />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-filter-panel.js b/docs/pages/x/api/data-grid/grid-filter-panel.js
index 528471dd2055d..e82de9ef645b0 100644
--- a/docs/pages/x/api/data-grid/grid-filter-panel.js
+++ b/docs/pages/x/api/data-grid/grid-filter-panel.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './grid-filter-panel.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridFilterPanel } from './types.grid-filter-panel';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['columnsSort', 'disableAddFilterButton', 'disableRemoveAllButton', 'filterFormProps', 'getColumnForNewFilter', 'logicOperators', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/grid-filter-panel',
-    false,
-    /\.\/grid-filter-panel.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridFilterPanel" allowedProps={allowedProps}>
+      <TypesGridFilterPanel />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-list-view-col-def.js b/docs/pages/x/api/data-grid/grid-list-view-col-def.js
index f49ae010dd42b..da4d7dcb795f5 100644
--- a/docs/pages/x/api/data-grid/grid-list-view-col-def.js
+++ b/docs/pages/x/api/data-grid/grid-list-view-col-def.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-list-view-col-def.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridListViewColDef } from './types.grid-list-view-col-def';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-list-view-col-def.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridListViewColDef" allowedProps={allowedProps}>
+      <TypesGridListViewColDef />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.js b/docs/pages/x/api/data-grid/grid-print-export-options.js
index 5a0637dd0f1f9..330f661f1382f 100644
--- a/docs/pages/x/api/data-grid/grid-print-export-options.js
+++ b/docs/pages/x/api/data-grid/grid-print-export-options.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-print-export-options.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridPrintExportOptions } from './types.grid-print-export-options';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-print-export-options.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridPrintExportOptions" allowedProps={allowedProps}>
+      <TypesGridPrintExportOptions />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-render-context.js b/docs/pages/x/api/data-grid/grid-render-context.js
index 04495444fc802..dd5d27ac5832f 100644
--- a/docs/pages/x/api/data-grid/grid-render-context.js
+++ b/docs/pages/x/api/data-grid/grid-render-context.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-render-context.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridRenderContext } from './types.grid-render-context';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-render-context.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridRenderContext" allowedProps={allowedProps}>
+      <TypesGridRenderContext />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.js b/docs/pages/x/api/data-grid/grid-row-class-name-params.js
index 06be136dfaecb..0ab3d93cf35b8 100644
--- a/docs/pages/x/api/data-grid/grid-row-class-name-params.js
+++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-row-class-name-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridRowClassNameParams } from './types.grid-row-class-name-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-row-class-name-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridRowClassNameParams" allowedProps={allowedProps}>
+      <TypesGridRowClassNameParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-row-order-change-params.js b/docs/pages/x/api/data-grid/grid-row-order-change-params.js
index 7287ffe8ade3a..9f379cbd5b944 100644
--- a/docs/pages/x/api/data-grid/grid-row-order-change-params.js
+++ b/docs/pages/x/api/data-grid/grid-row-order-change-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-row-order-change-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridRowOrderChangeParams } from './types.grid-row-order-change-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-row-order-change-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridRowOrderChangeParams" allowedProps={allowedProps}>
+      <TypesGridRowOrderChangeParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-row-params.js b/docs/pages/x/api/data-grid/grid-row-params.js
index 572c5c071ce36..fc6ffea329da3 100644
--- a/docs/pages/x/api/data-grid/grid-row-params.js
+++ b/docs/pages/x/api/data-grid/grid-row-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-row-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridRowParams } from './types.grid-row-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-row-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridRowParams" allowedProps={allowedProps}>
+      <TypesGridRowParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.js b/docs/pages/x/api/data-grid/grid-row-spacing-params.js
index 64d8ec87f6da5..5320539d56a4c 100644
--- a/docs/pages/x/api/data-grid/grid-row-spacing-params.js
+++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-row-spacing-params.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridRowSpacingParams } from './types.grid-row-spacing-params';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-row-spacing-params.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridRowSpacingParams" allowedProps={allowedProps}>
+      <TypesGridRowSpacingParams />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-single-select-col-def.js b/docs/pages/x/api/data-grid/grid-single-select-col-def.js
index 35d83c7c0ddb9..a36876493e597 100644
--- a/docs/pages/x/api/data-grid/grid-single-select-col-def.js
+++ b/docs/pages/x/api/data-grid/grid-single-select-col-def.js
@@ -1,22 +1,12 @@
-import * as React from 'react';
-import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import mapApiPageTranslations from 'docsx/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './grid-single-select-col-def.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridSingleSelectColDef } from './types.grid-single-select-col-def';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return (
-    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />
-  );
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/',
-    false,
-    /\.\/grid-single-select-col-def.*.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridSingleSelectColDef" allowedProps={allowedProps}>
+      <TypesGridSingleSelectColDef />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js
index ad23668eca0fe..75a262f7f46f6 100644
--- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js
+++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './grid-toolbar-quick-filter.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesGridToolbarQuickFilter } from './types.grid-toolbar-quick-filter';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['debounceMs', 'quickFilterFormatter', 'quickFilterParser'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/grid-toolbar-quick-filter',
-    false,
-    /\.\/grid-toolbar-quick-filter.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="GridToolbarQuickFilter" allowedProps={allowedProps}>
+      <TypesGridToolbarQuickFilter />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/pivot-panel-trigger.js b/docs/pages/x/api/data-grid/pivot-panel-trigger.js
index 0123191330594..89cd3b5eb7328 100644
--- a/docs/pages/x/api/data-grid/pivot-panel-trigger.js
+++ b/docs/pages/x/api/data-grid/pivot-panel-trigger.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './pivot-panel-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPivotPanelTrigger } from './types.pivot-panel-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/pivot-panel-trigger',
-    false,
-    /\.\/pivot-panel-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PivotPanelTrigger" allowedProps={allowedProps}>
+      <TypesPivotPanelTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/prompt-field-control.js b/docs/pages/x/api/data-grid/prompt-field-control.js
index ab175ab89335f..d29bf1cc4d4c3 100644
--- a/docs/pages/x/api/data-grid/prompt-field-control.js
+++ b/docs/pages/x/api/data-grid/prompt-field-control.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './prompt-field-control.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPromptFieldControl } from './types.prompt-field-control';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/prompt-field-control',
-    false,
-    /\.\/prompt-field-control.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PromptFieldControl" allowedProps={allowedProps}>
+      <TypesPromptFieldControl />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/prompt-field-record.js b/docs/pages/x/api/data-grid/prompt-field-record.js
index 5bb655d989168..0c6ec3e2c5989 100644
--- a/docs/pages/x/api/data-grid/prompt-field-record.js
+++ b/docs/pages/x/api/data-grid/prompt-field-record.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './prompt-field-record.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPromptFieldRecord } from './types.prompt-field-record';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/prompt-field-record',
-    false,
-    /\.\/prompt-field-record.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PromptFieldRecord" allowedProps={allowedProps}>
+      <TypesPromptFieldRecord />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/prompt-field-send.js b/docs/pages/x/api/data-grid/prompt-field-send.js
index 94c3ffe37ca6a..b9b2aad220d67 100644
--- a/docs/pages/x/api/data-grid/prompt-field-send.js
+++ b/docs/pages/x/api/data-grid/prompt-field-send.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './prompt-field-send.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPromptFieldSend } from './types.prompt-field-send';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/prompt-field-send',
-    false,
-    /\.\/prompt-field-send.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PromptFieldSend" allowedProps={allowedProps}>
+      <TypesPromptFieldSend />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/prompt-field.js b/docs/pages/x/api/data-grid/prompt-field.js
index 75d46ab79a7ba..fbd14903cc00a 100644
--- a/docs/pages/x/api/data-grid/prompt-field.js
+++ b/docs/pages/x/api/data-grid/prompt-field.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './prompt-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPromptField } from './types.prompt-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'onRecordError', 'onSubmit', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/prompt-field',
-    false,
-    /\.\/prompt-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PromptField" allowedProps={allowedProps}>
+      <TypesPromptField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/quick-filter-clear.js b/docs/pages/x/api/data-grid/quick-filter-clear.js
index f66fa09e47405..c6fbb2dd30ddc 100644
--- a/docs/pages/x/api/data-grid/quick-filter-clear.js
+++ b/docs/pages/x/api/data-grid/quick-filter-clear.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './quick-filter-clear.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesQuickFilterClear } from './types.quick-filter-clear';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/quick-filter-clear',
-    false,
-    /\.\/quick-filter-clear.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="QuickFilterClear" allowedProps={allowedProps}>
+      <TypesQuickFilterClear />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/quick-filter-control.js b/docs/pages/x/api/data-grid/quick-filter-control.js
index 59e27a8de990a..d4f81bd342009 100644
--- a/docs/pages/x/api/data-grid/quick-filter-control.js
+++ b/docs/pages/x/api/data-grid/quick-filter-control.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './quick-filter-control.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesQuickFilterControl } from './types.quick-filter-control';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/quick-filter-control',
-    false,
-    /\.\/quick-filter-control.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="QuickFilterControl" allowedProps={allowedProps}>
+      <TypesQuickFilterControl />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/quick-filter-trigger.js b/docs/pages/x/api/data-grid/quick-filter-trigger.js
index 2fdc1c6c7d1a6..c161a3ed328aa 100644
--- a/docs/pages/x/api/data-grid/quick-filter-trigger.js
+++ b/docs/pages/x/api/data-grid/quick-filter-trigger.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './quick-filter-trigger.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesQuickFilterTrigger } from './types.quick-filter-trigger';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/quick-filter-trigger',
-    false,
-    /\.\/quick-filter-trigger.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="QuickFilterTrigger" allowedProps={allowedProps}>
+      <TypesQuickFilterTrigger />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/quick-filter.js b/docs/pages/x/api/data-grid/quick-filter.js
index abc3905310b5e..c4b02c4d019ed 100644
--- a/docs/pages/x/api/data-grid/quick-filter.js
+++ b/docs/pages/x/api/data-grid/quick-filter.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './quick-filter.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesQuickFilter } from './types.quick-filter';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'debounceMs', 'defaultExpanded', 'expanded', 'formatter', 'onExpandedChange', 'parser', 'render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/quick-filter',
-    false,
-    /\.\/quick-filter.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="QuickFilter" allowedProps={allowedProps}>
+      <TypesQuickFilter />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/toolbar-button.js b/docs/pages/x/api/data-grid/toolbar-button.js
index 9752cd5ec17eb..23087419292af 100644
--- a/docs/pages/x/api/data-grid/toolbar-button.js
+++ b/docs/pages/x/api/data-grid/toolbar-button.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './toolbar-button.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesToolbarButton } from './types.toolbar-button';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/toolbar-button',
-    false,
-    /\.\/toolbar-button.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="ToolbarButton" allowedProps={allowedProps}>
+      <TypesToolbarButton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/toolbar.js b/docs/pages/x/api/data-grid/toolbar.js
index 721cfc4ba6c1c..c71a1e12559a2 100644
--- a/docs/pages/x/api/data-grid/toolbar.js
+++ b/docs/pages/x/api/data-grid/toolbar.js
@@ -1,21 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
-import jsonPageContent from './toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesToolbar } from './types.toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage {...layoutConfig} descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['render'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/data-grid/toolbar',
-    false,
-    /\.\/toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="Toolbar" allowedProps={allowedProps}>
+      <TypesToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/data-grid/types.ai-assistant-panel-trigger.ts b/docs/pages/x/api/data-grid/types.ai-assistant-panel-trigger.ts
new file mode 100644
index 0000000000000..36d3def98b68d
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.ai-assistant-panel-trigger.ts
@@ -0,0 +1,4 @@
+import { AiAssistantPanelTrigger } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesAiAssistantPanelTrigger = createTypes(import.meta.url, AiAssistantPanelTrigger);
diff --git a/docs/pages/x/api/data-grid/types.charts-panel-trigger.ts b/docs/pages/x/api/data-grid/types.charts-panel-trigger.ts
new file mode 100644
index 0000000000000..a691b4c42f21e
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.charts-panel-trigger.ts
@@ -0,0 +1,4 @@
+import { ChartsPanelTrigger } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesChartsPanelTrigger = createTypes(import.meta.url, ChartsPanelTrigger);
diff --git a/docs/pages/x/api/data-grid/types.columns-panel-trigger.ts b/docs/pages/x/api/data-grid/types.columns-panel-trigger.ts
new file mode 100644
index 0000000000000..06e436b3a24e1
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.columns-panel-trigger.ts
@@ -0,0 +1,4 @@
+import { ColumnsPanelTrigger } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesColumnsPanelTrigger = createTypes(import.meta.url, ColumnsPanelTrigger);
diff --git a/docs/pages/x/api/data-grid/types.data-grid-premium.ts b/docs/pages/x/api/data-grid/types.data-grid-premium.ts
new file mode 100644
index 0000000000000..872d4e2cb1d3e
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.data-grid-premium.ts
@@ -0,0 +1,4 @@
+import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDataGridPremium = createTypes(import.meta.url, DataGridPremium);
diff --git a/docs/pages/x/api/data-grid/types.data-grid-pro.ts b/docs/pages/x/api/data-grid/types.data-grid-pro.ts
new file mode 100644
index 0000000000000..4260505fb25f5
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.data-grid-pro.ts
@@ -0,0 +1,4 @@
+import { DataGridPro } from '@mui/x-data-grid-pro/DataGridPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDataGridPro = createTypes(import.meta.url, DataGridPro);
diff --git a/docs/pages/x/api/data-grid/types.data-grid.md b/docs/pages/x/api/data-grid/types.data-grid.md
new file mode 100644
index 0000000000000..46d1715bedc09
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.data-grid.md
@@ -0,0 +1,1212 @@
+# Data Grid
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.data-grid.md'
+
+## API Reference
+
+### DataGrid
+
+Features:
+
+- [DataGrid](https://mui.com/x/react-data-grid/features/)
+
+API:
+
+- [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+
+**DataGrid Props:**
+
+| Prop                               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Default                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| :--------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| aria-label                         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | The `aria-label` of the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| aria-labelledby                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | The `id` of the element containing a label for the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| label                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | The label of the Data Grid.&#xA;If the `showToolbar` prop is `true`, the label will be displayed in the toolbar and applied to the `aria-label` attribute of the grid.&#xA;If the `showToolbar` prop is `false`, the label will not be visible but will be applied to the `aria-label` attribute of the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| apiRef                             | `RefObject<GridApiCommunity \| null>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                        | The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| autoHeight                         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.&#xA;Use it instead of a flex parent container approach, if: you don't need to set a minimum or maximum height for the Data Gridyou want to avoid the scrollbar flickering when the content changes                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoPageSize                       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| autosizeOnMount                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, columns are autosized after the datagrid is mounted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| autosizeOptions                    | `GridAutosizeOptions`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                        | The options for autosize when user-initiated.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| cellModesModel                     | `GridCellModesModel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Controls the modes of the cells.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| checkboxColDef                     | `GridCheckboxSelectionColDef<GridValidRowModel>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | Definition of the column rendered when the `checkboxSelection` prop is enabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| checkboxSelection                  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| classes                            | `Partial<GridClasses>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| clipboardCopyCellDelimiter         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `'\t'`                                                   | The character used to separate cell values when copying to the clipboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| columnBufferPx                     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `150`                                                    | Column region in pixels to render before/after the viewport                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| columnFilterDebounceMs             | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `150`                                                    | The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| columnGroupHeaderHeight            | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Sets the height in pixels of the column group headers in the Data Grid.&#xA;Inherits the `columnHeaderHeight` value if not set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| columnGroupingModel                | `GridColumnGroup[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| columnHeaderHeight                 | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `56`                                                     | Sets the height in pixel of the column headers in the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| columnVisibilityModel              | `GridColumnVisibilityModel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                        | Set the column visibility model of the Data Grid.&#xA;If defined, the Data Grid will ignore the `hide` property in \[\[GridColDef]].                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| columns\*                          | `GridColDef<GridValidRowModel>[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                        | Set of columns of type \[\[GridColDef]]\[].                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| dataSource                         | `GridDataSource`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | The data source object.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| dataSourceCache                    | `GridDataSourceCache \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                                                        | Data source cache object.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| dataSourceRevalidateMs             | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `0`                                                      | If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.&#xA;If the refetched rows are different from the current rows, the grid will update the rows.&#xA;Set to `0` to disable polling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| density                            | `GridDensity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `"standard"`                                             | Set the density of the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| disableAutosize                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, column autosizing on header separator double-click is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableColumnFilter                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, column filters are disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| disableColumnMenu                  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the column menu is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| disableColumnResize                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, resizing columns is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| disableColumnSelector              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, hiding/showing columns is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| disableColumnSorting               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the column sorting feature will be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| disableDensitySelector             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the density selector is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| disableEval                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, `eval()` is not used for performance optimization.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| disableMultipleRowSelection        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | ``false (`!props.checkboxSelection` for MIT Data Grid)`` | If `true`, multiple selection using the Ctrl/CMD or Shift key is disabled.&#xA;The MIT DataGrid will ignore this prop, unless `checkboxSelection` is enabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| disableRowSelectionExcludeModel    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the Data Grid will not use the exclude model optimization when selecting all rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| disableRowSelectionOnClick         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the selection on click on a row or cell is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| disableVirtualization              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the virtualization is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| editMode                           | `GridEditMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `"cell"`                                                 | Controls whether to use the cell or row editing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| estimatedRowCount                  | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Use if the actual rowCount is not known upfront, but an estimation is available.&#xA;If some rows have children (for instance in the tree data), this number represents the amount of top level rows.&#xA;Applicable only with `paginationMode="server"` and when `rowCount="-1"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| experimentalFeatures               | `Partial<GridExperimentalFeatures>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | Unstable features, breaking changes might be introduced.&#xA;For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| filterDebounceMs                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `150`                                                    | The milliseconds delay to wait after a keystroke before triggering filtering.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| filterMode                         | `GridFeatureMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `"client"`                                               | Filtering can be processed on the server or client-side.&#xA;Set it to 'server' if you would like to handle filtering on the server-side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| filterModel                        | `GridFilterModel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                        | Set the filter model of the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| getCellClassName                   | `((params: GridCellParams<any, GridValidRowModel, GridValidRowModel, GridTreeNode>) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                        | Function that applies CSS classes dynamically on cells.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| getDetailPanelContent              | `((params: GridRowParams<GridValidRowModel>) => React.ReactNode)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                        | Function that returns the element to render in row detail.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| getEstimatedRowHeight              | `((params: GridRowHeightParams) => number \| null)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | Function that returns the estimated height for a row.&#xA;Only works if dynamic row height is used.&#xA;Once the row height is measured this value is discarded.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| getRowClassName                    | `((params: GridRowClassNameParams<GridValidRowModel>) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                        | Function that applies CSS classes dynamically on rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| getRowHeight                       | `((params: GridRowHeightParams) => GridRowHeightReturnValue)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -                                                        | Function that sets the row height per row.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| getRowId                           | `GridRowIdGetter<GridValidRowModel>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Return the id of a given \[\[GridRowModel]].&#xA;Ensure the reference of this prop is stable to avoid performance implications.&#xA;It could be done by either defining the prop outside of the component or by memoizing it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| getRowSpacing                      | `((params: GridRowSpacingParams) => GridRowSpacing)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Function that allows to specify the spacing between rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| hideFooter                         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the footer component is hidden.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| hideFooterPagination               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the pagination component in the footer is hidden.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| hideFooterSelectedRowCount         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the selected row count in the footer is hidden.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ignoreDiacritics                   | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the diacritics (accents) are ignored when filtering or quick filtering.&#xA;E.g. when filter value is `cafe`, the rows with `café` will be visible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ignoreValueFormatterDuringExport   | `boolean \| { csvExport?: boolean; clipboardExport?: boolean }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `false`                                                  | If `true`, the Data Grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.&#xA;If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| initialState                       | `GridInitialStateCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                        | The initial state of the DataGrid.&#xA;The data in it will be set in the state on initialization but will not be controlled.&#xA;If one of the data in `initialState` is also being controlled, then the control state wins.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| isCellEditable                     | `((params: GridCellParams<any, GridValidRowModel, GridValidRowModel, GridTreeNode>) => boolean)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | Callback fired when a cell is rendered, returns true if the cell is editable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| isRowSelectable                    | `((params: GridRowParams<GridValidRowModel>) => boolean)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                                                        | Determines if a row can be selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| keepNonExistentRowsSelected        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the selection model will retain selected rows that do not exist.&#xA;Useful when using server side pagination and row selections need to be retained&#xA;when changing pages.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| loading                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, a loading overlay is displayed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| localeText                         | `Partial<GridLocaleText>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -                                                        | Set the locale text of the Data Grid.&#xA;You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| logLevel                           | `'error' \| 'info' \| 'debug' \| 'warn' \| false`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `"error" ("warn" in dev mode)`                           | Allows to pass the logging level or false to turn off logging.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| logger                             | `Logger`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `console`                                                | Pass a custom logger in the components that implements the \[\[Logger]] interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| nonce                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onCellClick                        | `GridEventListener<'cellClick'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | Callback fired when any cell is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onCellDoubleClick                  | `GridEventListener<'cellDoubleClick'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                        | Callback fired when a double click event comes from a cell element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onCellEditStart                    | `GridEventListener<'cellEditStart'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Callback fired when the cell turns to edit mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| onCellEditStop                     | `GridEventListener<'cellEditStop'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | Callback fired when the cell turns to view mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| onCellKeyDown                      | `GridEventListener<'cellKeyDown'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                        | Callback fired when a keydown event comes from a cell element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onCellModesModelChange             | `((cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                        | Callback fired when the `cellModesModel` prop changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onClipboardCopy                    | `GridEventListener<'clipboardCopy'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Callback called when the data is copied to the clipboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onColumnHeaderClick                | `GridEventListener<'columnHeaderClick'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Callback fired when a click event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onColumnHeaderContextMenu          | `GridEventListener<'columnHeaderContextMenu'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                        | Callback fired when a contextmenu event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onColumnHeaderDoubleClick          | `GridEventListener<'columnHeaderDoubleClick'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -                                                        | Callback fired when a double click event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| onColumnHeaderEnter                | `GridEventListener<'columnHeaderEnter'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Callback fired when a mouse enter event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onColumnHeaderLeave                | `GridEventListener<'columnHeaderLeave'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Callback fired when a mouse leave event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onColumnHeaderOut                  | `GridEventListener<'columnHeaderOut'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                        | Callback fired when a mouseout event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onColumnHeaderOver                 | `GridEventListener<'columnHeaderOver'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                                                        | Callback fired when a mouseover event comes from a column header element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onColumnOrderChange                | `GridEventListener<'columnOrderChange'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Callback fired when a column is reordered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| onColumnResize                     | `GridEventListener<'columnResize'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | Callback fired while a column is being resized.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onColumnVisibilityModelChange      | `((model: GridColumnVisibilityModel, details: GridCallbackDetails) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                        | Callback fired when the column visibility model changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onColumnWidthChange                | `GridEventListener<'columnWidthChange'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Callback fired when the width of a column is changed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onDataSourceError                  | `((error: GridGetRowsError \| GridUpdateRowError) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                        | Callback fired when a data source request fails.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| onDensityChange                    | `((density: GridDensity) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                        | Callback fired when the density changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onFilterModelChange                | `((model: GridFilterModel, details: GridCallbackDetails<'filter'>) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                        | Callback fired when the Filter model changes before the filters are applied.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| onMenuClose                        | `GridEventListener<'menuClose'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | Callback fired when the menu is closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onMenuOpen                         | `GridEventListener<'menuOpen'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                        | Callback fired when the menu is opened.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onPaginationMetaChange             | `((paginationMeta: GridPaginationMeta) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | Callback fired when the pagination meta has changed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| onPaginationModelChange            | `((model: GridPaginationModel, details: GridCallbackDetails<'pagination'>) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Callback fired when the pagination model has changed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onPreferencePanelClose             | `GridEventListener<'preferencePanelClose'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                        | Callback fired when the preferences panel is closed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| onPreferencePanelOpen              | `GridEventListener<'preferencePanelOpen'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                        | Callback fired when the preferences panel is opened.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| onProcessRowUpdateError            | `((error: any) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Callback called when `processRowUpdate()` throws an error or rejects.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onResize                           | `GridEventListener<'debouncedResize'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                        | Callback fired when the Data Grid is resized.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| onRowClick                         | `GridEventListener<'rowClick'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                        | Callback fired when a row is clicked.&#xA;Not called if the target clicked is an interactive element added by the built-in columns.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onRowCountChange                   | `((count: number) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                        | Callback fired when the row count has changed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onRowDoubleClick                   | `GridEventListener<'rowDoubleClick'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                        | Callback fired when a double click event comes from a row container element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| onRowEditStart                     | `GridEventListener<'rowEditStart'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | Callback fired when the row turns to edit mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onRowEditStop                      | `GridEventListener<'rowEditStop'>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -                                                        | Callback fired when the row turns to view mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onRowModesModelChange              | `((rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -                                                        | Callback fired when the `rowModesModel` prop changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onRowSelectionModelChange          | `((rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Callback fired when the selection state of one or multiple rows changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSortModelChange                  | `((model: GridSortItem[], details: GridCallbackDetails) => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -                                                        | Callback fired when the sort model changes before a column is sorted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| pageSizeOptions                    | `(number \| { value: number; label: string })[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `[25, 50, 100]`                                          | Select the pageSize dynamically using the component UI.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| pagination                         | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| paginationMeta                     | `GridPaginationMeta`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | The extra information about the pagination state of the Data Grid.&#xA;Only applicable with `paginationMode="server"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| paginationMode                     | `GridFeatureMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `"client"`                                               | Pagination can be processed on the server or client-side.&#xA;Set it to 'client' if you would like to handle the pagination on the client-side.&#xA;Set it to 'server' if you would like to handle the pagination on the server-side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| paginationModel                    | `GridPaginationModel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                        | The pagination model of type \[\[GridPaginationModel]] which refers to current `page` and `pageSize`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| processRowUpdate                   | `((newRow: GridValidRowModel, oldRow: GridValidRowModel, params: { rowId: GridRowId }) => GridValidRowModel \| Promise<GridValidRowModel>)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                        | Callback called before updating a row with new values in the row and cell editing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| resizeThrottleMs                   | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `60`                                                     | The milliseconds throttle delay for resizing the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| rowBufferPx                        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `150`                                                    | Row region in pixels to render before/after the viewport                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| rowCount                           | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Set the total number of rows, if it is different from the length of the value `rows` prop.&#xA;If some rows have children (for instance in the tree data), this number represents the amount of top level rows.&#xA;Only works with `paginationMode="server"`, ignored when `paginationMode="client"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| rowHeight                          | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `52`                                                     | Sets the height in pixel of a row in the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| rowModesModel                      | `GridRowModesModel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -                                                        | Controls the modes of the rows.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| rowSelection                       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `true`                                                   | If `false`, the row selection mode is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| rowSelectionModel                  | `GridRowSelectionModel`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -                                                        | Sets the row selection model of the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| rowSpacingType                     | `'margin' \| 'border'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `"margin"`                                               | Sets the type of space between rows added by `getRowSpacing`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| rowSpanning                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the Data Grid will auto span the cells over the rows having the same value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| rows                               | `GridValidRowModel[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `[]`                                                     | Set of rows of type \[\[GridRowsProp]].                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| scrollbarSize                      | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | Override the height/width of the Data Grid inner scrollbar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| showCellVerticalBorder             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, vertical borders will be displayed between cells.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| showColumnVerticalBorder           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, vertical borders will be displayed between column header items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| showToolbar                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the toolbar is displayed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| slotProps                          | `Partial<{ baseAutocomplete: Partial<{ id?: string; multiple?: true; freeSolo?: true; value?: string[]; options: string[]; getOptionLabel?: ((option: string) => string); isOptionEqualToValue?: ((option: string, value: string) => boolean); onChange?: ((event: React.SyntheticEvent, value: string[]) => void); onInputChange?: ((event: React.SyntheticEvent, value: string) => void); label?: React.ReactNode; placeholder?: string; slotProps?: { textField: TextFieldProps }; material?: Partial<AutocompleteProps<string, true, false, true, 'div'>> }>; baseBadge: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { badgeContent?: React.ReactNode; children?: React.ReactNode; color?: 'primary' \| 'default' \| 'error'; invisible?: boolean; overlap?: 'circular'; variant?: 'dot'; style?: React.CSSProperties } & BaseBadgePropsOverrides>; baseCheckbox: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; id?: string; autoFocus?: boolean; checked?: boolean; disabled?: boolean; fullWidth?: boolean; indeterminate?: boolean; inputRef?: React.Ref<HTMLInputElement>; name?: string; label?: React.ReactNode; onChange?: React.ChangeEventHandler; size?: 'small' \| 'medium'; density?: 'standard' \| 'compact'; slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & { ref?: React.Ref<HTMLInputElement> } }; style?: React.CSSProperties; tabIndex?: number; touchRippleRef?: any } & BaseCheckboxPropsOverrides>; baseChip: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLDivElement>; id?: string; label: string; size?: 'small' \| 'medium'; icon?: ReactElement; children?: null; variant?: 'filled' \| 'outlined' } & BaseChipPropsOverrides>; baseCircularProgress: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { size?: number \| string; color?: 'inherit' \| 'primary' } & BaseCircularProgressPropsOverrides>; baseDivider: Partial<{ className?: string; orientation?: 'horizontal' \| 'vertical'; material?: Partial<DividerProps> }>; baseLinearProgress: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & BaseLinearProgressPropsOverrides>; baseMenuList: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLUListElement>; id?: string; children?: React.ReactNode; autoFocus?: boolean; autoFocusItem?: boolean } & BaseMenuListPropsOverrides>; baseMenuItem: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { autoFocus?: boolean; children?: React.ReactNode; inert?: boolean; disabled?: boolean; iconStart?: React.ReactNode; iconEnd?: React.ReactNode; selected?: boolean; value?: number \| string \| string[]; style?: React.CSSProperties } & BaseMenuItemPropsOverrides>; baseTabs: Partial<{ className?: string; style?: React.CSSProperties; items: ({ value: string; label: string; children: React.ReactNode })[]; value: string; onChange: ((event: React.SyntheticEvent, value: string) => void); material?: Partial<TabsProps> }>; baseTextField: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; autoComplete?: string; color?: 'primary' \| 'error'; disabled?: boolean; error?: boolean; fullWidth?: boolean; helperText?: string \| null; id?: string; inputRef?: React.Ref<HTMLInputElement>; label?: React.ReactNode; onChange?: React.ChangeEventHandler; placeholder?: string; size?: 'small' \| 'medium'; slotProps?: { input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }; tabIndex?: number; type?: React.HTMLInputTypeAttribute; value?: string; ref?: Ref<HTMLInputElement>; multiline?: boolean; autoFocus?: boolean } & BaseTextFieldPropsOverrides>; baseSwitch: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { checked?: boolean; onChange?: React.ChangeEventHandler; size?: 'small' \| 'medium'; label?: React.ReactNode; disabled?: boolean; title?: string } & BaseSwitchPropsOverrides>; baseButton: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; baseIconButton: Partial<{ children?: React.ReactNode; className?: string; style?: React.CSSProperties; ref?: Ref<HTMLButtonElement>; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; tabIndex?: number; title?: string; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }>; baseToggleButton: Partial<{ className?: string; style?: React.CSSProperties; selected?: boolean; value: string; material?: Partial<ToggleButtonProps> }>; basePagination: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { count: number; page: number; rowsPerPage: number; rowsPerPageOptions?: (number \| { value: number; label: string })[]; onPageChange: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent> \| null, page: number) => void); onRowsPerPageChange?: ((rowsPerPage: number) => void); disabled?: boolean } & BasePaginationPropsOverrides>; basePopper: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; baseTooltip: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides>; baseInput: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLElement>; inputRef?: React.Ref<HTMLInputElement>; fullWidth?: boolean; type?: React.HTMLInputTypeAttribute; value?: string; onChange: React.ChangeEventHandler; disabled?: boolean; endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> } } & BaseInputPropsOverrides>; baseTextarea: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLTextAreaElement>; inputRef?: React.Ref<HTMLTextAreaElement>; fullWidth?: boolean; value?: string; onChange: React.ChangeEventHandler<HTMLTextAreaElement, Element>; onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>; disabled?: boolean; autoFocus?: boolean; minRows?: number; maxRows?: number } & BaseTextareaPropsOverrides>; baseSelect: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref; id?: string; value?: any; open?: boolean; error?: boolean; disabled?: boolean; onChange?: React.ChangeEventHandler; onOpen?: ((event: React.SyntheticEvent) => void); onClose?: ((event: React.KeyboardEvent, reason: 'backdropClick' \| 'escapeKeyDown' \| 'tabKeyDown') => void); label?: React.ReactNode; labelId?: string; native?: boolean; fullWidth?: boolean; size?: 'small' \| 'medium'; slotProps?: { htmlInput?: { ref?: Ref } & React.InputHTMLAttributes<HTMLInputElement> }; children?: React.ReactNode } & BaseSelectPropsOverrides>; baseSelectOption: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { native: boolean; value: any; children?: React.ReactNode } & BaseSelectOptionPropsOverrides>; baseSkeleton: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { variant?: 'circular' \| 'text'; width?: number \| string; height?: number \| string } & BaseSkeletonPropsOverrides>; bottomContainer: Partial<__type & BottomContainerPropsOverrides>; cell: Partial<React.HTMLAttributes<HTMLDivElement> & { align: GridAlignment; className?: string; colIndex: number; column: GridStateColDef; row: GridRowModel; rowId: GridRowId; rowNode: GridTreeNode; width: number; colSpan?: number; disableDragEvents?: boolean; isNotVisible: boolean; pinnedOffset?: number; pinnedPosition: unknown; showRightBorder: boolean; showLeftBorder: boolean; onClick?: React.MouseEventHandler<HTMLDivElement>; onDoubleClick?: React.MouseEventHandler<HTMLDivElement>; onMouseEnter?: React.MouseEventHandler<HTMLDivElement>; onMouseDown?: React.MouseEventHandler<HTMLDivElement>; onMouseLeave?: React.MouseEventHandler<HTMLDivElement>; onMouseUp?: React.MouseEventHandler<HTMLDivElement>; onMouseOver?: React.MouseEventHandler<HTMLDivElement>; onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>; onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>; onDragEnter?: React.DragEventHandler<HTMLDivElement>; onDragOver?: React.DragEventHandler<HTMLDivElement>; onFocus?: React.FocusEventHandler; children?: React.ReactNode; style?: React.CSSProperties } & CellPropsOverrides>; columnHeaders: GridColumnHeadersProps; columnHeaderFilterIconButton: Partial<{ field: string; counter?: number; onClick?: ((params: GridColumnHeaderParams<GridValidRowModel, any, any>, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) }>; columnHeaderSortIcon: Partial<{ children?: React.ReactNode; onClick?: (((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) \| ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)); className?: string; style?: React.CSSProperties; ref?: Ref<HTMLButtonElement>; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; tabIndex?: number; title?: string; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps>; field: string; direction: GridSortDirection; index?: number; sortingOrder: GridSortDirection[] }>; columnMenu: Partial<{ id?: string; slots?: { [key: string]: React.JSXElementConstructor<any> \| null }; slotProps?: { [key: string]: GridColumnMenuSlotProps }; hideMenu: ((event: React.SyntheticEvent) => void); colDef: GridColDef; open: boolean; labelledby?: string }>; columnsPanel: Partial<GridColumnsPanelProps & ColumnsPanelPropsOverrides>; columnsManagement: Partial<{ sort?: 'asc' \| 'desc'; searchPredicate?: ((column: GridColDef, searchValue: string) => boolean); searchInputProps?: Partial<TextFieldProps>; searchDebounceMs?: number; autoFocusSearchField?: boolean; disableShowHideToggle?: boolean; disableResetButton?: boolean; toggleAllMode?: 'all' \| 'filteredOnly'; getTogglableColumns?: ((columns: GridColDef[]) => string[]) }>; detailPanels: Partial<GridDetailPanelsProps & DetailPanelsPropsOverrides>; filterPanel: Partial<{ sx?: SxProps<Theme>; getColumnForNewFilter?: ((args: GetColumnForNewFilterArgs) => string \| null); filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' \| 'deleteIconProps' \| 'logicOperatorInputProps' \| 'operatorInputProps' \| 'columnInputProps' \| 'valueInputProps' \| 'filterColumns'>; disableAddFilterButton?: boolean; disableRemoveAllButton?: boolean; children?: React.ReactNode; logicOperators?: unknown[]; columnsSort?: 'asc' \| 'desc' }>; footer: Partial<React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & FooterPropsOverrides>; footerRowCount: Partial<React.HTMLAttributes<HTMLDivElement> & RowCountProps & { sx?: SxProps<Theme> } & FooterRowCountOverrides>; loadingOverlay: Partial<{ variant?: GridLoadingOverlayVariant; noRowsVariant?: GridLoadingOverlayVariant; sx?: SxProps<Theme> }>; noResultsOverlay: Partial<React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & NoResultsOverlayPropsOverrides>; noRowsOverlay: Partial<React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & NoRowsOverlayPropsOverrides>; noColumnsOverlay: Partial<React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & NoColumnsOverlayPropsOverrides>; pagination: PaginationPropsOverrides; panel: Partial<{ ref?: React.Ref<HTMLDivElement>; children?: React.ReactNode; classes?: Partial<GridPanelClasses>; open: boolean; onClose?: (() => void); className?: string; id?: string; target?: Element \| null; flip?: boolean }>; pinnedRows: Partial<{ position: 'top' \| 'bottom' }>; row: Partial<{ row: GridRowModel; rowId: GridRowId; selected: boolean; index: number; rowHeight: number \| 'auto'; offsetLeft: number; columnsTotalWidth: number; firstColumnIndex: number; lastColumnIndex: number; visibleColumns: GridStateColDef[]; pinnedColumns: GridPinnedColumns; focusedColumnIndex: number \| undefined; isFirstVisible: boolean; isLastVisible: boolean; isNotVisible: boolean; showBottomBorder: boolean; scrollbarWidth: number; gridHasFiller: boolean; onClick?: React.MouseEventHandler<HTMLDivElement>; onDoubleClick?: React.MouseEventHandler<HTMLDivElement>; onMouseEnter?: React.MouseEventHandler<HTMLDivElement>; onMouseLeave?: React.MouseEventHandler<HTMLDivElement> }>; rowCheckbox: GridRowCheckboxProps; skeletonCell: Partial<{ type?: GridColType; width?: number \| string; height?: number \| 'auto'; field?: string; align?: string; empty?: boolean }>; toolbar: Partial<{ showHistoryControls?: boolean; showQuickFilter?: boolean; quickFilterProps?: GridToolbarQuickFilterProps; sx?: SxProps<Theme>; csvOptions?: { delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }; printOptions?: { fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }; slotProps?: { button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> } }>; main: MainProps; root: RootProps }>` | -                                                        | Overridable components props dynamically passed to the component at rendering.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| slots                              | `Partial<GridSlots>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                        | Overridable components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| sortModel                          | `GridSortItem[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | Set the sort model of the Data Grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| sortingMode                        | `GridFeatureMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `"client"`                                               | Sorting can be processed on the server or client-side.&#xA;Set it to 'client' if you would like to handle sorting on the client-side.&#xA;Set it to 'server' if you would like to handle sorting on the server-side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| sortingOrder                       | `GridSortDirection[]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `['asc', 'desc', null]`                                  | The order of the sorting sequence.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| sx                                 | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| tabNavigation                      | `'none' \| 'content' \| 'header' \| 'all'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `"none"`                                                 | Sets the tab navigation behavior for the Data Grid. "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence."content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header."header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content."all": Combines the "content" and "header" behavior. |
+| virtualizeColumnsWithAutoRowHeight | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `false`                                                  | If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.&#xA;By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.&#xA;For datasets with a large number of columns, this can cause performance issues.&#xA;The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.                                                                                                                                                                                                                                                               |
+| className                          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| style                              | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+
+## Additional Types
+
+### GridSlots
+
+Grid components React prop interface containing all the overridable components.
+
+```typescript
+type GridSlots = {
+  /**
+   * Component rendered for the bottom container.
+   * @default GridBottomContainer
+   */
+  bottomContainer: React.JSXElementConstructor<__type & BottomContainerPropsOverrides>;
+  /**
+   * Component rendered for each cell.
+   * @default GridCell
+   */
+  cell: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLDivElement> & {
+      align: GridAlignment;
+      className?: string;
+      colIndex: number;
+      column: GridStateColDef;
+      row: GridRowModel;
+      rowId: GridRowId;
+      rowNode: GridTreeNode;
+      width: number;
+      colSpan?: number;
+      disableDragEvents?: boolean;
+      isNotVisible: boolean;
+      pinnedOffset?: number;
+      pinnedPosition: unknown;
+      showRightBorder: boolean;
+      showLeftBorder: boolean;
+      onClick?: React.MouseEventHandler<HTMLDivElement>;
+      onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+      onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+      onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+      onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+      onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+      onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+      onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+      onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+      onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+      onDragOver?: React.DragEventHandler<HTMLDivElement>;
+      onFocus?: React.FocusEventHandler;
+      children?: React.ReactNode;
+      style?: React.CSSProperties;
+    } & CellPropsOverrides
+  >;
+  /**
+   * Component rendered for each skeleton cell.
+   * @default GridSkeletonCell
+   */
+  skeletonCell: React.JSXElementConstructor<{
+    type?: GridColType;
+    width?: number | string;
+    height?: number | 'auto';
+    field?: string;
+    align?: string;
+    empty?: boolean;
+  }>;
+  /**
+   * Filter icon component rendered in each column header.
+   * @default GridColumnHeaderFilterIconButton
+   */
+  columnHeaderFilterIconButton: React.JSXElementConstructor<{
+    field: string;
+    counter?: number;
+    onClick?: (
+      params: GridColumnHeaderParams<GridValidRowModel, any, any>,
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    ) => void;
+  }>;
+  /**
+   * Sort icon component rendered in each column header.
+   * @default GridColumnHeaderSortIcon
+   */
+  columnHeaderSortIcon: React.JSXElementConstructor<{
+    children?: React.ReactNode;
+    onClick?:
+      | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
+      | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void);
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: Ref<HTMLButtonElement>;
+    disabled?: boolean;
+    id?: string;
+    role?: string;
+    size?: 'small' | 'medium' | 'large';
+    tabIndex?: number;
+    title?: string;
+    touchRippleRef?: any;
+    label?: string;
+    color?: 'default' | 'inherit' | 'primary';
+    edge?: 'start' | 'end' | false;
+    material?: Partial<IconButtonProps>;
+    field: string;
+    direction: GridSortDirection;
+    index?: number;
+    sortingOrder: GridSortDirection[];
+  }>;
+  /**
+   * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
+   * @default GridColumnMenu
+   */
+  columnMenu: React.JSXElementConstructor<{
+    id?: string;
+    slots?: { [key: string]: React.JSXElementConstructor<any> | null };
+    slotProps?: { [key: string]: GridColumnMenuSlotProps };
+    hideMenu: (event: React.SyntheticEvent) => void;
+    colDef: GridColDef;
+    open: boolean;
+    labelledby?: string;
+  }>;
+  /**
+   * Component responsible for rendering the column headers.
+   * @default GridColumnHeaders
+   */
+  columnHeaders: React.JSXElementConstructor<GridColumnHeadersProps>;
+  /**
+   * Component responsible for rendering the detail panels.
+   * @default GridDetailPanels
+   */
+  detailPanels: React.JSXElementConstructor<GridDetailPanelsProps & DetailPanelsPropsOverrides>;
+  /**
+   * Footer component rendered at the bottom of the grid viewport.
+   * @default GridFooter
+   */
+  footer: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & FooterPropsOverrides
+  >;
+  /**
+   * Row count component rendered in the footer
+   * @default GridRowCount
+   */
+  footerRowCount: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLDivElement> &
+      RowCountProps & { sx?: SxProps<Theme> } & FooterRowCountOverrides
+  >;
+  /** Toolbar component rendered in the grid header. */
+  toolbar: React.JSXElementConstructor<{
+    showHistoryControls?: boolean;
+    showQuickFilter?: boolean;
+    quickFilterProps?: GridToolbarQuickFilterProps;
+    sx?: SxProps<Theme>;
+    csvOptions?: {
+      delimiter?: string;
+      fileName?: string;
+      utf8WithBom?: boolean;
+      includeHeaders?: boolean;
+      includeColumnGroupsHeaders?: boolean;
+      getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+      shouldAppendQuotes?: boolean;
+      escapeFormulas?: boolean;
+      fields?: string[];
+      allColumns?: boolean;
+      disableToolbarButton?: boolean;
+    };
+    printOptions?: {
+      fileName?: string;
+      hideToolbar?: boolean;
+      hideFooter?: boolean;
+      includeCheckboxes?: boolean;
+      copyStyles?: boolean;
+      bodyClassName?: string;
+      pageStyle?: string | (() => string);
+      getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+      fields?: string[];
+      allColumns?: boolean;
+      disableToolbarButton?: boolean;
+    };
+    slotProps?: {
+      button?: Partial<
+        React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+          ref?: Ref<HTMLButtonElement>;
+          children?: React.ReactNode;
+          disabled?: boolean;
+          id?: string;
+          role?: string;
+          size?: 'small' | 'medium' | 'large';
+          startIcon?: React.ReactNode;
+          tabIndex?: number;
+          title?: string;
+          touchRippleRef?: any;
+        } & BaseButtonPropsOverrides
+      >;
+      tooltip?: Partial<
+        React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+          children: ReactElement;
+          enterDelay?: number;
+          title: React.ReactNode;
+          disableInteractive?: boolean;
+        } & BaseTooltipPropsOverrides
+      >;
+    };
+  }>;
+  /**
+   * Pinned rows container.
+   * @ignore - do not document
+   */
+  pinnedRows: React.JSXElementConstructor<{ position: 'top' | 'bottom' }>;
+  /**
+   * Loading overlay component rendered when the grid is in a loading state.
+   * @default GridLoadingOverlay
+   */
+  loadingOverlay: React.JSXElementConstructor<{
+    variant?: GridLoadingOverlayVariant;
+    noRowsVariant?: GridLoadingOverlayVariant;
+    sx?: SxProps<Theme>;
+  }>;
+  /**
+   * No results overlay component rendered when the grid has no results after filtering.
+   * @default GridNoResultsOverlay
+   */
+  noResultsOverlay: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & NoResultsOverlayPropsOverrides
+  >;
+  /**
+   * No rows overlay component rendered when the grid has no rows.
+   * @default GridNoRowsOverlay
+   */
+  noRowsOverlay: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & NoRowsOverlayPropsOverrides
+  >;
+  /**
+   * No columns overlay component rendered when the grid has no columns.
+   * @default GridNoColumnsOverlay
+   */
+  noColumnsOverlay: React.JSXElementConstructor<
+    React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> } & NoColumnsOverlayPropsOverrides
+  >;
+  /**
+   * Pagination component rendered in the grid footer by default.
+   * @default Pagination
+   */
+  pagination: React.JSXElementConstructor<PaginationPropsOverrides> | null;
+  /**
+   * Filter panel component rendered when clicking the filter button.
+   * @default GridFilterPanel
+   */
+  filterPanel: React.JSXElementConstructor<{
+    sx?: SxProps<Theme>;
+    getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => string | null;
+    filterFormProps?: Pick<
+      GridFilterFormProps,
+      | 'columnsSort'
+      | 'deleteIconProps'
+      | 'logicOperatorInputProps'
+      | 'operatorInputProps'
+      | 'columnInputProps'
+      | 'valueInputProps'
+      | 'filterColumns'
+    >;
+    disableAddFilterButton?: boolean;
+    disableRemoveAllButton?: boolean;
+    children?: React.ReactNode;
+    logicOperators?: unknown[];
+    columnsSort?: 'asc' | 'desc';
+  }>;
+  /**
+   * GridColumns panel component rendered when clicking the columns button.
+   * @default GridColumnsPanel
+   */
+  columnsPanel: React.JSXElementConstructor<GridColumnsPanelProps & ColumnsPanelPropsOverrides>;
+  /**
+   * Component used inside Grid Columns panel to manage columns.
+   * @default GridColumnsManagement
+   */
+  columnsManagement: React.JSXElementConstructor<any>;
+  /**
+   * Panel component wrapping the filters and columns panels.
+   * @default GridPanel
+   */
+  panel: React.JSXElementConstructor<{
+    ref?: React.Ref<HTMLDivElement>;
+    children?: React.ReactNode;
+    classes?: Partial<GridPanelClasses>;
+    open: boolean;
+    onClose?: () => void;
+    className?: string;
+    id?: string;
+    target?: Element | null;
+    flip?: boolean;
+  }>;
+  /**
+   * Component rendered for each row.
+   * @default GridRow
+   */
+  row: React.JSXElementConstructor<{
+    row: GridRowModel;
+    rowId: GridRowId;
+    selected: boolean;
+    index: number;
+    rowHeight: number | 'auto';
+    offsetLeft: number;
+    columnsTotalWidth: number;
+    firstColumnIndex: number;
+    lastColumnIndex: number;
+    visibleColumns: GridStateColDef[];
+    pinnedColumns: GridPinnedColumns;
+    focusedColumnIndex: number | undefined;
+    isFirstVisible: boolean;
+    isLastVisible: boolean;
+    isNotVisible: boolean;
+    showBottomBorder: boolean;
+    scrollbarWidth: number;
+    gridHasFiller: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  }>;
+  /**
+   * Component rendered for each row selection checkbox.
+   * @default GridRowCheckbox
+   */
+  rowCheckbox: React.JSXElementConstructor<GridRowCheckboxProps>;
+  /**
+   * The custom Autocomplete component used in the grid for both header and cells.
+   * @default Autocomplete
+   */
+  baseAutocomplete: React.JSXElementConstructor<{
+    id?: string;
+    multiple?: true;
+    freeSolo?: true;
+    value?: string[];
+    options: string[];
+    getOptionLabel?: (option: string) => string;
+    isOptionEqualToValue?: (option: string, value: string) => boolean;
+    onChange?: (event: React.SyntheticEvent, value: string[]) => void;
+    onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+    label?: React.ReactNode;
+    placeholder?: string;
+    slotProps?: { textField: TextFieldProps };
+    material?: Partial<AutocompleteProps<string, true, false, true, 'div'>>;
+  }>;
+  /**
+   * The custom Badge component used in the grid for both header and cells.
+   * @default Badge
+   */
+  baseBadge: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      badgeContent?: React.ReactNode;
+      children?: React.ReactNode;
+      color?: 'primary' | 'default' | 'error';
+      invisible?: boolean;
+      overlap?: 'circular';
+      variant?: 'dot';
+      style?: React.CSSProperties;
+    } & BaseBadgePropsOverrides
+  >;
+  /**
+   * The custom Checkbox component used in the grid for both header and cells.
+   * @default Checkbox
+   */
+  baseCheckbox: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      id?: string;
+      autoFocus?: boolean;
+      checked?: boolean;
+      disabled?: boolean;
+      fullWidth?: boolean;
+      indeterminate?: boolean;
+      inputRef?: React.Ref<HTMLInputElement>;
+      name?: string;
+      label?: React.ReactNode;
+      onChange?: React.ChangeEventHandler;
+      size?: 'small' | 'medium';
+      density?: 'standard' | 'compact';
+      slotProps?: {
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & {
+          ref?: React.Ref<HTMLInputElement>;
+        };
+      };
+      style?: React.CSSProperties;
+      tabIndex?: number;
+      touchRippleRef?: any;
+    } & BaseCheckboxPropsOverrides
+  >;
+  /**
+   * The custom Chip component used in the grid.
+   * @default Chip
+   */
+  baseChip: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLDivElement>;
+      id?: string;
+      label: string;
+      size?: 'small' | 'medium';
+      icon?: ReactElement;
+      children?: null;
+      variant?: 'filled' | 'outlined';
+    } & BaseChipPropsOverrides
+  >;
+  /**
+   * The custom CircularProgress component used in the grid.
+   * @default CircularProgress
+   */
+  baseCircularProgress: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      size?: number | string;
+      color?: 'inherit' | 'primary';
+    } & BaseCircularProgressPropsOverrides
+  >;
+  /**
+   * The custom Divider component used in the grid.
+   * @default Divider
+   */
+  baseDivider: React.JSXElementConstructor<{
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    material?: Partial<DividerProps>;
+  }>;
+  /**
+   * The custom LinearProgress component used in the grid.
+   * @default LinearProgress
+   */
+  baseLinearProgress: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & {
+      className?: string;
+      style?: React.CSSProperties;
+    } & BaseLinearProgressPropsOverrides
+  >;
+  /**
+   * The custom MenuList component used in the grid.
+   * @default MenuList
+   */
+  baseMenuList: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLUListElement>;
+      id?: string;
+      children?: React.ReactNode;
+      autoFocus?: boolean;
+      autoFocusItem?: boolean;
+    } & BaseMenuListPropsOverrides
+  >;
+  /**
+   * The custom MenuItem component used in the grid.
+   * @default MenuItem
+   */
+  baseMenuItem: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      autoFocus?: boolean;
+      children?: React.ReactNode;
+      inert?: boolean;
+      disabled?: boolean;
+      iconStart?: React.ReactNode;
+      iconEnd?: React.ReactNode;
+      selected?: boolean;
+      value?: number | string | string[];
+      style?: React.CSSProperties;
+    } & BaseMenuItemPropsOverrides
+  >;
+  /**
+   * The custom TextField component used in the grid.
+   * @default TextField
+   */
+  baseTextField: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      role?: string;
+      autoComplete?: string;
+      color?: 'primary' | 'error';
+      disabled?: boolean;
+      error?: boolean;
+      fullWidth?: boolean;
+      helperText?: string | null;
+      id?: string;
+      inputRef?: React.Ref<HTMLInputElement>;
+      label?: React.ReactNode;
+      onChange?: React.ChangeEventHandler;
+      placeholder?: string;
+      size?: 'small' | 'medium';
+      slotProps?: {
+        input?: Omit<Partial<InputProps>, 'slotProps'>;
+        inputLabel?: {};
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+      };
+      tabIndex?: number;
+      type?: React.HTMLInputTypeAttribute;
+      value?: string;
+      ref?: Ref<HTMLInputElement>;
+      multiline?: boolean;
+      autoFocus?: boolean;
+    } & BaseTextFieldPropsOverrides
+  >;
+  /**
+   * The custom Select component used in the grid.
+   * @default Select
+   */
+  baseSelect: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref;
+      id?: string;
+      value?: any;
+      open?: boolean;
+      error?: boolean;
+      disabled?: boolean;
+      onChange?: React.ChangeEventHandler;
+      onOpen?: (event: React.SyntheticEvent) => void;
+      onClose?: (
+        event: React.KeyboardEvent,
+        reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown',
+      ) => void;
+      label?: React.ReactNode;
+      labelId?: string;
+      native?: boolean;
+      fullWidth?: boolean;
+      size?: 'small' | 'medium';
+      slotProps?: { htmlInput?: { ref?: Ref } & React.InputHTMLAttributes<HTMLInputElement> };
+      children?: React.ReactNode;
+    } & BaseSelectPropsOverrides
+  >;
+  /**
+   * The custom Button component used in the grid.
+   * @default Button
+   */
+  baseButton: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides
+  >;
+  /**
+   * The custom IconButton component used in the grid.
+   * @default IconButton
+   */
+  baseIconButton: React.JSXElementConstructor<{
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: Ref<HTMLButtonElement>;
+    disabled?: boolean;
+    id?: string;
+    role?: string;
+    size?: 'small' | 'medium' | 'large';
+    tabIndex?: number;
+    title?: string;
+    touchRippleRef?: any;
+    label?: string;
+    color?: 'default' | 'inherit' | 'primary';
+    edge?: 'start' | 'end' | false;
+    material?: Partial<IconButtonProps>;
+  }>;
+  /**
+   * The custom Input component used in the grid.
+   * @default Input
+   */
+  baseInput: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLElement>;
+      inputRef?: React.Ref<HTMLInputElement>;
+      fullWidth?: boolean;
+      type?: React.HTMLInputTypeAttribute;
+      value?: string;
+      onChange: React.ChangeEventHandler;
+      disabled?: boolean;
+      endAdornment?: React.ReactNode;
+      startAdornment?: React.ReactNode;
+      slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> };
+    } & BaseInputPropsOverrides
+  >;
+  /**
+   * The custom Textarea component used in the grid for multiline text editing.
+   * @default InputBase with multiline
+   */
+  baseTextarea: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: React.Ref<HTMLTextAreaElement>;
+      inputRef?: React.Ref<HTMLTextAreaElement>;
+      fullWidth?: boolean;
+      value?: string;
+      onChange: React.ChangeEventHandler<HTMLTextAreaElement, Element>;
+      onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+      disabled?: boolean;
+      autoFocus?: boolean;
+      minRows?: number;
+      maxRows?: number;
+    } & BaseTextareaPropsOverrides
+  >;
+  /**
+   * The custom ToggleButton component used in the grid.
+   * @default ToggleButton
+   */
+  baseToggleButton: React.JSXElementConstructor<{
+    className?: string;
+    style?: React.CSSProperties;
+    selected?: boolean;
+    value: string;
+    material?: Partial<ToggleButtonProps>;
+  }>;
+  /**
+   * The custom Tooltip component used in the grid.
+   * @default Tooltip
+   */
+  baseTooltip: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      children: ReactElement;
+      enterDelay?: number;
+      title: React.ReactNode;
+      disableInteractive?: boolean;
+    } & BaseTooltipPropsOverrides
+  >;
+  /**
+   * The custom Pagination component used in the grid.
+   * @default Pagination
+   */
+  basePagination: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      count: number;
+      page: number;
+      rowsPerPage: number;
+      rowsPerPageOptions?: (number | { value: number; label: string })[];
+      onPageChange: (
+        event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
+        page: number,
+      ) => void;
+      onRowsPerPageChange?: (rowsPerPage: number) => void;
+      disabled?: boolean;
+    } & BasePaginationPropsOverrides
+  >;
+  /**
+   * The custom Popper component used in the grid.
+   * @default Popper
+   */
+  basePopper: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      role?: string;
+      ref?: Ref<HTMLDivElement>;
+      open: boolean;
+      children?: React.ReactNode;
+      clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+      clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+      flip?: boolean;
+      focusTrap?: boolean;
+      onExited?: (node: HTMLElement | null) => void;
+      onClickAway?: (event: MouseEvent | TouchEvent) => void;
+      onDidShow?: () => void;
+      onDidHide?: () => void;
+      id?: string;
+      target?: Element | null;
+      transition?: boolean;
+      placement?: Placement;
+    } & BasePopperPropsOverrides
+  >;
+  /**
+   * The custom SelectOption component used in the grid.
+   * @default SelectOption
+   */
+  baseSelectOption: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      native: boolean;
+      value: any;
+      children?: React.ReactNode;
+    } & BaseSelectOptionPropsOverrides
+  >;
+  /**
+   * The custom Skeleton component used in the grid.
+   * @default Skeleton
+   */
+  baseSkeleton: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      variant?: 'circular' | 'text';
+      width?: number | string;
+      height?: number | string;
+    } & BaseSkeletonPropsOverrides
+  >;
+  /**
+   * The custom Switch component used in the grid.
+   * @default Switch
+   */
+  baseSwitch: React.JSXElementConstructor<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      checked?: boolean;
+      onChange?: React.ChangeEventHandler;
+      size?: 'small' | 'medium';
+      label?: React.ReactNode;
+      disabled?: boolean;
+      title?: string;
+    } & BaseSwitchPropsOverrides
+  >;
+  /**
+   * The custom Tabs component used in the grid.
+   * @default Tabs
+   */
+  baseTabs: React.JSXElementConstructor<{
+    className?: string;
+    style?: React.CSSProperties;
+    items: { value: string; label: string; children: React.ReactNode }[];
+    value: string;
+    onChange: (event: React.SyntheticEvent, value: string) => void;
+    material?: Partial<TabsProps>;
+  }>;
+  /**
+   * Icon displayed on the boolean cell to represent the true value.
+   * @default GridCheckIcon
+   */
+  booleanCellTrueIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the boolean cell to represent the false value.
+   * @default GridCloseIcon
+   */
+  booleanCellFalseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the undo button in the toolbar.
+   * @default GridUndoIcon
+   */
+  undoIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the redo button in the toolbar.
+   * @default GridRedoIcon
+   */
+  redoIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the side of the column header title to display the filter input component.
+   * @default GridTripleDotsVerticalIcon
+   */
+  columnMenuIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the open filter button present in the toolbar by default.
+   * @default GridFilterListIcon
+   */
+  openFilterButtonIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the column header menu to show that a filter has been applied to the column.
+   * @default GridFilterAltIcon
+   */
+  columnFilteredIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the column menu selector tab.
+   * @default GridColumnIcon
+   */
+  columnSelectorIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the side of the column header title when unsorted.
+   * @default GridColumnUnsortedIcon
+   */
+  columnUnsortedIcon: React.JSXElementConstructor<GridColumnUnsortedIconProps> | null;
+  /**
+   * Icon displayed on the side of the column header title when sorted in ascending order.
+   * @default GridArrowUpwardIcon
+   */
+  columnSortedAscendingIcon: React.JSXElementConstructor<IconProps> | null;
+  /**
+   * Icon displayed on the side of the column header title when sorted in descending order.
+   * @default GridArrowDownwardIcon
+   */
+  columnSortedDescendingIcon: React.JSXElementConstructor<IconProps> | null;
+  /**
+   * Icon displayed in between two column headers that allows to resize the column header.
+   * @default GridSeparatorIcon
+   */
+  columnResizeIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the compact density option in the toolbar.
+   * @default GridViewHeadlineIcon
+   */
+  densityCompactIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the standard density option in the toolbar.
+   * @default GridTableRowsIcon
+   */
+  densityStandardIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the "comfortable" density option in the toolbar.
+   * @default GridViewStreamIcon
+   */
+  densityComfortableIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the open export button present in the toolbar by default.
+   * @default GridDownloadIcon
+   */
+  exportIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the `actions` column type to open the menu.
+   * @default GridMoreVertIcon
+   */
+  moreActionsIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the tree data toggling column when the children are collapsed
+   * @default GridKeyboardArrowRight
+   */
+  treeDataExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the tree data toggling column when the children are expanded
+   * @default GridExpandMoreIcon
+   */
+  treeDataCollapseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the grouping column when the children are collapsed
+   * @default GridKeyboardArrowRight
+   */
+  groupingCriteriaExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the grouping column when the children are expanded
+   * @default GridExpandMoreIcon
+   */
+  groupingCriteriaCollapseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the detail panel toggle column when collapsed.
+   * @default GridAddIcon
+   */
+  detailPanelExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the detail panel toggle column when expanded.
+   * @default GridRemoveIcon
+   */
+  detailPanelCollapseIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed for deleting the filter from filter panel.
+   * @default GridAddIcon
+   */
+  filterPanelAddIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed for deleting the filter from filter panel.
+   * @default GridDeleteIcon
+   */
+  filterPanelDeleteIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed for deleting all the active filters from filter panel.
+   * @default GridDeleteForeverIcon
+   */
+  filterPanelRemoveAllIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the `reorder` column type to reorder a row.
+   * @default GridDragIcon
+   */
+  rowReorderIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the quick filter input.
+   * @default GridSearchIcon
+   */
+  quickFilterIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the quick filter reset input.
+   * @default GridCloseIcon
+   */
+  quickFilterClearIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for hiding column
+   * @default GridVisibilityOffIcon
+   */
+  columnMenuHideIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for ascending sort
+   * @default GridArrowUpwardIcon
+   */
+  columnMenuSortAscendingIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for descending sort
+   * @default GridArrowDownwardIcon
+   */
+  columnMenuSortDescendingIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for unsort
+   * @default null
+   */
+  columnMenuUnsortIcon: React.JSXElementConstructor<IconProps> | null;
+  /**
+   * Icon displayed in column menu for filter
+   * @default GridFilterAltIcon
+   */
+  columnMenuFilterIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for showing all columns
+   * @default GridViewColumnIcon
+   */
+  columnMenuManageColumnsIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed in column menu for clearing values
+   * @default GridClearIcon
+   */
+  columnMenuClearIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the input while processing.
+   * @default GridLoadIcon
+   */
+  loadIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the column reorder button.
+   * @default GridDragIcon
+   */
+  columnReorderIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed to indicate that a menu item is selected.
+   * @default GridCheckIcon
+   */
+  menuItemCheckIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the long text cell to expand the content.
+   * @default GridLongTextCellExpandIcon
+   */
+  longTextCellExpandIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the long text cell popup to collapse the content.
+   * @default GridLongTextCellCollapseIcon
+   */
+  longTextCellCollapseIcon: React.JSXElementConstructor<IconProps>;
+};
+```
+
+## External Types
+
+### GridAlignment
+
+```typescript
+type GridAlignment = 'left' | 'right' | 'center';
+```
+
+### GridRowId
+
+```typescript
+type GridRowId = string | number;
+```
+
+### GridColType
+
+```typescript
+type GridColType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'dateTime'
+  | 'singleSelect'
+  | 'actions'
+  | 'custom'
+  | 'longText';
+```
+
+### GridLoadingOverlayVariant
+
+```typescript
+type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+```
+
+### ClickAwayTouchEventHandler
+
+```typescript
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+```
+
+### ClickAwayMouseEventHandler
+
+```typescript
+type ClickAwayMouseEventHandler =
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onPointerDown'
+  | 'onPointerUp';
+```
+
+### GridEditMode
+
+```typescript
+type GridEditMode = 'cell' | 'row';
+```
+
+### GridFeatureMode
+
+```typescript
+type GridFeatureMode = 'client' | 'server';
+```
+
+### GridDensity
+
+```typescript
+type GridDensity = 'compact' | 'standard' | 'comfortable';
+```
+
+### GridEventListener
+
+```typescript
+type GridEventListener = (
+  params: {
+    reason?: unknown | undefined;
+    key?: string | undefined;
+    id: string | number;
+    field: string;
+    value?: unknown | undefined;
+    formattedValue?: unknown | undefined;
+    row: any;
+    rowNode:
+      | {
+          type: 'leaf';
+          parent: string | number;
+          groupingKey: string | number | boolean | null;
+          id: string | number;
+          depth: number;
+        }
+      | {
+          isAutoGenerated: 'false';
+          type: 'group';
+          groupingKey: string | number | boolean | null;
+          groupingField: string | null;
+          children: unknown;
+          footerId?: string | number | null | undefined;
+          childrenFromPath: {};
+          childrenExpanded?: boolean | undefined;
+          parent: string | number | null;
+          isPinned?: boolean | undefined;
+          id: string | number;
+          depth: number;
+        }
+      | {
+          isAutoGenerated: 'true';
+          type: 'group';
+          groupingKey: string | number | boolean | null;
+          groupingField: string | null;
+          children: unknown;
+          footerId?: string | number | null | undefined;
+          childrenFromPath: {};
+          childrenExpanded?: boolean | undefined;
+          parent: string | number | null;
+          isPinned?: boolean | undefined;
+          id: string | number;
+          depth: number;
+        }
+      | { type: 'footer'; parent: string | number; id: string | number; depth: number }
+      | {
+          isAutoGenerated: 'true';
+          type: 'pinnedRow';
+          parent: string | number;
+          id: string | number;
+          depth: number;
+        }
+      | {
+          isAutoGenerated: 'false';
+          type: 'pinnedRow';
+          parent: string | number;
+          id: string | number;
+          depth: number;
+        }
+      | { type: 'skeletonRow'; parent: string | number; id: string | number; depth: number };
+    colDef: unknown;
+    isEditable?: boolean | undefined;
+    cellMode: 'edit' | 'view';
+    hasFocus: boolean;
+    tabIndex: 0 | -1;
+    api: {};
+  },
+  event: unknown,
+  details: { reason?: any; api: {} },
+) => void;
+```
+
+### GridRowIdGetter
+
+```typescript
+type GridRowIdGetter = (row: unknown) => string | number;
+```
diff --git a/docs/pages/x/api/data-grid/types.data-grid.ts b/docs/pages/x/api/data-grid/types.data-grid.ts
new file mode 100644
index 0000000000000..9784d00cc5334
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.data-grid.ts
@@ -0,0 +1,4 @@
+import { DataGrid } from '@mui/x-data-grid/DataGrid';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDataGrid = createTypes(import.meta.url, DataGrid);
diff --git a/docs/pages/x/api/data-grid/types.export-csv.ts b/docs/pages/x/api/data-grid/types.export-csv.ts
new file mode 100644
index 0000000000000..4ae668224092a
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.export-csv.ts
@@ -0,0 +1,4 @@
+import { ExportCsv } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesExportCsv = createTypes(import.meta.url, ExportCsv);
diff --git a/docs/pages/x/api/data-grid/types.export-excel.ts b/docs/pages/x/api/data-grid/types.export-excel.ts
new file mode 100644
index 0000000000000..0ef00877356ed
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.export-excel.ts
@@ -0,0 +1,4 @@
+import { ExportExcel } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesExportExcel = createTypes(import.meta.url, ExportExcel);
diff --git a/docs/pages/x/api/data-grid/types.export-print.ts b/docs/pages/x/api/data-grid/types.export-print.ts
new file mode 100644
index 0000000000000..3232c43e07e36
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.export-print.ts
@@ -0,0 +1,4 @@
+import { ExportPrint } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesExportPrint = createTypes(import.meta.url, ExportPrint);
diff --git a/docs/pages/x/api/data-grid/types.filter-panel-trigger.ts b/docs/pages/x/api/data-grid/types.filter-panel-trigger.ts
new file mode 100644
index 0000000000000..393ef78a4a89c
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.filter-panel-trigger.ts
@@ -0,0 +1,4 @@
+import { FilterPanelTrigger } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesFilterPanelTrigger = createTypes(import.meta.url, FilterPanelTrigger);
diff --git a/docs/pages/x/api/data-grid/types.grid-actions-col-def.ts b/docs/pages/x/api/data-grid/types.grid-actions-col-def.ts
new file mode 100644
index 0000000000000..9760828b24c7f
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-actions-col-def.ts
@@ -0,0 +1,4 @@
+import { GridActionsColDef } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridActionsColDef = createTypes(import.meta.url, GridActionsColDef);
diff --git a/docs/pages/x/api/data-grid/types.grid-aggregation-function-data-source.ts b/docs/pages/x/api/data-grid/types.grid-aggregation-function-data-source.ts
new file mode 100644
index 0000000000000..ec988be17b53f
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-aggregation-function-data-source.ts
@@ -0,0 +1,4 @@
+import { GridAggregationFunctionDataSource } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridAggregationFunctionDataSource = createTypes(import.meta.url, GridAggregationFunctionDataSource);
diff --git a/docs/pages/x/api/data-grid/types.grid-aggregation-function.ts b/docs/pages/x/api/data-grid/types.grid-aggregation-function.ts
new file mode 100644
index 0000000000000..caf8abed5dd9e
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-aggregation-function.ts
@@ -0,0 +1,4 @@
+import { GridAggregationFunction } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridAggregationFunction = createTypes(import.meta.url, GridAggregationFunction);
diff --git a/docs/pages/x/api/data-grid/types.grid-api.ts b/docs/pages/x/api/data-grid/types.grid-api.ts
new file mode 100644
index 0000000000000..b4be6d23353d3
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-api.ts
@@ -0,0 +1,4 @@
+import { GridApi } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridApi = createTypes(import.meta.url, GridApi);
diff --git a/docs/pages/x/api/data-grid/types.grid-cell-params.ts b/docs/pages/x/api/data-grid/types.grid-cell-params.ts
new file mode 100644
index 0000000000000..ac9642b05a2da
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-cell-params.ts
@@ -0,0 +1,4 @@
+import { GridCellParams } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridCellParams = createTypes(import.meta.url, GridCellParams);
diff --git a/docs/pages/x/api/data-grid/types.grid-charts-panel.md b/docs/pages/x/api/data-grid/types.grid-charts-panel.md
new file mode 100644
index 0000000000000..695d8afc505ae
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-charts-panel.md
@@ -0,0 +1,914 @@
+# Data Grid
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.grid-charts-panel.md'
+
+## API Reference
+
+### AiAssistantPanelTrigger
+
+A button that opens and closes the assistant panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [AI Assistant Panel](https://mui.com/x/react-data-grid/components/ai-assistant-panel/)
+
+API:
+
+- [AiAssistantPanelTrigger API](https://mui.com/x/api/data-grid/ai-assistant-panel-trigger/)
+
+**AiAssistantPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                               | Default | Description                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                   |
+| className      | `string \| ((state: AiAssistantPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, AiAssistantPanelState>` | -       | A function to customize rendering of the component. |
+
+### ChartsPanelTrigger
+
+A button that opens and closes the charts integration panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Charts Panel](https://mui.com/x/react-data-grid/components/charts-panel/)
+
+API:
+
+- [ChartsPanelTrigger API](https://mui.com/x/api/data-grid/charts-panel-trigger/)
+
+**ChartsPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                          | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| className      | `string \| ((state: ChartsPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, ChartsPanelState>` | -       | A function to customize rendering of the component. |
+
+### ExportExcel
+
+A button that triggers an Excel export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-data-grid/components/export/)
+
+API:
+
+- [ExportExcel API](https://mui.com/x/api/data-grid/export-excel/)
+
+**ExportExcel Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                        | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| options        | `GridExcelExportOptions`                                                                                                                                                                                                                                                                                                                                                    | -       | The options to apply on the Excel export.           |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>` | -       | A function to customize rendering of the component. |
+
+### GridAiAssistantPanel
+
+### GridAssistantIcon
+
+**GridAssistantIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridChartsIcon
+
+**GridChartsIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridChartsPanel
+
+**GridChartsPanel Props:**
+
+| Prop          | Type                                       | Default | Description                                                                                                                                                         |
+| :------------ | :----------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| getColumnName | `((field: string) => string \| undefined)` | -       | Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user. |
+| schema        | `GridChartsConfigurationOptions`           | `{}`    | The schema of the charts configuration.                                                                                                                             |
+
+### GridColumnMenuAggregationItem
+
+**GridColumnMenuAggregationItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuGroupingItem
+
+**GridColumnMenuGroupingItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridEmptyPivotOverlay
+
+**GridEmptyPivotOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridExcelExportMenuItem
+
+**GridExcelExportMenuItem Props:**
+
+| Prop     | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description |
+| :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| hideMenu | `(() => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -           |
+| options  | `{ worker?: (() => Worker); valueOptionsSheetName?: string; exceljsPreProcess?: ((processInput: GridExceljsProcessInput) => Promise<void>); exceljsPostProcess?: ((processInput: GridExceljsProcessInput) => Promise<void>); columnsStyles?: ColumnsStylesInterface; includeColumnGroupsHeaders?: boolean; fileName?: string; includeHeaders?: boolean; getRowsToExport?: ((params: GridGetRowsToExportParams) => GridRowId[]); escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | -       | -           |
+
+### GridExpandLessIcon
+
+**GridExpandLessIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFunctionsIcon
+
+**GridFunctionsIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridGroupWorkIcon
+
+**GridGroupWorkIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridHistoryIcon
+
+**GridHistoryIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMicIcon
+
+**GridMicIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMicOffIcon
+
+**GridMicOffIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMoveToBottomIcon
+
+**GridMoveToBottomIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMoveToTopIcon
+
+**GridMoveToTopIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridPivotIcon
+
+**GridPivotIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridPivotPanel
+
+### GridPromptIcon
+
+**GridPromptIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridRerunIcon
+
+**GridRerunIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSendIcon
+
+**GridSendIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSyncDisabledIcon
+
+**GridSyncDisabledIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSyncIcon
+
+**GridSyncIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridWorkspacesIcon
+
+**GridWorkspacesIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### PivotPanelTrigger
+
+A button that opens and closes the pivot panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Pivot Panel](https://mui.com/x/react-data-grid/components/pivot-panel/)
+
+API:
+
+- [PivotPanelTrigger API](https://mui.com/x/api/data-grid/pivot-panel-trigger/)
+
+**PivotPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                         | Default | Description                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| className      | `string \| ((state: PivotPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, PivotPanelState>` | -       | A function to customize rendering of the component. |
+
+### PromptField
+
+The top level Prompt Field component that provides context to child components.
+It renders a `<div />` element.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptField API](https://mui.com/x/api/data-grid/prompt-field/)
+
+**PromptField Props:**
+
+| Prop          | Type                                                        | Default | Description                                             |
+| :------------ | :---------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| lang          | `string`                                                    | -       | -                                                       |
+| onRecordError | `((error: string) => void)`                                 | -       | Called when a speech recognition error occurs.          |
+| onSubmit\*    | `((prompt: string) => void)`                                | -       | Called when the user submits the prompt.                |
+| className     | `string \| ((state: PromptFieldState) => string)`           | -       | Override or extend the styles applied to the component. |
+| render        | `RenderProp<React.ComponentProps<'div'>, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+### PromptFieldControl
+
+A component that takes user input.
+It renders the `baseTextField` slot.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptFieldControl API](https://mui.com/x/api/data-grid/prompt-field-control/)
+
+**PromptFieldControl Props:**
+
+| Prop         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default | Description                                             |
+| :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label        | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| value        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| autoComplete | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| color        | `'primary' \| 'error'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| error        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| fullWidth    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| helperText   | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                       |
+| material     | `Partial<TextFieldProps>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| multiline    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| onChange     | `(((event: React.ChangeEvent<HTMLElement, Element>) => void) \| ((event: React.ChangeEvent) => void))`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| placeholder  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| role         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| size         | `'small' \| 'medium'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| slotProps    | `{ input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| tabIndex     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| type         | `React.HTMLInputTypeAttribute`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| autoFocus    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| disabled     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| inputRef     | `React.Ref<HTMLInputElement>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| id           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| className    | `string \| ((state: PromptFieldState) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | Override or extend the styles applied to the component. |
+| style        | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| render       | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; autoComplete?: string; color?: 'primary' \| 'error'; disabled?: boolean; error?: boolean; fullWidth?: boolean; helperText?: string \| null; id?: string; inputRef?: React.Ref<HTMLInputElement>; label?: React.ReactNode; onChange?: React.ChangeEventHandler; placeholder?: string; size?: 'small' \| 'medium'; slotProps?: { input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }; tabIndex?: number; type?: React.HTMLInputTypeAttribute; value?: string; ref?: Ref<HTMLInputElement>; multiline?: boolean; autoFocus?: boolean } & BaseTextFieldPropsOverrides, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+### PromptFieldRecord
+
+A button that records the user's voice when clicked.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptFieldRecord API](https://mui.com/x/api/data-grid/prompt-field-record/)
+
+**PromptFieldRecord Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | -                                                       |
+| className      | `string \| ((state: PromptFieldState) => string)`                                                                                                                                                                                                                                                                                                                                                                                 | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| render         | `RenderProp<{ children?: React.ReactNode; className?: string; style?: React.CSSProperties; ref?: Ref<HTMLButtonElement>; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; tabIndex?: number; title?: string; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+### PromptFieldSend
+
+A button that processes the prompt when clicked.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptFieldSend API](https://mui.com/x/api/data-grid/prompt-field-send/)
+
+**PromptFieldSend Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | -                                                       |
+| className      | `string \| ((state: PromptFieldState) => string)`                                                                                                                                                                                                                                                                                                                                                                                 | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| render         | `RenderProp<{ children?: React.ReactNode; className?: string; style?: React.CSSProperties; ref?: Ref<HTMLButtonElement>; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; tabIndex?: number; title?: string; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+## Additional Types
+
+### AiAssistantPanelState
+
+```typescript
+type AiAssistantPanelState = {
+  /** If `true`, the assistant panel is open. */
+  open: boolean;
+};
+```
+
+### AiAssistantPanelTriggerProps
+
+```typescript
+type AiAssistantPanelTriggerProps = {
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    AiAssistantPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: AiAssistantPanelState) => string);
+};
+```
+
+### ChartsPanelState
+
+```typescript
+type ChartsPanelState = {
+  /** If `true`, the charts integration panel is open. */
+  open: boolean;
+};
+```
+
+### ChartsPanelTriggerProps
+
+```typescript
+type ChartsPanelTriggerProps = {
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    ChartsPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: ChartsPanelState) => string);
+};
+```
+
+### ExportExcelProps
+
+```typescript
+type ExportExcelProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+} & BaseButtonPropsOverrides & {
+    render?: RenderProp<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    options?: GridExcelExportOptions;
+  };
+```
+
+### GridChartsPanelProps
+
+```typescript
+type GridChartsPanelProps = {
+  /**
+   * The schema of the charts configuration.
+   * @default {}
+   * @type GridChartsConfigurationOptions
+   */
+  schema?: GridChartsConfigurationOptions;
+  /**
+   * Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user.
+   * @returns The name of the column or undefined if the column name should be determined by the grid
+   */
+  getColumnName?: (field: string) => string | undefined;
+};
+```
+
+### GridExcelExportMenuItemProps
+
+```typescript
+type GridExcelExportMenuItemProps = {
+  hideMenu?: () => void;
+  options?: {
+    worker?: () => Worker;
+    valueOptionsSheetName?: string;
+    exceljsPreProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
+    exceljsPostProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
+    columnsStyles?: ColumnsStylesInterface;
+    includeColumnGroupsHeaders?: boolean;
+    fileName?: string;
+    includeHeaders?: boolean;
+    getRowsToExport?: (params: GridGetRowsToExportParams) => GridRowId[];
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+};
+```
+
+### PivotPanelState
+
+```typescript
+type PivotPanelState = {
+  /** If `true`, the pivot panel is open. */
+  open: boolean;
+  /** If `true`, pivot is active. */
+  active: boolean;
+};
+```
+
+### PivotPanelTriggerProps
+
+```typescript
+type PivotPanelTriggerProps = {
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    PivotPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: PivotPanelState) => string);
+};
+```
+
+### PromptFieldControlProps
+
+```typescript
+type PromptFieldControlProps = {
+  onChange?:
+    | ((event: React.ChangeEvent<HTMLElement, Element>) => void)
+    | ((event: React.ChangeEvent) => void);
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLInputElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium';
+  tabIndex?: number;
+  label?: React.ReactNode;
+  color?: 'primary' | 'error';
+  material?: Partial<TextFieldProps>;
+  autoFocus?: boolean;
+  value?: string;
+  type?: React.HTMLInputTypeAttribute;
+  inputRef?: React.Ref<HTMLInputElement>;
+  slotProps?: {
+    input?: Omit<Partial<InputProps>, 'slotProps'>;
+    inputLabel?: {};
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  autoComplete?: string;
+  error?: boolean;
+  fullWidth?: boolean;
+  helperText?: string | null;
+  placeholder?: string;
+  multiline?: boolean;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      role?: string;
+      autoComplete?: string;
+      color?: 'primary' | 'error';
+      disabled?: boolean;
+      error?: boolean;
+      fullWidth?: boolean;
+      helperText?: string | null;
+      id?: string;
+      inputRef?: React.Ref<HTMLInputElement>;
+      label?: React.ReactNode;
+      onChange?: React.ChangeEventHandler;
+      placeholder?: string;
+      size?: 'small' | 'medium';
+      slotProps?: {
+        input?: Omit<Partial<InputProps>, 'slotProps'>;
+        inputLabel?: {};
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+      };
+      tabIndex?: number;
+      type?: React.HTMLInputTypeAttribute;
+      value?: string;
+      ref?: Ref<HTMLInputElement>;
+      multiline?: boolean;
+      autoFocus?: boolean;
+    } & BaseTextFieldPropsOverrides,
+    PromptFieldState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+};
+```
+
+### PromptFieldProps
+
+```typescript
+type PromptFieldProps = {
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<React.ComponentProps<'div'>, PromptFieldState>;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+  /**
+   * The BCP 47 language tag to use for the speech recognition.
+   * @default HTML lang attribute value or the user agent's language setting
+   */
+  lang?: string;
+  /** Called when a speech recognition error occurs. */
+  onRecordError?: (error: string) => void;
+  /** Called when the user submits the prompt. */
+  onSubmit: (prompt: string) => void;
+};
+```
+
+### PromptFieldRecordProps
+
+```typescript
+type PromptFieldRecordProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    {
+      children?: React.ReactNode;
+      className?: string;
+      style?: React.CSSProperties;
+      ref?: Ref<HTMLButtonElement>;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+      label?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    },
+    PromptFieldState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+};
+```
+
+### PromptFieldSendProps
+
+```typescript
+type PromptFieldSendProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    {
+      children?: React.ReactNode;
+      className?: string;
+      style?: React.CSSProperties;
+      ref?: Ref<HTMLButtonElement>;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+      label?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    },
+    PromptFieldState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+};
+```
+
+## External Types
+
+### GridRowId
+
+```typescript
+type GridRowId = string | number;
+```
diff --git a/docs/pages/x/api/data-grid/types.grid-charts-panel.ts b/docs/pages/x/api/data-grid/types.grid-charts-panel.ts
new file mode 100644
index 0000000000000..309e11ff21f9a
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-charts-panel.ts
@@ -0,0 +1,4 @@
+import { GridChartsPanel } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridChartsPanel = createTypes(import.meta.url, GridChartsPanel);
diff --git a/docs/pages/x/api/data-grid/types.grid-charts-renderer-proxy.md b/docs/pages/x/api/data-grid/types.grid-charts-renderer-proxy.md
new file mode 100644
index 0000000000000..1df924e50583d
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-charts-renderer-proxy.md
@@ -0,0 +1,52 @@
+# Data Grid
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.grid-charts-renderer-proxy.md'
+
+## API Reference
+
+### GridChartsIntegrationContextProvider
+
+**GridChartsIntegrationContextProvider Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| children\* | `React.ReactNode` | -       | -           |
+
+### GridChartsRendererProxy
+
+**GridChartsRendererProxy Props:**
+
+| Prop       | Type                                      | Default | Description                                                                                                                              |
+| :--------- | :---------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| label      | `string`                                  | -       | The label for the chart.                                                                                                                 |
+| onRender   | `GridChartsRendererProxyRendererCallback` | -       | Callback function called when the chart is about to be rendered.&#xA;Use this to check and modify the chart props before it is rendered. |
+| renderer\* | `GridChartsRendererProxyRenderer`         | -       | The renderer component that will render the chart.                                                                                       |
+| id\*       | `string`                                  | -       | The unique identifier for the chart.                                                                                                     |
+
+### GridChartsRendererProxyRendererCallback
+
+## Additional Types
+
+### GridChartsIntegrationContextProviderProps
+
+```typescript
+type GridChartsIntegrationContextProviderProps = { children: React.ReactNode };
+```
+
+### GridChartsRendererProxyProps
+
+```typescript
+type GridChartsRendererProxyProps = {
+  /** The unique identifier for the chart. */
+  id: string;
+  /** The label for the chart. */
+  label?: string;
+  /** The renderer component that will render the chart. */
+  renderer: GridChartsRendererProxyRenderer;
+  /**
+   * Callback function called when the chart is about to be rendered.
+   * Use this to check and modify the chart props before it is rendered.
+   */
+  onRender?: GridChartsRendererProxyRendererCallback;
+};
+```
diff --git a/docs/pages/x/api/data-grid/types.grid-charts-renderer-proxy.ts b/docs/pages/x/api/data-grid/types.grid-charts-renderer-proxy.ts
new file mode 100644
index 0000000000000..dfeb19f77ea41
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-charts-renderer-proxy.ts
@@ -0,0 +1,4 @@
+import { GridChartsRendererProxy } from '@mui/x-data-grid-premium/context';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridChartsRendererProxy = createTypes(import.meta.url, GridChartsRendererProxy);
diff --git a/docs/pages/x/api/data-grid/types.grid-col-def.ts b/docs/pages/x/api/data-grid/types.grid-col-def.ts
new file mode 100644
index 0000000000000..88497bd1c840f
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-col-def.ts
@@ -0,0 +1,4 @@
+import { GridColDef } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridColDef = createTypes(import.meta.url, GridColDef);
diff --git a/docs/pages/x/api/data-grid/types.grid-csv-export-options.ts b/docs/pages/x/api/data-grid/types.grid-csv-export-options.ts
new file mode 100644
index 0000000000000..b33682abc54ca
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-csv-export-options.ts
@@ -0,0 +1,4 @@
+import { GridCsvExportOptions } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridCsvExportOptions = createTypes(import.meta.url, GridCsvExportOptions);
diff --git a/docs/pages/x/api/data-grid/types.grid-excel-export-options.ts b/docs/pages/x/api/data-grid/types.grid-excel-export-options.ts
new file mode 100644
index 0000000000000..0565914016d47
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-excel-export-options.ts
@@ -0,0 +1,4 @@
+import { GridExcelExportOptions } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridExcelExportOptions = createTypes(import.meta.url, GridExcelExportOptions);
diff --git a/docs/pages/x/api/data-grid/types.grid-export-state-params.ts b/docs/pages/x/api/data-grid/types.grid-export-state-params.ts
new file mode 100644
index 0000000000000..24952f8d37a52
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-export-state-params.ts
@@ -0,0 +1,4 @@
+import { GridExportStateParams } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridExportStateParams = createTypes(import.meta.url, GridExportStateParams);
diff --git a/docs/pages/x/api/data-grid/types.grid-filter-form.ts b/docs/pages/x/api/data-grid/types.grid-filter-form.ts
new file mode 100644
index 0000000000000..bc6947167abb3
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-filter-form.ts
@@ -0,0 +1,4 @@
+import { GridFilterForm } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridFilterForm = createTypes(import.meta.url, GridFilterForm);
diff --git a/docs/pages/x/api/data-grid/types.grid-filter-item.ts b/docs/pages/x/api/data-grid/types.grid-filter-item.ts
new file mode 100644
index 0000000000000..d5a6899f85398
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-filter-item.ts
@@ -0,0 +1,4 @@
+import { GridFilterItem } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridFilterItem = createTypes(import.meta.url, GridFilterItem);
diff --git a/docs/pages/x/api/data-grid/types.grid-filter-model.ts b/docs/pages/x/api/data-grid/types.grid-filter-model.ts
new file mode 100644
index 0000000000000..7f522adfef774
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-filter-model.ts
@@ -0,0 +1,4 @@
+import { GridFilterModel } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridFilterModel = createTypes(import.meta.url, GridFilterModel);
diff --git a/docs/pages/x/api/data-grid/types.grid-filter-operator.ts b/docs/pages/x/api/data-grid/types.grid-filter-operator.ts
new file mode 100644
index 0000000000000..60ecd6d21cbbe
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-filter-operator.ts
@@ -0,0 +1,4 @@
+import { GridFilterOperator } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridFilterOperator = createTypes(import.meta.url, GridFilterOperator);
diff --git a/docs/pages/x/api/data-grid/types.grid-filter-panel.md b/docs/pages/x/api/data-grid/types.grid-filter-panel.md
new file mode 100644
index 0000000000000..55ac60415a6f8
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-filter-panel.md
@@ -0,0 +1,3896 @@
+# Data Grid
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.grid-filter-panel.md'
+
+## API Reference
+
+### ColumnsPanelTrigger
+
+A button that opens and closes the columns panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Columns Panel](https://mui.com/x/react-data-grid/components/columns-panel/)
+
+API:
+
+- [ColumnsPanelTrigger API](https://mui.com/x/api/data-grid/columns-panel-trigger/)
+
+**ColumnsPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                             |
+| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                       |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| className      | `string \| ((state: ColumnsPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, ColumnsPanelState>` | -       | A function to customize rendering of the component.     |
+
+### ExportCsv
+
+A button that triggers a CSV export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-data-grid/components/export/)
+
+API:
+
+- [ExportCsv API](https://mui.com/x/api/data-grid/export-csv/)
+
+**ExportCsv Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                        | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| options        | `GridCsvExportOptions`                                                                                                                                                                                                                                                                                                                                                      | -       | The options to apply on the CSV export.             |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>` | -       | A function to customize rendering of the component. |
+
+### ExportPrint
+
+A button that triggers a print export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-data-grid/components/export/)
+
+API:
+
+- [ExportPrint API](https://mui.com/x/api/data-grid/export-print/)
+
+**ExportPrint Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                        | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| options        | `GridPrintExportOptions`                                                                                                                                                                                                                                                                                                                                                    | -       | The options to apply on the Print export.           |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>` | -       | A function to customize rendering of the component. |
+
+### FilterPanelTrigger
+
+A button that opens and closes the filter panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Filter Panel](https://mui.com/x/react-data-grid/components/filter-panel/)
+
+API:
+
+- [FilterPanelTrigger API](https://mui.com/x/api/data-grid/filter-panel-trigger/)
+
+**FilterPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                          | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| className      | `string \| ((state: FilterPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, FilterPanelState>` | -       | A function to customize rendering of the component. |
+
+### GridActionsCell
+
+**GridActionsCell Props:**
+
+| Prop                       | Type                                                                                                                                                            | Default | Description                                                                                                                                                                                                        |
+| :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value                      | `V`                                                                                                                                                             | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields.                                                                                                               |
+| api                        | `GridApiCommunity`                                                                                                                                              | -       | -                                                                                                                                                                                                                  |
+| cellMode\*                 | `GridCellMode`                                                                                                                                                  | -       | The mode of the cell.                                                                                                                                                                                              |
+| colDef\*                   | `GridStateColDef`                                                                                                                                               | -       | The column of the row that the current cell belongs to.                                                                                                                                                            |
+| field\*                    | `string`                                                                                                                                                        | -       | The column field of the cell that triggered the event.                                                                                                                                                             |
+| formattedValue             | `F`                                                                                                                                                             | -       | The cell value formatted with the column valueFormatter.                                                                                                                                                           |
+| hasFocus\*                 | `boolean`                                                                                                                                                       | -       | If true, the cell is the active element.                                                                                                                                                                           |
+| isEditable                 | `boolean`                                                                                                                                                       | -       | If true, the cell is editable.                                                                                                                                                                                     |
+| onMenuClose                | `((params: GridRowParams<GridValidRowModel>, event?: React.MouseEvent<HTMLElement, MouseEvent> \| React.KeyboardEvent \| MouseEvent \| TouchEvent) => boolean)` | -       | Callback to fire before the menu gets closed.&#xA;Use this callback to prevent the menu from closing.                                                                                                              |
+| onMenuOpen                 | `((params: GridRowParams<GridValidRowModel>, event: React.MouseEvent<HTMLElement, MouseEvent>) => boolean)`                                                     | -       | Callback to fire before the menu gets opened.&#xA;Use this callback to prevent the menu from opening.                                                                                                              |
+| position                   | `MenuPosition`                                                                                                                                                  | -       | -                                                                                                                                                                                                                  |
+| row\*                      | `GridValidRowModel`                                                                                                                                             | -       | The row model of the row that the current cell belongs to.                                                                                                                                                         |
+| rowNode\*                  | `GridTreeNodeWithRender`                                                                                                                                        | -       | The node of the row that the current cell belongs to.                                                                                                                                                              |
+| suppressChildrenValidation | `boolean`                                                                                                                                                       | `false` | If true, the children passed to the component will not be validated.&#xA;If false, only `GridActionsCellItem` and `React.Fragment` are allowed as children.&#xA;Only use this prop if you know what you are doing. |
+| tabIndex\*                 | `0 \| -1`                                                                                                                                                       | -       | the tabIndex value.                                                                                                                                                                                                |
+| id\*                       | `GridRowId`                                                                                                                                                     | -       | The grid row id.                                                                                                                                                                                                   |
+| children\*                 | `React.ReactNode`                                                                                                                                               | -       | -                                                                                                                                                                                                                  |
+
+### GridActionsCellItem
+
+**GridActionsCellItem Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Default | Description                                                                          |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------- |
+| label\*          | `string \| React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                                                    |
+| value            | `number \| string \| string[]`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                                                    |
+| closeMenu        | `(() => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                                                    |
+| closeMenuOnClick | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `true`  | If false, the menu will not close when this item is clicked.                         |
+| color            | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                    |
+| component        | `React.ElementType`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | from https\://mui.com/material-ui/api/button-base/#ButtonBase-prop-component         |
+| edge             | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                                                    |
+| icon             | `string & ReactElement \| number & ReactElement \| bigint & ReactElement \| false & ReactElement \| true & ReactElement \| ReactElement & ReactElement \| Iterable<React.ReactNode, any, any> & ReactElement \| React.ReactPortal & ReactElement \| Promise<AwaitedReactNode> & ReactElement \| ((props: GridBaseIconProps) => React.ReactNode \| Promise<React.ReactNode>) \| __type & ReactElement \| React.JSXElementConstructor<GridBaseIconProps> \| React.ReactNode` | -       | -                                                                                    |
+| iconEnd          | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                                                    |
+| iconStart        | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                                                    |
+| inert            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | For items that aren't interactive themselves (but may contain an interactive widget) |
+| material         | `Partial<IconButtonProps> \| Partial<MenuItemProps>`                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                                                    |
+| role             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| selected         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| showInMenu       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| size             | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                                                    |
+| tabIndex         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| title            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| touchRippleRef   | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                    |
+| autoFocus        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| disabled         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| id               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| children         | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                                                    |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| style            | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                    |
+
+### GridAddIcon
+
+**GridAddIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridArrowDownwardIcon
+
+**GridArrowDownwardIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridArrowUpwardIcon
+
+**GridArrowUpwardIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridBody
+
+**GridBody Props:**
+
+| Prop     | Type              | Default | Description |
+| :------- | :---------------- | :------ | :---------- |
+| children | `React.ReactNode` | -       | -           |
+
+### GridBooleanCell
+
+**GridBooleanCell Props:**
+
+| Prop                | Type                     | Default | Description                                                                                          |
+| :------------------ | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value               | `V`                      | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*               | `GridApiCommunity`       | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*          | `GridCellMode`           | -       | The mode of the cell.                                                                                |
+| colDef\*            | `GridStateColDef`        | -       | The column of the row that the current cell belongs to.                                              |
+| field\*             | `string`                 | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue      | `F`                      | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*          | `boolean`                | -       | If true, the cell is the active element.                                                             |
+| hideDescendantCount | `boolean`                | -       | -                                                                                                    |
+| isEditable          | `boolean`                | -       | If true, the cell is editable.                                                                       |
+| row\*               | `any`                    | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*           | `GridTreeNodeWithRender` | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*          | `0 \| -1`                | -       | the tabIndex value.                                                                                  |
+| id\*                | `GridRowId`              | -       | The grid row id.                                                                                     |
+
+### GridCell
+
+**GridCell Props:**
+
+| Prop              | Type                                                                                                    | Default | Description |
+| :---------------- | :------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| onClick           | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| colIndex\*        | `number`                                                                                                | -       | -           |
+| colSpan           | `number`                                                                                                | -       | -           |
+| column\*          | `GridStateColDef`                                                                                       | -       | -           |
+| disableDragEvents | `boolean`                                                                                               | -       | -           |
+| isNotVisible\*    | `boolean`                                                                                               | -       | -           |
+| onDoubleClick     | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onDragEnter       | `React.DragEventHandler<HTMLDivElement>`                                                                | -       | -           |
+| onDragOver        | `React.DragEventHandler<HTMLDivElement>`                                                                | -       | -           |
+| onFocus           | `(((event: React.FocusEvent<HTMLDivElement, Element>) => void) \| ((event: React.FocusEvent) => void))` | -       | -           |
+| onKeyDown         | `React.KeyboardEventHandler<HTMLDivElement>`                                                            | -       | -           |
+| onKeyUp           | `React.KeyboardEventHandler<HTMLDivElement>`                                                            | -       | -           |
+| onMouseDown       | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseEnter      | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseLeave      | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseOver       | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseUp         | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| pinnedOffset      | `number`                                                                                                | -       | -           |
+| pinnedPosition\*  | `unknown`                                                                                               | -       | -           |
+| row\*             | `GridRowModel`                                                                                          | -       | -           |
+| rowId\*           | `GridRowId`                                                                                             | -       | -           |
+| rowNode\*         | `GridTreeNode`                                                                                          | -       | -           |
+| showLeftBorder\*  | `boolean`                                                                                               | -       | -           |
+| showRightBorder\* | `boolean`                                                                                               | -       | -           |
+| width\*           | `number`                                                                                                | -       | -           |
+| align\*           | `GridAlignment`                                                                                         | -       | -           |
+| children          | `React.ReactNode`                                                                                       | -       | -           |
+| className         | `string`                                                                                                | -       | -           |
+| style             | `React.CSSProperties`                                                                                   | -       | -           |
+
+### GridCellCheckboxForwardRef
+
+**GridCellCheckboxForwardRef Props:**
+
+| Prop           | Type                     | Default | Description                                                                                          |
+| :------------- | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value          | `V`                      | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*          | `GridApiCommunity`       | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*     | `GridCellMode`           | -       | The mode of the cell.                                                                                |
+| colDef\*       | `GridStateColDef`        | -       | The column of the row that the current cell belongs to.                                              |
+| field\*        | `string`                 | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue | `F`                      | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*     | `boolean`                | -       | If true, the cell is the active element.                                                             |
+| isEditable     | `boolean`                | -       | If true, the cell is editable.                                                                       |
+| row\*          | `any`                    | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*      | `GridTreeNodeWithRender` | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*     | `0 \| -1`                | -       | the tabIndex value.                                                                                  |
+| id\*           | `GridRowId`              | -       | The grid row id.                                                                                     |
+
+### GridCellCheckboxRenderer
+
+**GridCellCheckboxRenderer Props:**
+
+| Prop           | Type                     | Default | Description                                                                                          |
+| :------------- | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value          | `V`                      | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*          | `GridApiCommunity`       | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*     | `GridCellMode`           | -       | The mode of the cell.                                                                                |
+| colDef\*       | `GridStateColDef`        | -       | The column of the row that the current cell belongs to.                                              |
+| field\*        | `string`                 | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue | `F`                      | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*     | `boolean`                | -       | If true, the cell is the active element.                                                             |
+| isEditable     | `boolean`                | -       | If true, the cell is editable.                                                                       |
+| row\*          | `any`                    | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*      | `GridTreeNodeWithRender` | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*     | `0 \| -1`                | -       | the tabIndex value.                                                                                  |
+| id\*           | `GridRowId`              | -       | The grid row id.                                                                                     |
+
+### GridCheckCircleIcon
+
+**GridCheckCircleIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridCheckIcon
+
+**GridCheckIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridClearIcon
+
+**GridClearIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridCloseIcon
+
+**GridCloseIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridColumnHeaderFilterIconButton
+
+**GridColumnHeaderFilterIconButton Props:**
+
+| Prop    | Type                                                                                                                              | Default | Description |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| onClick | `((params: GridColumnHeaderParams<GridValidRowModel, any, any>, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)` | -       | -           |
+| counter | `number`                                                                                                                          | -       | -           |
+| field\* | `string`                                                                                                                          | -       | -           |
+
+### GridColumnHeaderItem
+
+**GridColumnHeaderItem Props:**
+
+| Prop               | Type                  | Default | Description |
+| :----------------- | :-------------------- | :------ | :---------- |
+| colDef\*           | `GridStateColDef`     | -       | -           |
+| colIndex\*         | `number`              | -       | -           |
+| columnMenuOpen\*   | `boolean`             | -       | -           |
+| disableReorder     | `boolean`             | -       | -           |
+| filterItemsCounter | `number`              | -       | -           |
+| hasFocus           | `boolean`             | -       | -           |
+| headerHeight\*     | `number`              | -       | -           |
+| isDragging\*       | `boolean`             | -       | -           |
+| isLast\*           | `boolean`             | -       | -           |
+| isResizing\*       | `boolean`             | -       | -           |
+| isSiblingFocused\* | `boolean`             | -       | -           |
+| pinnedOffset       | `number`              | -       | -           |
+| pinnedPosition     | `unknown`             | -       | -           |
+| separatorSide      | `unknown`             | -       | -           |
+| showLeftBorder\*   | `boolean`             | -       | -           |
+| showRightBorder\*  | `boolean`             | -       | -           |
+| sortDirection\*    | `GridSortDirection`   | -       | -           |
+| sortIndex          | `number`              | -       | -           |
+| tabIndex\*         | `0 \| -1`             | -       | -           |
+| style              | `React.CSSProperties` | -       | -           |
+
+### GridColumnHeaderMenu
+
+**GridColumnHeaderMenu Props:**
+
+| Prop                  | Type                                    | Default | Description |
+| :-------------------- | :-------------------------------------- | :------ | :---------- |
+| open\*                | `boolean`                               | -       | -           |
+| ContentComponent\*    | `React.JSXElementConstructor<any>`      | -       | -           |
+| columnMenuButtonId    | `string`                                | -       | -           |
+| columnMenuId          | `string`                                | -       | -           |
+| contentComponentProps | `any`                                   | -       | -           |
+| field\*               | `string`                                | -       | -           |
+| onExited              | `((node: HTMLElement \| null) => void)` | -       | -           |
+| target\*              | `HTMLElement \| null`                   | -       | -           |
+
+### GridColumnHeaderSeparator
+
+**GridColumnHeaderSeparator Props:**
+
+| Prop        | Type      | Default | Description |
+| :---------- | :-------- | :------ | :---------- |
+| height\*    | `number`  | -       | -           |
+| resizable\* | `boolean` | -       | -           |
+| resizing\*  | `boolean` | -       | -           |
+| side        | `unknown` | -       | -           |
+
+### GridColumnHeaderSortIcon
+
+**GridColumnHeaderSortIcon Props:**
+
+| Prop           | Type                                                                                                                                   | Default | Description |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| label          | `string`                                                                                                                               | -       | -           |
+| onClick        | `(((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) \| ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void))` | -       | -           |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                  | -       | -           |
+| direction\*    | `GridSortDirection`                                                                                                                    | -       | -           |
+| edge           | `'start' \| 'end' \| false`                                                                                                            | -       | -           |
+| field\*        | `string`                                                                                                                               | -       | -           |
+| index          | `number`                                                                                                                               | -       | -           |
+| material       | `Partial<IconButtonProps>`                                                                                                             | -       | -           |
+| role           | `string`                                                                                                                               | -       | -           |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                       | -       | -           |
+| sortingOrder\* | `GridSortDirection[]`                                                                                                                  | -       | -           |
+| tabIndex       | `number`                                                                                                                               | -       | -           |
+| title          | `string`                                                                                                                               | -       | -           |
+| touchRippleRef | `any`                                                                                                                                  | -       | -           |
+| disabled       | `boolean`                                                                                                                              | -       | -           |
+| id             | `string`                                                                                                                               | -       | -           |
+| children       | `React.ReactNode`                                                                                                                      | -       | -           |
+| className      | `string`                                                                                                                               | -       | -           |
+| style          | `React.CSSProperties`                                                                                                                  | -       | -           |
+
+### GridColumnHeaderTitle
+
+**GridColumnHeaderTitle Props:**
+
+| Prop          | Type              | Default | Description |
+| :------------ | :---------------- | :------ | :---------- |
+| label\*       | `string`          | -       | -           |
+| columnWidth\* | `number`          | -       | -           |
+| description   | `React.ReactNode` | -       | -           |
+
+### GridColumnIcon
+
+**GridColumnIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridColumnMenuColumnsItem
+
+**GridColumnMenuColumnsItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuContainer
+
+**GridColumnMenuContainer Props:**
+
+| Prop       | Type                                      | Default | Description |
+| :--------- | :---------------------------------------- | :------ | :---------- |
+| open\*     | `boolean`                                 | -       | -           |
+| colDef\*   | `GridColDef`                              | -       | -           |
+| hideMenu\* | `((event: React.SyntheticEvent) => void)` | -       | -           |
+| labelledby | `string`                                  | -       | -           |
+| id         | `string`                                  | -       | -           |
+
+### GridColumnMenuFilterItem
+
+**GridColumnMenuFilterItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuHideItem
+
+**GridColumnMenuHideItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuManageItem
+
+**GridColumnMenuManageItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuSortItem
+
+**GridColumnMenuSortItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnsManagement
+
+**GridColumnsManagement Props:**
+
+| Prop                  | Type                                                     | Default | Description                                                                                                                                                                                                                          |
+| :-------------------- | :------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoFocusSearchField  | `boolean`                                                | `true`  | If `true`, the column search field will be focused automatically.&#xA;If `false`, the first column switch input will be focused automatically.&#xA;This helps to avoid input keyboard panel to popup automatically on touch devices. |
+| disableResetButton    | `boolean`                                                | `false` | If `true`, the `Reset` button will not be disabled                                                                                                                                                                                   |
+| disableShowHideToggle | `boolean`                                                | `false` | If `true`, the `Show/Hide all` toggle checkbox will not be displayed.                                                                                                                                                                |
+| getTogglableColumns   | `((columns: GridColDef[]) => string[])`                  | -       | Returns the list of togglable columns.&#xA;If used, only those columns will be displayed in the panel&#xA;which are passed as the return value of the function.                                                                      |
+| searchDebounceMs      | `number`                                                 | `150`   | The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.                                                                                                                                    |
+| searchInputProps      | `Partial<TextFieldProps>`                                | -       | -                                                                                                                                                                                                                                    |
+| searchPredicate       | `((column: GridColDef, searchValue: string) => boolean)` | -       | -                                                                                                                                                                                                                                    |
+| sort                  | `'asc' \| 'desc'`                                        | -       | -                                                                                                                                                                                                                                    |
+| toggleAllMode         | `'all' \| 'filteredOnly'`                                | `'all'` | Changes the behavior of the `Show/Hide All` toggle when the search field is used: `all`: Will toggle all columns.`filteredOnly`: Will only toggle columns that match the search criteria.                                            |
+
+### GridColumnsPanel
+
+### GridColumnUnsortedIcon
+
+**GridColumnUnsortedIcon Props:**
+
+| Prop           | Type                                          | Default | Description |
+| :------------- | :-------------------------------------------- | :------ | :---------- |
+| color          | `string`                                      | -       | -           |
+| fontSize       | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| sortingOrder\* | `GridSortDirection[]`                         | -       | -           |
+| titleAccess    | `string`                                      | -       | -           |
+| className      | `string`                                      | -       | -           |
+| style          | `React.CSSProperties`                         | -       | -           |
+
+### GridCsvExportMenuItem
+
+**GridCsvExportMenuItem Props:**
+
+| Prop     | Type                                                                                                                                                                                                                                                                                                                                           | Default | Description |
+| :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| hideMenu | `(() => void)`                                                                                                                                                                                                                                                                                                                                 | -       | -           |
+| options  | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | -       | -           |
+
+### GridDeleteForeverIcon
+
+**GridDeleteForeverIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridDeleteIcon
+
+**GridDeleteIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridDownloadIcon
+
+**GridDownloadIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridDragIcon
+
+**GridDragIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridEditBooleanCell
+
+**GridEditBooleanCell Props:**
+
+| Prop              | Type                                                                                                  | Default | Description                                                                                          |
+| :---------------- | :---------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                                                   | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLInputElement, Element>, newValue: boolean) => void \| Promise<void>)` | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                                                    | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                                                        | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                   | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                                                     | -       | The column of the row that the current cell belongs to.                                              |
+| field\*           | `string`                                                                                              | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                                                   | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                                             | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                             | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                             | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                             | -       | -                                                                                                    |
+| row\*             | `any`                                                                                                 | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                                              | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*        | `0 \| -1`                                                                                             | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                                                           | -       | The grid row id.                                                                                     |
+
+### GridEditDateCell
+
+**GridEditDateCell Props:**
+
+| Prop              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                                                                          |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLInputElement, Element>, newValue: Date \| null) => void \| Promise<void>)`                                                                                                                                                                                                                                                                                                                                                                                     | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | The column of the row that the current cell belongs to.                                              |
+| field\*           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| row\*             | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps         | `{ root?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLElement>; inputRef?: React.Ref<HTMLInputElement>; fullWidth?: boolean; type?: React.HTMLInputTypeAttribute; value?: string; onChange: React.ChangeEventHandler; disabled?: boolean; endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> } } & BaseInputPropsOverrides> }` | -       | -                                                                                                    |
+| tabIndex\*        | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -       | The grid row id.                                                                                     |
+
+### GridEditInputCell
+
+**GridEditInputCell Props:**
+
+| Prop              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                                                                          |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLInputElement, Element>, newValue: string) => void \| Promise<void>)`                                                                                                                                                                                                                                                                                                                                                                                           | -       | Callback called when the value is changed by the user.                                               |
+| api               | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode          | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                                                                    |
+| colDef            | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | The column of the row that the current cell belongs to.                                              |
+| debounceMs        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                                                                    |
+| field             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| row               | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode           | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps         | `{ root?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLElement>; inputRef?: React.Ref<HTMLInputElement>; fullWidth?: boolean; type?: React.HTMLInputTypeAttribute; value?: string; onChange: React.ChangeEventHandler; disabled?: boolean; endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> } } & BaseInputPropsOverrides> }` | -       | -                                                                                                    |
+| tabIndex          | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | the tabIndex value.                                                                                  |
+| id                | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -       | The grid row id.                                                                                     |
+
+### GridEditLongTextCell
+
+**GridEditLongTextCell Props:**
+
+| Prop              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default | Description                                                                                          |
+| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLTextAreaElement, Element>, newValue: string) => void \| Promise<void>)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column of the row that the current cell belongs to.                                              |
+| debounceMs        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                                                                    |
+| field\*           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                                                                    |
+| row\*             | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps         | `{ root?: GridSkeletonCellProps<HTMLDivElement>; value?: GridSkeletonCellProps<HTMLDivElement>; popper?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; popperContent?: GridSkeletonCellProps<HTMLDivElement>; textarea?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLTextAreaElement>; inputRef?: React.Ref<HTMLTextAreaElement>; fullWidth?: boolean; value?: string; onChange: React.ChangeEventHandler<HTMLTextAreaElement, Element>; onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>; disabled?: boolean; autoFocus?: boolean; minRows?: number; maxRows?: number } & BaseTextareaPropsOverrides> }` | -       | Props passed to internal components.                                                                 |
+| tabIndex\*        | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | The grid row id.                                                                                     |
+
+### GridEditSingleSelectCell
+
+**GridEditSingleSelectCell Props:**
+
+| Prop              | Type                                                                      | Default | Description                                                                                          |
+| :---------------- | :------------------------------------------------------------------------ | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                       | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.SyntheticEvent, newValue: any) => void \| Promise<void>)` | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                        | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                            | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                       | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                         | -       | The column of the row that the current cell belongs to.                                              |
+| field\*           | `string`                                                                  | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                       | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                 | -       | If true, the cell is the active element.                                                             |
+| initialOpen       | `boolean`                                                                 | -       | If true, the select opens by default.                                                                |
+| isEditable        | `boolean`                                                                 | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                 | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                 | -       | -                                                                                                    |
+| row\*             | `any`                                                                     | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                  | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*        | `0 \| -1`                                                                 | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                               | -       | The grid row id.                                                                                     |
+
+### GridExpandMoreIcon
+
+**GridExpandMoreIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFilterAltIcon
+
+**GridFilterAltIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFilterForm
+
+**GridFilterForm Props:**
+
+| Prop                              | Type                                      | Default                                         | Description                                                                                                                            |
+| :-------------------------------- | :---------------------------------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- |
+| applyFilterChanges\*              | `((item: GridFilterItem) => void)`        | -                                               | Callback called when the operator, column field or value is changed.                                                                   |
+| applyMultiFilterOperatorChanges\* | `((operator: unknown) => void)`           | -                                               | Callback called when the logic operator is changed.                                                                                    |
+| columnInputProps                  | `any`                                     | `{}`                                            | Props passed to the column input component.                                                                                            |
+| columnsSort                       | `'asc' \| 'desc'`                         | -                                               | Changes how the options in the columns selector should be ordered.&#xA;If not specified, the order is derived from the `columns` prop. |
+| deleteFilter\*                    | `((item: GridFilterItem) => void)`        | -                                               | Callback called when the delete button is clicked.                                                                                     |
+| deleteIconProps                   | `any`                                     | `{}`                                            | Props passed to the delete icon.                                                                                                       |
+| disableMultiFilterOperator        | `boolean`                                 | -                                               | If `true`, disables the logic operator field but still renders it.                                                                     |
+| filterColumns                     | `((args: FilterColumnsArgs) => string[])` | -                                               | Allows to filter the columns displayed in the filter form.                                                                             |
+| focusElementRef                   | `React.Ref<any>`                          | -                                               | A ref allowing to set imperative focus.&#xA;It can be passed to the el                                                                 |
+| hasMultipleFilters\*              | `boolean`                                 | -                                               | If `true`, the logic operator field is rendered.&#xA;The field will be invisible if `showMultiFilterOperators` is also `true`.         |
+| item\*                            | `GridFilterItem`                          | -                                               | The \[\[GridFilterItem]] representing this form.                                                                                       |
+| logicOperatorInputProps           | `any`                                     | `{}`                                            | Props passed to the logic operator input component.                                                                                    |
+| logicOperators                    | `unknown[]`                               | `[GridLogicOperator.And, GridLogicOperator.Or]` | Sets the available logic operators.                                                                                                    |
+| operatorInputProps                | `any`                                     | `{}`                                            | Props passed to the operator input component.                                                                                          |
+| showMultiFilterOperators          | `boolean`                                 | -                                               | If `true`, the logic operator field is visible.                                                                                        |
+| valueInputProps                   | `any`                                     | `{}`                                            | Props passed to the value input component.                                                                                             |
+| readOnly                          | `boolean`                                 | `false`                                         | `true` if the filter is disabled/read only.&#xA;i.e. `colDef.fiterable = false` but passed in `filterModel`                            |
+
+### GridFilterInputBoolean
+
+**GridFilterInputBoolean Props:**
+
+| Prop             | Type                                | Default | Description                                                                                                                 |
+| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`       | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)` | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                   | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                    | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                   | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                           | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                    | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`          | -       | -                                                                                                                           |
+| tabIndex         | `number`                            | -       | -                                                                                                                           |
+| disabled         | `boolean`                           | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`    | -       | -                                                                                                                           |
+| className        | `string`                            | -       | -                                                                                                                           |
+
+### GridFilterInputDate
+
+**GridFilterInputDate Props:**
+
+| Prop             | Type                                | Default | Description                                                                                                                 |
+| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`       | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)` | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                   | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                    | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                   | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                           | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                    | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`          | -       | -                                                                                                                           |
+| tabIndex         | `number`                            | -       | -                                                                                                                           |
+| type             | `'date' \| 'datetime-local'`        | -       | -                                                                                                                           |
+| disabled         | `boolean`                           | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`    | -       | -                                                                                                                           |
+| className        | `string`                            | -       | -                                                                                                                           |
+
+### GridFilterInputMultipleSingleSelect
+
+**GridFilterInputMultipleSingleSelect Props:**
+
+| Prop             | Type                                                                            | Default | Description                                                                                                                 |
+| :--------------- | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`                                                   | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)`                                             | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                                                               | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                                                                | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                                                               | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                                                                       | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                                                                | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`                                                       | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`                                                       | -       | -                                                                                                                           |
+| slotProps        | `{ root: Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'> }` | -       | -                                                                                                                           |
+| tabIndex         | `number`                                                                        | -       | -                                                                                                                           |
+| type             | `'singleSelect'`                                                                | -       | -                                                                                                                           |
+| disabled         | `boolean`                                                                       | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`                                                | -       | -                                                                                                                           |
+| className        | `string`                                                                        | -       | -                                                                                                                           |
+
+### GridFilterInputMultipleValue
+
+**GridFilterInputMultipleValue Props:**
+
+| Prop             | Type                                                                      | Default | Description                                                                                                                 |
+| :--------------- | :------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`                                             | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)`                                       | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                                                         | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                                                          | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                                                         | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                                                                 | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                                                          | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`                                                 | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`                                                 | -       | -                                                                                                                           |
+| slotProps        | `{ root: Omit<AutocompleteProps<string, true, false, true>, 'options'> }` | -       | -                                                                                                                           |
+| tabIndex         | `number`                                                                  | -       | -                                                                                                                           |
+| type             | `'text' \| 'number' \| 'date' \| 'datetime-local'`                        | -       | -                                                                                                                           |
+| disabled         | `boolean`                                                                 | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`                                          | -       | -                                                                                                                           |
+| className        | `string`                                                                  | -       | -                                                                                                                           |
+
+### GridFilterInputSingleSelect
+
+**GridFilterInputSingleSelect Props:**
+
+| Prop             | Type                                | Default | Description                                                                                                                 |
+| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`       | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)` | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                   | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                    | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                   | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                           | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                    | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`          | -       | -                                                                                                                           |
+| tabIndex         | `number`                            | -       | -                                                                                                                           |
+| type             | `'singleSelect'`                    | -       | -                                                                                                                           |
+| disabled         | `boolean`                           | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`    | -       | -                                                                                                                           |
+| className        | `string`                            | -       | -                                                                                                                           |
+
+### GridFilterInputValue
+
+**GridFilterInputValue Props:**
+
+| Prop             | Type                                               | Default | Description                                                                                                                 |
+| :--------------- | :------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`                      | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)`                | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                                  | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                                   | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                                  | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                                          | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                                   | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`                          | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`                          | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`                         | -       | -                                                                                                                           |
+| tabIndex         | `number`                                           | -       | -                                                                                                                           |
+| type             | `'text' \| 'number' \| 'date' \| 'datetime-local'` | -       | -                                                                                                                           |
+| disabled         | `boolean`                                          | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`                   | -       | -                                                                                                                           |
+| className        | `string`                                           | -       | -                                                                                                                           |
+
+### GridFilterListIcon
+
+**GridFilterListIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFilterPanel
+
+**GridFilterPanel Props:**
+
+| Prop                   | Type                                                                                                                                                                               | Default                                         | Description                                                                                                                            |
+| :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- |
+| columnsSort            | `'asc' \| 'desc'`                                                                                                                                                                  | -                                               | Changes how the options in the columns selector should be ordered.&#xA;If not specified, the order is derived from the `columns` prop. |
+| disableAddFilterButton | `boolean`                                                                                                                                                                          | `false`                                         | If `true`, the `Add filter` button will not be displayed.                                                                              |
+| disableRemoveAllButton | `boolean`                                                                                                                                                                          | `false`                                         | If `true`, the `Remove all` button will be disabled                                                                                    |
+| filterFormProps        | `Pick<GridFilterFormProps, 'columnsSort' \| 'deleteIconProps' \| 'logicOperatorInputProps' \| 'operatorInputProps' \| 'columnInputProps' \| 'valueInputProps' \| 'filterColumns'>` | -                                               | Props passed to each filter form.                                                                                                      |
+| getColumnForNewFilter  | `((args: GetColumnForNewFilterArgs) => string \| null)`                                                                                                                            | -                                               | Function that returns the next filter item to be picked as default filter.                                                             |
+| logicOperators         | `unknown[]`                                                                                                                                                                        | `[GridLogicOperator.And, GridLogicOperator.Or]` | Sets the available logic operators.                                                                                                    |
+| sx                     | `SxProps<Theme>`                                                                                                                                                                   | -                                               | The system prop that allows defining system overrides as well as additional CSS styles.                                                |
+
+### GridFooter
+
+**GridFooter Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridFooterContainer
+
+**GridFooterContainer Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridFooterPlaceholder
+
+### GridGenericColumnMenu
+
+**GridGenericColumnMenu Props:**
+
+| Prop       | Type                                                          | Default | Description                                                                                                                                                                                                       |
+| :--------- | :------------------------------------------------------------ | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| open\*     | `boolean`                                                     | -       | -                                                                                                                                                                                                                 |
+| colDef\*   | `GridColDef`                                                  | -       | -                                                                                                                                                                                                                 |
+| hideMenu\* | `((event: React.SyntheticEvent) => void)`                     | -       | -                                                                                                                                                                                                                 |
+| labelledby | `string`                                                      | -       | -                                                                                                                                                                                                                 |
+| slotProps  | `{ [key: string]: GridColumnMenuSlotProps }`                  | -       | Could be used to pass new props or override props specific to a column menu component&#xA;e.g. `displayOrder`                                                                                                     |
+| slots      | `{ [key: string]: React.JSXElementConstructor<any> \| null }` | -       | `slots` could be used to add new and (or) override default column menu items&#xA;If you register a nee component you must pass it's `displayOrder` in `slotProps`&#xA;or it will be placed in the end of the list |
+| id         | `string`                                                      | -       | -                                                                                                                                                                                                                 |
+
+### GridHeader
+
+### GridHeaderCheckbox
+
+**GridHeaderCheckbox Props:**
+
+| Prop     | Type                                           | Default | Description                                             |
+| :------- | :--------------------------------------------- | :------ | :------------------------------------------------------ |
+| colDef\* | `GridStateColDef<GridValidRowModel, any, any>` | -       | The column of the current header component.             |
+| field\*  | `string`                                       | -       | The column field of the column that triggered the event |
+
+### GridKeyboardArrowRight
+
+**GridKeyboardArrowRight Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridLoadIcon
+
+**GridLoadIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridLoadingOverlay
+
+**GridLoadingOverlay Props:**
+
+| Prop          | Type                        | Default             | Description                                            |
+| :------------ | :-------------------------- | :------------------ | :----------------------------------------------------- |
+| noRowsVariant | `GridLoadingOverlayVariant` | `'skeleton'`        | The variant of the overlay when no rows are displayed. |
+| sx            | `SxProps<Theme>`            | -                   | -                                                      |
+| variant       | `GridLoadingOverlayVariant` | `'linear-progress'` | The variant of the overlay.                            |
+
+### GridLongTextCell
+
+**GridLongTextCell Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default | Description                                                                                          |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value          | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*          | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*     | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The mode of the cell.                                                                                |
+| colDef\*       | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column of the row that the current cell belongs to.                                              |
+| field\*        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is the active element.                                                             |
+| isEditable     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is editable.                                                                       |
+| renderContent  | `((value: string \| null) => React.ReactNode)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | A function to customize the content rendered in the popup.                                           |
+| row\*          | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*      | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps      | `{ root?: GridSkeletonCellProps<HTMLDivElement>; content?: GridSkeletonCellProps<HTMLDivElement>; expandButton?: React.ButtonHTMLAttributes<HTMLButtonElement>; collapseButton?: React.ButtonHTMLAttributes<HTMLButtonElement>; popper?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; popperContent?: GridSkeletonCellProps<HTMLDivElement> }` | -       | Props passed to internal components.                                                                 |
+| tabIndex\*     | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | the tabIndex value.                                                                                  |
+| id\*           | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | The grid row id.                                                                                     |
+
+### GridLongTextCellCollapseIcon
+
+**GridLongTextCellCollapseIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridLongTextCellExpandIcon
+
+**GridLongTextCellExpandIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMenu
+
+**GridMenu Props:**
+
+| Prop       | Type                                                                  | Default | Description |
+| :--------- | :-------------------------------------------------------------------- | :------ | :---------- |
+| open\*     | `boolean`                                                             | -       | -           |
+| onClose\*  | `((event?: React.KeyboardEvent \| MouseEvent \| TouchEvent) => void)` | -       | -           |
+| onExited   | `((node: HTMLElement \| null) => void)`                               | -       | -           |
+| position   | `MenuPosition`                                                        | -       | -           |
+| target\*   | `HTMLElement \| null`                                                 | -       | -           |
+| children\* | `React.ReactNode`                                                     | -       | -           |
+| className  | `string`                                                              | -       | -           |
+
+### GridMenuIcon
+
+**GridMenuIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMoreVertIcon
+
+**GridMoreVertIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridNoColumnsOverlay
+
+**GridNoColumnsOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridNoRowsOverlay
+
+**GridNoRowsOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridOverlay
+
+**GridOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPagination
+
+### GridPanel
+
+**GridPanel Props:**
+
+| Prop      | Type                        | Default | Description                                             |
+| :-------- | :-------------------------- | :------ | :------------------------------------------------------ |
+| open\*    | `boolean`                   | -       | -                                                       |
+| classes   | `Partial<GridPanelClasses>` | -       | Override or extend the styles applied to the component. |
+| flip      | `boolean`                   | -       | -                                                       |
+| onClose   | `(() => void)`              | -       | -                                                       |
+| target    | `Element \| null`           | -       | -                                                       |
+| id        | `string`                    | -       | -                                                       |
+| children  | `React.ReactNode`           | -       | -                                                       |
+| className | `string`                    | -       | -                                                       |
+
+### GridPanelContent
+
+**GridPanelContent Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPanelFooter
+
+**GridPanelFooter Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPanelHeader
+
+**GridPanelHeader Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPanelWrapper
+
+### GridPrintExportMenuItem
+
+**GridPrintExportMenuItem Props:**
+
+| Prop     | Type                                                                                                                                                                                                                                                                                                                                        | Default | Description |
+| :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| hideMenu | `(() => void)`                                                                                                                                                                                                                                                                                                                              | -       | -           |
+| options  | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | -       | -           |
+
+### GridRedoIcon
+
+**GridRedoIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridRemoveIcon
+
+**GridRemoveIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridRoot
+
+**GridRoot Props:**
+
+| Prop      | Type              | Default | Description                                                                             |
+| :-------- | :---------------- | :------ | :-------------------------------------------------------------------------------------- |
+| sidePanel | `React.ReactNode` | -       | -                                                                                       |
+| sx        | `SxProps<Theme>`  | -       | The system prop that allows defining system overrides as well as additional CSS styles. |
+
+### GridRow
+
+**GridRow Props:**
+
+| Prop                 | Type                                      | Default | Description                                                                                                                                                 |
+| :------------------- | :---------------------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick              | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| columnsTotalWidth\*  | `number`                                  | -       | -                                                                                                                                                           |
+| firstColumnIndex\*   | `number`                                  | -       | -                                                                                                                                                           |
+| focusedColumnIndex\* | `number \| undefined`                     | -       | Determines which cell has focus.&#xA;If `null`, no cell in this row has focus.                                                                              |
+| gridHasFiller\*      | `boolean`                                 | -       | -                                                                                                                                                           |
+| index\*              | `number`                                  | -       | Index of the row in the whole sorted and filtered dataset.&#xA;If some rows above have expanded children, this index also take those children into account. |
+| isFirstVisible\*     | `boolean`                                 | -       | -                                                                                                                                                           |
+| isLastVisible\*      | `boolean`                                 | -       | -                                                                                                                                                           |
+| isNotVisible\*       | `boolean`                                 | -       | -                                                                                                                                                           |
+| lastColumnIndex\*    | `number`                                  | -       | -                                                                                                                                                           |
+| offsetLeft\*         | `number`                                  | -       | -                                                                                                                                                           |
+| onDoubleClick        | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| onMouseEnter         | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| onMouseLeave         | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| pinnedColumns\*      | `GridPinnedColumns`                       | -       | -                                                                                                                                                           |
+| row\*                | `GridRowModel`                            | -       | -                                                                                                                                                           |
+| rowHeight\*          | `number \| 'auto'`                        | -       | -                                                                                                                                                           |
+| rowId\*              | `GridRowId`                               | -       | -                                                                                                                                                           |
+| scrollbarWidth\*     | `number`                                  | -       | -                                                                                                                                                           |
+| selected\*           | `boolean`                                 | -       | -                                                                                                                                                           |
+| showBottomBorder\*   | `boolean`                                 | -       | -                                                                                                                                                           |
+| visibleColumns\*     | `GridStateColDef[]`                       | -       | -                                                                                                                                                           |
+
+### GridRowCheckbox
+
+**GridRowCheckbox Props:**
+
+| Prop           | Type                                                                                                   | Default | Description      |
+| :------------- | :----------------------------------------------------------------------------------------------------- | :------ | :--------------- |
+| name           | `string`                                                                                               | -       | -                |
+| label          | `React.ReactNode`                                                                                      | -       | -                |
+| checked        | `boolean`                                                                                              | -       | -                |
+| indeterminate  | `boolean`                                                                                              | -       | -                |
+| density        | `'standard' \| 'compact'`                                                                              | -       | -                |
+| fullWidth      | `boolean`                                                                                              | -       | -                |
+| material       | `Partial<CheckboxProps>`                                                                               | -       | -                |
+| onChange       | `(((event: React.ChangeEvent<HTMLElement, Element>) => void) \| ((event: React.ChangeEvent) => void))` | -       | -                |
+| rowId\*        | `GridRowId`                                                                                            | -       | The grid row id. |
+| size           | `'small' \| 'medium'`                                                                                  | -       | -                |
+| slotProps      | `{ htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & { ref?: React.Ref<HTMLInputElement> } }`  | -       | -                |
+| tabIndex       | `number`                                                                                               | -       | -                |
+| touchRippleRef | `any`                                                                                                  | -       | -                |
+| autoFocus      | `boolean`                                                                                              | -       | -                |
+| disabled       | `boolean`                                                                                              | -       | -                |
+| inputRef       | `React.Ref<HTMLInputElement>`                                                                          | -       | -                |
+| id             | `string`                                                                                               | -       | -                |
+| className      | `string`                                                                                               | -       | -                |
+| style          | `React.CSSProperties`                                                                                  | -       | -                |
+
+### GridRowCount
+
+**GridRowCount Props:**
+
+| Prop              | Type             | Default | Description |
+| :---------------- | :--------------- | :------ | :---------- |
+| rowCount\*        | `number`         | -       | -           |
+| sx                | `SxProps<Theme>` | -       | -           |
+| visibleRowCount\* | `number`         | -       | -           |
+
+### GridSearchIcon
+
+**GridSearchIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSelectedRowCount
+
+**GridSelectedRowCount Props:**
+
+| Prop               | Type             | Default | Description |
+| :----------------- | :--------------- | :------ | :---------- |
+| selectedRowCount\* | `number`         | -       | -           |
+| sx                 | `SxProps<Theme>` | -       | -           |
+
+### GridSeparatorIcon
+
+**GridSeparatorIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridShadowScrollArea
+
+Adds scroll shadows above and below content in a scrollable container.
+
+**GridShadowScrollArea Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| children\* | `React.ReactNode` | -       | -           |
+
+### GridSkeletonCell
+
+**GridSkeletonCell Props:**
+
+| Prop   | Type               | Default | Description                                                                         |
+| :----- | :----------------- | :------ | :---------------------------------------------------------------------------------- |
+| empty  | `boolean`          | `false` | If `true`, the cell will not display the skeleton but still reserve the cell space. |
+| field  | `string`           | -       | -                                                                                   |
+| height | `number \| 'auto'` | -       | -                                                                                   |
+| type   | `GridColType`      | -       | -                                                                                   |
+| width  | `number \| string` | -       | -                                                                                   |
+| align  | `string`           | -       | -                                                                                   |
+
+### GridTableRowsIcon
+
+**GridTableRowsIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridToolbar
+
+**GridToolbar Props:**
+
+| Prop                | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                                    |
+| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------- |
+| csvOptions          | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                       | -       | -                                              |
+| printOptions        | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                          | -       | -                                              |
+| quickFilterProps    | `GridToolbarQuickFilterProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | Props passed to the quick filter component.    |
+| showHistoryControls | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`  | Show the history controls (undo/redo buttons). |
+| showQuickFilter     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`  | Show the quick filter component.               |
+| slotProps           | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside.           |
+| sx                  | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                              |
+
+### GridToolbarColumnsButton
+
+**GridToolbarColumnsButton Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarContainer
+
+**GridToolbarContainer Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridToolbarDensitySelector
+
+**GridToolbarDensitySelector Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarExport
+
+**GridToolbarExport Props:**
+
+| Prop         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| csvOptions   | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                       | -       | -                                    |
+| printOptions | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                          | -       | -                                    |
+| slotProps    | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarExportContainer
+
+**GridToolbarExportContainer Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarFilterButton
+
+**GridToolbarFilterButton Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Default | Description                          |
+| :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides>; badge?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { badgeContent?: React.ReactNode; children?: React.ReactNode; color?: 'primary' \| 'default' \| 'error'; invisible?: boolean; overlap?: 'circular'; variant?: 'dot'; style?: React.CSSProperties } & BaseBadgePropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarQuickFilter
+
+**GridToolbarQuickFilter Props:**
+
+| Prop                 | Type                          | Default                                  | Description                                                                                       |
+| :------------------- | :---------------------------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------ |
+| debounceMs           | `number`                      | `150`                                    | The debounce time in milliseconds.                                                                |
+| quickFilterFormatter | `((values: any[]) => string)` | `(values: string[]) => values.join(' ')` | Function responsible for formatting values of quick filter in a string when the model is modified |
+| quickFilterParser    | `((input: string) => any[])`  | `(searchText: string) => searchText      |
+
+.split(' ')
+.filter((word) => word !== '')`| Function responsible for parsing text input in an array of independent values for quick filtering. |
+| slotProps            |`{ root: TextFieldProps }`   | -                                                                               | -                                                                                                  |
+| className            |`string` | - | - |
+
+### GridTripleDotsVerticalIcon
+
+**GridTripleDotsVerticalIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridUndoIcon
+
+**GridUndoIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridViewColumnIcon
+
+**GridViewColumnIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridViewHeadlineIcon
+
+**GridViewHeadlineIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridViewStreamIcon
+
+**GridViewStreamIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridVisibilityOffIcon
+
+**GridVisibilityOffIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### QuickFilter
+
+The top level Quick Filter component that provides context to child components.
+It renders a `<div />` element.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
+
+**QuickFilter Props:**
+
+| Prop             | Type                                                        | Default                                                                       | Description                                                                                        |
+| :--------------- | :---------------------------------------------------------- | :---------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- |
+| debounceMs       | `number`                                                    | `150`                                                                         | The debounce time in milliseconds.                                                                 |
+| defaultExpanded  | `boolean`                                                   | `false`                                                                       | The default expanded state of the quick filter control.                                            |
+| expanded         | `boolean`                                                   | -                                                                             | The expanded state of the quick filter control.                                                    |
+| formatter        | `((values: any[]) => string)`                               | `(values: string[]) => values.join(' ')`                                      | Function responsible for formatting values of quick filter in a string when the model is modified  |
+| onExpandedChange | `((expanded: boolean) => void)`                             | -                                                                             | Callback function that is called when the quick filter input is expanded or collapsed.             |
+| parser           | `((input: string) => any[])`                                | `(searchText: string) => searchText.split(' ').filter((word) => word !== '')` | Function responsible for parsing text input in an array of independent values for quick filtering. |
+| className        | `string \| ((state: QuickFilterState) => string)`           | -                                                                             | Override or extend the styles applied to the component.                                            |
+| render           | `RenderProp<React.ComponentProps<'div'>, QuickFilterState>` | -                                                                             | A function to customize rendering of the component.                                                |
+
+### QuickFilterClear
+
+A button that resets the filter value.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilterClear API](https://mui.com/x/api/data-grid/quick-filter-clear/)
+
+**QuickFilterClear Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | -                                                       |
+| className      | `string \| ((state: QuickFilterState) => string)`                                                                                                                                                                                                                                                                                                                                                                                 | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| render         | `RenderProp<{ ref?: Ref<HTMLButtonElement>; className?: string; id?: string; style?: React.CSSProperties; tabIndex?: number; title?: string; role?: string; children?: React.ReactNode; disabled?: boolean; size?: 'small' \| 'medium' \| 'large'; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }, QuickFilterState>` | -       | A function to customize rendering of the component.     |
+
+### QuickFilterControl
+
+A component that takes user input and filters row data.
+It renders the `baseTextField` slot.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilterControl API](https://mui.com/x/api/data-grid/quick-filter-control/)
+
+**QuickFilterControl Props:**
+
+| Prop         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default | Description                                             |
+| :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label        | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| value        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| autoComplete | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| color        | `'primary' \| 'error'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| error        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| fullWidth    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| helperText   | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                       |
+| material     | `Partial<TextFieldProps>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| multiline    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| onChange     | `(((event: React.ChangeEvent<HTMLElement, Element>) => void) \| ((event: React.ChangeEvent) => void))`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| placeholder  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| role         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| size         | `'small' \| 'medium'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| slotProps    | `{ input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| tabIndex     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| type         | `React.HTMLInputTypeAttribute`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| autoFocus    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| disabled     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| inputRef     | `React.Ref<HTMLInputElement>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| id           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| className    | `string \| ((state: QuickFilterState) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | Override or extend the styles applied to the component. |
+| style        | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| render       | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; autoComplete?: string; color?: 'primary' \| 'error'; disabled?: boolean; error?: boolean; fullWidth?: boolean; helperText?: string \| null; id?: string; inputRef?: React.Ref<HTMLInputElement>; label?: React.ReactNode; onChange?: React.ChangeEventHandler; placeholder?: string; size?: 'small' \| 'medium'; slotProps?: { input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }; tabIndex?: number; type?: React.HTMLInputTypeAttribute; value?: string; ref?: Ref<HTMLInputElement>; multiline?: boolean; autoFocus?: boolean } & BaseTextFieldPropsOverrides, QuickFilterState>` | -       | A function to customize rendering of the component.     |
+
+### QuickFilterTrigger
+
+A button that expands/collapses the quick filter.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilterTrigger API](https://mui.com/x/api/data-grid/quick-filter-trigger/)
+
+**QuickFilterTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                          | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| className      | `string \| ((state: QuickFilterState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, QuickFilterState>` | -       | A function to customize rendering of the component.     |
+
+### renderActionsCell
+
+**Parameters:**
+
+| Parameter | Type                                                           | Default | Description |
+| :-------- | :------------------------------------------------------------- | :------ | :---------- |
+| params    | `GridLongTextCellProps<any, any, any, GridTreeNodeWithRender>` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditBooleanCell
+
+**Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| params    | `GridEditBooleanCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditDateCell
+
+**Parameters:**
+
+| Parameter | Type                                                              | Default | Description |
+| :-------- | :---------------------------------------------------------------- | :------ | :---------- |
+| params    | `GridEditBooleanCellProps<any, any, any, GridTreeNodeWithRender>` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditInputCell
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| params    | `GridEditInputCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditLongTextCell
+
+**Parameters:**
+
+| Parameter | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| params    | `GridEditLongTextCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditSingleSelectCell
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `GridEditSingleSelectCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderLongTextCell
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| params    | `GridLongTextCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### Toolbar
+
+The top level Toolbar component that provides context to child components.
+It renders a styled `<div />` element.
+
+Demos:
+
+- [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+
+API:
+
+- [Toolbar API](https://mui.com/x/api/data-grid/toolbar/)
+
+**Toolbar Props:**
+
+| Prop   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                         |
+| :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| render | `RenderProp<GridPanelWrapperProps<Theme> & Pick<GridEditBooleanCellProps<GridSkeletonCellProps<HTMLDivElement>, HTMLDivElement>, 'defaultChecked' \| 'defaultValue' \| 'suppressContentEditableWarning' \| 'suppressHydrationWarning' \| 'accessKey' \| 'autoCapitalize' \| 'autoFocus' \| 'className' \| 'contentEditable' \| 'contextMenu' \| 'dir' \| 'draggable' \| 'enterKeyHint' \| 'hidden' \| 'id' \| 'lang' \| 'nonce' \| 'slot' \| 'spellCheck' \| 'style' \| 'tabIndex' \| 'title' \| 'translate' \| 'radioGroup' \| 'role' \| 'about' \| 'content' \| 'datatype' \| 'inlist' \| 'prefix' \| 'property' \| 'rel' \| 'resource' \| 'rev' \| 'typeof' \| 'vocab' \| 'autoCorrect' \| 'autoSave' \| 'color' \| 'itemProp' \| 'itemScope' \| 'itemType' \| 'itemID' \| 'itemRef' \| 'results' \| 'security' \| 'unselectable' \| 'popover' \| 'popoverTargetAction' \| 'popoverTarget' \| 'inert' \| 'inputMode' \| 'is' \| 'exportparts' \| 'part' \| 'tw' \| 'aria-activedescendant' \| 'aria-atomic' \| 'aria-autocomplete' \| 'aria-braillelabel' \| 'aria-brailleroledescription' \| 'aria-busy' \| 'aria-checked' \| 'aria-colcount' \| 'aria-colindex' \| 'aria-colindextext' \| 'aria-colspan' \| 'aria-controls' \| 'aria-current' \| 'aria-describedby' \| 'aria-description' \| 'aria-details' \| 'aria-disabled' \| 'aria-dropeffect' \| 'aria-errormessage' \| 'aria-expanded' \| 'aria-flowto' \| 'aria-grabbed' \| 'aria-haspopup' \| 'aria-hidden' \| 'aria-invalid' \| 'aria-keyshortcuts' \| 'aria-label' \| 'aria-labelledby' \| 'aria-level' \| 'aria-live' \| 'aria-modal' \| 'aria-multiline' \| 'aria-multiselectable' \| 'aria-orientation' \| 'aria-owns' \| 'aria-placeholder' \| 'aria-posinset' \| 'aria-pressed' \| 'aria-readonly' \| 'aria-relevant' \| 'aria-required' \| 'aria-roledescription' \| 'aria-rowcount' \| 'aria-rowindex' \| 'aria-rowindextext' \| 'aria-rowspan' \| 'aria-selected' \| 'aria-setsize' \| 'aria-sort' \| 'aria-valuemax' \| 'aria-valuemin' \| 'aria-valuenow' \| 'aria-valuetext' \| 'children' \| 'dangerouslySetInnerHTML' \| 'onCopy' \| 'onCopyCapture' \| 'onCut' \| 'onCutCapture' \| 'onPaste' \| 'onPasteCapture' \| 'onCompositionEnd' \| 'onCompositionEndCapture' \| 'onCompositionStart' \| 'onCompositionStartCapture' \| 'onCompositionUpdate' \| 'onCompositionUpdateCapture' \| 'onFocus' \| 'onFocusCapture' \| 'onBlur' \| 'onBlurCapture' \| 'onChange' \| 'onChangeCapture' \| 'onBeforeInput' \| 'onBeforeInputCapture' \| 'onInput' \| 'onInputCapture' \| 'onReset' \| 'onResetCapture' \| 'onSubmit' \| 'onSubmitCapture' \| 'onInvalid' \| 'onInvalidCapture' \| 'onLoad' \| 'onLoadCapture' \| 'onError' \| 'onErrorCapture' \| 'onKeyDown' \| 'onKeyDownCapture' \| 'onKeyPress' \| 'onKeyPressCapture' \| 'onKeyUp' \| 'onKeyUpCapture' \| 'onAbort' \| 'onAbortCapture' \| 'onCanPlay' \| 'onCanPlayCapture' \| 'onCanPlayThrough' \| 'onCanPlayThroughCapture' \| 'onDurationChange' \| 'onDurationChangeCapture' \| 'onEmptied' \| 'onEmptiedCapture' \| 'onEncrypted' \| 'onEncryptedCapture' \| 'onEnded' \| 'onEndedCapture' \| 'onLoadedData' \| 'onLoadedDataCapture' \| 'onLoadedMetadata' \| 'onLoadedMetadataCapture' \| 'onLoadStart' \| 'onLoadStartCapture' \| 'onPause' \| 'onPauseCapture' \| 'onPlay' \| 'onPlayCapture' \| 'onPlaying' \| 'onPlayingCapture' \| 'onProgress' \| 'onProgressCapture' \| 'onRateChange' \| 'onRateChangeCapture' \| 'onSeeked' \| 'onSeekedCapture' \| 'onSeeking' \| 'onSeekingCapture' \| 'onStalled' \| 'onStalledCapture' \| 'onSuspend' \| 'onSuspendCapture' \| 'onTimeUpdate' \| 'onTimeUpdateCapture' \| 'onVolumeChange' \| 'onVolumeChangeCapture' \| 'onWaiting' \| 'onWaitingCapture' \| 'onAuxClick' \| 'onAuxClickCapture' \| 'onClick' \| 'onClickCapture' \| 'onContextMenu' \| 'onContextMenuCapture' \| 'onDoubleClick' \| 'onDoubleClickCapture' \| 'onDrag' \| 'onDragCapture' \| 'onDragEnd' \| 'onDragEndCapture' \| 'onDragEnter' \| 'onDragEnterCapture' \| 'onDragExit' \| 'onDragExitCapture' \| 'onDragLeave' \| 'onDragLeaveCapture' \| 'onDragOver' \| 'onDragOverCapture' \| 'onDragStart' \| 'onDragStartCapture' \| 'onDrop' \| 'onDropCapture' \| 'onMouseDown' \| 'onMouseDownCapture' \| 'onMouseEnter' \| 'onMouseLeave' \| 'onMouseMove' \| 'onMouseMoveCapture' \| 'onMouseOut' \| 'onMouseOutCapture' \| 'onMouseOver' \| 'onMouseOverCapture' \| 'onMouseUp' \| 'onMouseUpCapture' \| 'onSelect' \| 'onSelectCapture' \| 'onTouchCancel' \| 'onTouchCancelCapture' \| 'onTouchEnd' \| 'onTouchEndCapture' \| 'onTouchMove' \| 'onTouchMoveCapture' \| 'onTouchStart' \| 'onTouchStartCapture' \| 'onPointerDown' \| 'onPointerDownCapture' \| 'onPointerMove' \| 'onPointerMoveCapture' \| 'onPointerUp' \| 'onPointerUpCapture' \| 'onPointerCancel' \| 'onPointerCancelCapture' \| 'onPointerEnter' \| 'onPointerLeave' \| 'onPointerOver' \| 'onPointerOverCapture' \| 'onPointerOut' \| 'onPointerOutCapture' \| 'onGotPointerCapture' \| 'onGotPointerCaptureCapture' \| 'onLostPointerCapture' \| 'onLostPointerCaptureCapture' \| 'onScroll' \| 'onScrollCapture' \| 'onScrollEnd' \| 'onScrollEndCapture' \| 'onWheel' \| 'onWheelCapture' \| 'onAnimationStart' \| 'onAnimationStartCapture' \| 'onAnimationEnd' \| 'onAnimationEndCapture' \| 'onAnimationIteration' \| 'onAnimationIterationCapture' \| 'onToggle' \| 'onBeforeToggle' \| 'onTransitionCancel' \| 'onTransitionCancelCapture' \| 'onTransitionEnd' \| 'onTransitionEndCapture' \| 'onTransitionRun' \| 'onTransitionRunCapture' \| 'onTransitionStart' \| 'onTransitionStartCapture' \| 'ref' \| 'key'>>` | -       | A function to customize rendering of the component. |
+
+### ToolbarButton
+
+A button for performing actions from the toolbar.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+
+API:
+
+- [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
+
+**ToolbarButton Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                            | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| render         | `RenderProp<{ ref?: Ref<HTMLButtonElement>; className?: string; id?: string; style?: React.CSSProperties; tabIndex?: number; title?: string; role?: string; children?: React.ReactNode; disabled?: boolean; size?: 'small' \| 'medium' \| 'large'; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }>` | -       | A function to customize rendering of the component. |
+
+## Additional Types
+
+### ColumnHeaderFilterIconButtonProps
+
+```typescript
+type ColumnHeaderFilterIconButtonProps = {
+  field: string;
+  counter?: number;
+  onClick?: (
+    params: GridColumnHeaderParams<GridValidRowModel, any, any>,
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+};
+```
+
+### ColumnsPanelState
+
+```typescript
+type ColumnsPanelState = {
+  /** If `true`, the columns panel is open. */
+  open: boolean;
+};
+```
+
+### ColumnsPanelTriggerProps
+
+```typescript
+type ColumnsPanelTriggerProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    ColumnsPanelState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: ColumnsPanelState) => string);
+};
+```
+
+### ExportCsvProps
+
+```typescript
+type ExportCsvProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+} & BaseButtonPropsOverrides & {
+    render?: RenderProp<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    options?: GridCsvExportOptions;
+  };
+```
+
+### ExportPrintProps
+
+```typescript
+type ExportPrintProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+} & BaseButtonPropsOverrides & {
+    render?: RenderProp<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    options?: GridPrintExportOptions;
+  };
+```
+
+### FilterColumnsArgs
+
+```typescript
+type FilterColumnsArgs = {
+  field: string;
+  columns: GridStateColDef[];
+  currentFilters: GridFilterItem[];
+};
+```
+
+### FilterPanelState
+
+```typescript
+type FilterPanelState = {
+  /** If `true`, the filter panel is open. */
+  open: boolean;
+  /** The number of active filters. */
+  filterCount: number;
+};
+```
+
+### FilterPanelTriggerProps
+
+```typescript
+type FilterPanelTriggerProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    FilterPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: FilterPanelState) => string);
+};
+```
+
+### GetColumnForNewFilterArgs
+
+```typescript
+type GetColumnForNewFilterArgs = { currentFilters: GridFilterItem[]; columns: GridStateColDef[] };
+```
+
+### GridActionsCellItemProps
+
+```typescript
+type GridActionsCellItemProps = (
+  | {
+      showInMenu?: false;
+      label: string;
+      ref?: Ref<HTMLButtonElement>;
+      id?: string;
+      tabIndex?: number;
+      title?: string;
+      role?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      size?: 'small' | 'medium' | 'large';
+      touchRippleRef?: any;
+      label?: string;
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    }
+  | {
+      showInMenu: true;
+      closeMenuOnClick?: boolean;
+      closeMenu?: () => void;
+      label: React.ReactNode;
+      autoFocus?: boolean;
+      inert?: boolean;
+      material?: Partial<MenuItemProps>;
+      iconStart?: React.ReactNode;
+      iconEnd?: React.ReactNode;
+      selected?: boolean;
+      value?: number | string | string[];
+    }
+) & {
+  icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
+  /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+  component?: React.ElementType;
+  icon: ReactElement;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  disabled?: boolean;
+};
+```
+
+### GridApiContext
+
+```typescript
+type GridApiContext = React.Context<unknown>;
+```
+
+### GridCellProps
+
+```typescript
+type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
+  align: GridAlignment;
+  className?: string;
+  colIndex: number;
+  column: GridStateColDef;
+  row: GridRowModel;
+  rowId: GridRowId;
+  rowNode: GridTreeNode;
+  width: number;
+  colSpan?: number;
+  disableDragEvents?: boolean;
+  isNotVisible: boolean;
+  pinnedOffset?: number;
+  pinnedPosition: unknown;
+  showRightBorder: boolean;
+  showLeftBorder: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+};
+```
+
+### GridColumnHeaderMenuProps
+
+```typescript
+type GridColumnHeaderMenuProps = {
+  columnMenuId?: string;
+  columnMenuButtonId?: string;
+  ContentComponent: React.JSXElementConstructor<any>;
+  contentComponentProps?: any;
+  field: string;
+  open: boolean;
+  target: HTMLElement | null;
+  onExited?: (node: HTMLElement | null) => void;
+};
+```
+
+### GridColumnHeaderSeparatorProps
+
+```typescript
+type GridColumnHeaderSeparatorProps = {
+  resizable: boolean;
+  resizing: boolean;
+  height: number;
+  side?: unknown;
+};
+```
+
+### GridColumnHeaderSeparatorSides
+
+| Member | Value   | Description |
+| :----- | :------ | :---------- |
+| Left   | `left`  | -           |
+| Right  | `right` | -           |
+
+### GridColumnHeaderSortIconProps
+
+```typescript
+type GridColumnHeaderSortIconProps = {
+  ref?: Ref<HTMLButtonElement>;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  onClick?:
+    | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
+    | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void);
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  field: string;
+  direction: GridSortDirection;
+  index?: number;
+  sortingOrder: GridSortDirection[];
+};
+```
+
+### GridColumnHeaderTitleProps
+
+```typescript
+type GridColumnHeaderTitleProps = {
+  label: string;
+  columnWidth: number;
+  description?: React.ReactNode;
+};
+```
+
+### GridColumnMenuContainerProps
+
+```typescript
+type GridColumnMenuContainerProps = {
+  hideMenu: (event: React.SyntheticEvent) => void;
+  colDef: GridColDef;
+  open: boolean;
+  id?: string;
+  labelledby?: string;
+};
+```
+
+### GridColumnMenuItemProps
+
+```typescript
+type GridColumnMenuItemProps = {
+  [key: string]: any;
+  colDef: GridColDef;
+  onClick: (event: React.MouseEvent<any, MouseEvent>) => void;
+};
+```
+
+### GridColumnMenuProps
+
+```typescript
+type GridColumnMenuProps = {
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots?: { [key: string]: React.JSXElementConstructor<any> | null };
+  id?: string;
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps?: { [key: string]: GridColumnMenuSlotProps };
+  colDef: GridColDef;
+  open: boolean;
+  hideMenu: (event: React.SyntheticEvent) => void;
+  labelledby?: string;
+};
+```
+
+### GridColumnsManagementProps
+
+```typescript
+type GridColumnsManagementProps = {
+  sort?: 'asc' | 'desc';
+  searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+  searchInputProps?: Partial<TextFieldProps>;
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs?: number;
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField?: boolean;
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle?: boolean;
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton?: boolean;
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode?: 'all' | 'filteredOnly';
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @returns The list of togglable columns' field names.
+   */
+  getTogglableColumns?: (columns: GridColDef[]) => string[];
+};
+```
+
+### GridColumnsPanelProps
+
+```typescript
+type GridColumnsPanelProps = {};
+```
+
+### GridColumnUnsortedIconProps
+
+```typescript
+type GridColumnUnsortedIconProps = {
+  sortingOrder: GridSortDirection[];
+  className?: string;
+  style?: React.CSSProperties;
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
+  color?: string;
+  titleAccess?: string;
+};
+```
+
+### GridCsvExportMenuItemProps
+
+```typescript
+type GridCsvExportMenuItemProps = {
+  hideMenu?: () => void;
+  options?: {
+    delimiter?: string;
+    fileName?: string;
+    utf8WithBom?: boolean;
+    includeHeaders?: boolean;
+    includeColumnGroupsHeaders?: boolean;
+    getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    shouldAppendQuotes?: boolean;
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+};
+```
+
+### GridEditBooleanCellProps
+
+```typescript
+type GridEditBooleanCellProps = {
+  [prop: string]: any;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLInputElement, Element>,
+    newValue: boolean,
+  ) => void | Promise<void>;
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditDateCellProps
+
+```typescript
+type GridEditDateCellProps = {
+  [prop: string]: any;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLInputElement, Element>,
+    newValue: Date | null,
+  ) => void | Promise<void>;
+  slotProps?: {
+    root?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: React.Ref<HTMLElement>;
+        inputRef?: React.Ref<HTMLInputElement>;
+        fullWidth?: boolean;
+        type?: React.HTMLInputTypeAttribute;
+        value?: string;
+        onChange: React.ChangeEventHandler;
+        disabled?: boolean;
+        endAdornment?: React.ReactNode;
+        startAdornment?: React.ReactNode;
+        slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> };
+      } & BaseInputPropsOverrides
+    >;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditInputCellProps
+
+```typescript
+type GridEditInputCellProps = {
+  [prop: string]: any;
+  debounceMs?: number;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLInputElement, Element>,
+    newValue: string,
+  ) => void | Promise<void>;
+  slotProps?: {
+    root?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: React.Ref<HTMLElement>;
+        inputRef?: React.Ref<HTMLInputElement>;
+        fullWidth?: boolean;
+        type?: React.HTMLInputTypeAttribute;
+        value?: string;
+        onChange: React.ChangeEventHandler;
+        disabled?: boolean;
+        endAdornment?: React.ReactNode;
+        startAdornment?: React.ReactNode;
+        slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> };
+      } & BaseInputPropsOverrides
+    >;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditLongTextCellProps
+
+```typescript
+type GridEditLongTextCellProps = {
+  [prop: string]: any;
+  debounceMs?: number;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLTextAreaElement, Element>,
+    newValue: string,
+  ) => void | Promise<void>;
+  /** Props passed to internal components. */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement>;
+    value?: React.HTMLAttributes<HTMLDivElement>;
+    popper?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        role?: string;
+        ref?: Ref<HTMLDivElement>;
+        open: boolean;
+        children?: React.ReactNode;
+        clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+        clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+        flip?: boolean;
+        focusTrap?: boolean;
+        onExited?: (node: HTMLElement | null) => void;
+        onClickAway?: (event: MouseEvent | TouchEvent) => void;
+        onDidShow?: () => void;
+        onDidHide?: () => void;
+        id?: string;
+        target?: Element | null;
+        transition?: boolean;
+        placement?: Placement;
+      } & BasePopperPropsOverrides
+    >;
+    popperContent?: React.HTMLAttributes<HTMLDivElement>;
+    textarea?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+        inputRef?: React.Ref<HTMLTextAreaElement>;
+        fullWidth?: boolean;
+        value?: string;
+        onChange: React.ChangeEventHandler<HTMLTextAreaElement, Element>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+        disabled?: boolean;
+        autoFocus?: boolean;
+        minRows?: number;
+        maxRows?: number;
+      } & BaseTextareaPropsOverrides
+    >;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: string | null;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: string | null;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditSingleSelectCellProps
+
+```typescript
+type GridEditSingleSelectCellProps = {
+  [prop: string]: any;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: React.SyntheticEvent, newValue: any) => void | Promise<void>;
+  /** If true, the select opens by default. */
+  initialOpen?: boolean;
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridExportDisplayOptions
+
+```typescript
+type GridExportDisplayOptions = {
+  /**
+   * If `true`, this export option will be removed from the GridToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+};
+```
+
+### GridExportMenuItemProps
+
+```typescript
+type GridExportMenuItemProps<Options extends {}> = {
+  hideMenu?: () => void;
+  options?: Options & GridExportDisplayOptions;
+};
+```
+
+### GridFilterFormProps
+
+```typescript
+type GridFilterFormProps = {
+  /** The [[GridFilterItem]] representing this form. */
+  item: GridFilterItem;
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
+  hasMultipleFilters: boolean;
+  /** If `true`, the logic operator field is visible. */
+  showMultiFilterOperators?: boolean;
+  /** If `true`, disables the logic operator field but still renders it. */
+  disableMultiFilterOperator?: boolean;
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
+  focusElementRef?: React.Ref<any>;
+  /** Callback called when the operator, column field or value is changed. */
+  applyFilterChanges: (item: GridFilterItem) => void;
+  /** Callback called when the logic operator is changed. */
+  applyMultiFilterOperatorChanges: (operator: unknown) => void;
+  /** Callback called when the delete button is clicked. */
+  deleteFilter: (item: GridFilterItem) => void;
+  /**
+   * Allows to filter the columns displayed in the filter form.
+   * @returns The filtered fields array.
+   */
+  filterColumns?: (args: FilterColumnsArgs) => string[];
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators?: unknown[];
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort?: 'asc' | 'desc';
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
+  deleteIconProps?: any;
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
+  logicOperatorInputProps?: any;
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
+  operatorInputProps?: any;
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
+  columnInputProps?: any;
+  /**
+   * `true` if the filter is disabled/read only.
+   * i.e. `colDef.fiterable = false` but passed in `filterModel`
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
+  valueInputProps?: any;
+  /** @ignore - do not document. */
+  children?: React.ReactNode;
+};
+```
+
+### GridFilterInputBooleanProps
+
+```typescript
+type GridFilterInputBooleanProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+};
+```
+
+### GridFilterInputDateProps
+
+```typescript
+type GridFilterInputDateProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+  type?: 'date' | 'datetime-local';
+};
+```
+
+### GridFilterInputMultipleSingleSelectProps
+
+```typescript
+type GridFilterInputMultipleSingleSelectProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'> };
+  type?: 'singleSelect';
+};
+```
+
+### GridFilterInputMultipleValueProps
+
+```typescript
+type GridFilterInputMultipleValueProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: Omit<AutocompleteProps<string, true, false, true>, 'options'> };
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+```
+
+### GridFilterInputSingleSelectProps
+
+```typescript
+type GridFilterInputSingleSelectProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+  type?: 'singleSelect';
+};
+```
+
+### GridFooterContainerProps
+
+```typescript
+type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
+```
+
+### GridGenericColumnMenuProps
+
+```typescript
+type GridGenericColumnMenuProps = {
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: { [key: string]: React.JSXElementConstructor<any> };
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: { [key: string]: GridColumnMenuSlotProps };
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots?: { [key: string]: React.JSXElementConstructor<any> | null };
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps?: { [key: string]: GridColumnMenuSlotProps };
+  hideMenu: (event: React.SyntheticEvent) => void;
+  colDef: GridColDef;
+  open: boolean;
+  id?: string;
+  labelledby?: string;
+};
+```
+
+### GridLoadingOverlayProps
+
+```typescript
+type GridLoadingOverlayProps = {
+  /**
+   * The variant of the overlay.
+   * @default 'linear-progress'
+   */
+  variant?: GridLoadingOverlayVariant;
+  /**
+   * The variant of the overlay when no rows are displayed.
+   * @default 'skeleton'
+   */
+  noRowsVariant?: GridLoadingOverlayVariant;
+  sx?: SxProps<Theme>;
+};
+```
+
+### GridLongTextCellProps
+
+```typescript
+type GridLongTextCellProps = {
+  /**
+   * A function to customize the content rendered in the popup.
+   * @returns The content to render in the popup.
+   */
+  renderContent?: (value: string | null) => React.ReactNode;
+  /** Props passed to internal components. */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement>;
+    content?: React.HTMLAttributes<HTMLDivElement>;
+    expandButton?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    collapseButton?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    popper?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        role?: string;
+        ref?: Ref<HTMLDivElement>;
+        open: boolean;
+        children?: React.ReactNode;
+        clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+        clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+        flip?: boolean;
+        focusTrap?: boolean;
+        onExited?: (node: HTMLElement | null) => void;
+        onClickAway?: (event: MouseEvent | TouchEvent) => void;
+        onDidShow?: () => void;
+        onDidHide?: () => void;
+        id?: string;
+        target?: Element | null;
+        transition?: boolean;
+        placement?: Placement;
+      } & BasePopperPropsOverrides
+    >;
+    popperContent?: React.HTMLAttributes<HTMLDivElement>;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: string | null;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: string | null;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+};
+```
+
+### GridMenuProps
+
+```typescript
+type GridMenuProps = {
+  open: boolean;
+  target: HTMLElement | null;
+  onClose: (event?: React.KeyboardEvent | MouseEvent | TouchEvent) => void;
+  position?: MenuPosition;
+  children: React.ReactNode;
+  className?: string;
+  onExited?: (node: HTMLElement | null) => void;
+};
+```
+
+### GridOverlayProps
+
+```typescript
+type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
+```
+
+### gridPanelClasses
+
+```typescript
+type gridPanelClasses = Record<'panel' | 'paper', string>;
+```
+
+### GridPanelClasses
+
+```typescript
+type GridPanelClasses = {
+  /** Styles applied to the root element. */
+  panel: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+};
+```
+
+### GridPanelProps
+
+```typescript
+type GridPanelProps = {
+  ref?: React.Ref<HTMLDivElement>;
+  children?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<GridPanelClasses>;
+  open: boolean;
+  onClose?: () => void;
+  className?: string;
+  id?: string;
+  flip?: boolean;
+  target?: Element | null;
+};
+```
+
+### GridPanelWrapperProps
+
+```typescript
+type GridPanelWrapperProps = {};
+```
+
+### GridPrintExportMenuItemProps
+
+```typescript
+type GridPrintExportMenuItemProps = {
+  hideMenu?: () => void;
+  options?: {
+    fileName?: string;
+    hideToolbar?: boolean;
+    hideFooter?: boolean;
+    includeCheckboxes?: boolean;
+    copyStyles?: boolean;
+    bodyClassName?: string;
+    pageStyle?: string | (() => string);
+    getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+};
+```
+
+### GridRootProps
+
+```typescript
+type GridRootProps = {
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  sidePanel?: React.ReactNode;
+};
+```
+
+### GridRowCountProps
+
+```typescript
+type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> &
+  RowCountProps & { sx?: SxProps<Theme> };
+```
+
+### GridRowProps
+
+```typescript
+type GridRowProps = {
+  row: GridRowModel;
+  rowId: GridRowId;
+  selected: boolean;
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  index: number;
+  rowHeight: number | 'auto';
+  offsetLeft: number;
+  columnsTotalWidth: number;
+  firstColumnIndex: number;
+  lastColumnIndex: number;
+  visibleColumns: GridStateColDef[];
+  pinnedColumns: GridPinnedColumns;
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedColumnIndex: number | undefined;
+  isFirstVisible: boolean;
+  isLastVisible: boolean;
+  isNotVisible: boolean;
+  showBottomBorder: boolean;
+  scrollbarWidth: number;
+  gridHasFiller: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+};
+```
+
+### GridShadowScrollAreaProps
+
+```typescript
+type GridShadowScrollAreaProps = { children: React.ReactNode };
+```
+
+### GridSkeletonCellProps
+
+```typescript
+type GridSkeletonCellProps = {
+  type?: GridColType;
+  width?: number | string;
+  height?: number | 'auto';
+  field?: string;
+  align?: string;
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty?: boolean;
+};
+```
+
+### GridToolbarContainerProps
+
+```typescript
+type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
+```
+
+### GridToolbarExportProps
+
+```typescript
+type GridToolbarExportProps = {
+  csvOptions?: {
+    delimiter?: string;
+    fileName?: string;
+    utf8WithBom?: boolean;
+    includeHeaders?: boolean;
+    includeColumnGroupsHeaders?: boolean;
+    getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    shouldAppendQuotes?: boolean;
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  printOptions?: {
+    fileName?: string;
+    hideToolbar?: boolean;
+    hideFooter?: boolean;
+    includeCheckboxes?: boolean;
+    copyStyles?: boolean;
+    bodyClassName?: string;
+    pageStyle?: string | (() => string);
+    getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    tooltip?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        children: ReactElement;
+        enterDelay?: number;
+        title: React.ReactNode;
+        disableInteractive?: boolean;
+      } & BaseTooltipPropsOverrides
+    >;
+  };
+};
+```
+
+### GridToolbarFilterButtonProps
+
+```typescript
+type GridToolbarFilterButtonProps = {
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    tooltip?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        children: ReactElement;
+        enterDelay?: number;
+        title: React.ReactNode;
+        disableInteractive?: boolean;
+      } & BaseTooltipPropsOverrides
+    >;
+    badge?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        badgeContent?: React.ReactNode;
+        children?: React.ReactNode;
+        color?: 'primary' | 'default' | 'error';
+        invisible?: boolean;
+        overlap?: 'circular';
+        variant?: 'dot';
+        style?: React.CSSProperties;
+      } & BaseBadgePropsOverrides
+    >;
+  };
+};
+```
+
+### GridToolbarProps
+
+```typescript
+type GridToolbarProps = {
+  /**
+   * Show the history controls (undo/redo buttons).
+   * @default true
+   */
+  showHistoryControls?: boolean;
+  /**
+   * Show the quick filter component.
+   * @default true
+   */
+  showQuickFilter?: boolean;
+  /** Props passed to the quick filter component. */
+  quickFilterProps?: GridToolbarQuickFilterProps;
+  sx?: SxProps<Theme>;
+  csvOptions?: {
+    delimiter?: string;
+    fileName?: string;
+    utf8WithBom?: boolean;
+    includeHeaders?: boolean;
+    includeColumnGroupsHeaders?: boolean;
+    getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    shouldAppendQuotes?: boolean;
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  printOptions?: {
+    fileName?: string;
+    hideToolbar?: boolean;
+    hideFooter?: boolean;
+    includeCheckboxes?: boolean;
+    copyStyles?: boolean;
+    bodyClassName?: string;
+    pageStyle?: string | (() => string);
+    getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    tooltip?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        children: ReactElement;
+        enterDelay?: number;
+        title: React.ReactNode;
+        disableInteractive?: boolean;
+      } & BaseTooltipPropsOverrides
+    >;
+  };
+};
+```
+
+### GridToolbarQuickFilterProps
+
+```typescript
+type GridToolbarQuickFilterProps = {
+  className?: string;
+  /**
+ * Function responsible for parsing text input in an array of independent values for quick filtering.
+ * @default (searchText: string) => searchText
+.split(' ')
+.filter((word) => word !== '')
+ * @returns The array of value on which quick filter is applied
+ */
+  quickFilterParser?: (input: string) => any[];
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @default (values: string[]) => values.join(' ')
+   * @returns The string to display in the text field
+   */
+  quickFilterFormatter?: (values: any[]) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+  slotProps?: { root: TextFieldProps };
+};
+```
+
+### GridTypeFilterInputValueProps
+
+```typescript
+type GridTypeFilterInputValueProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+```
+
+### QuickFilterClearProps
+
+```typescript
+type QuickFilterClearProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  children?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  label?: string;
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    {
+      ref?: Ref<HTMLButtonElement>;
+      className?: string;
+      id?: string;
+      style?: React.CSSProperties;
+      tabIndex?: number;
+      title?: string;
+      role?: string;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      size?: 'small' | 'medium' | 'large';
+      touchRippleRef?: any;
+      label?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    },
+    QuickFilterState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+};
+```
+
+### QuickFilterControlProps
+
+```typescript
+type QuickFilterControlProps = {
+  ref?: Ref<HTMLInputElement>;
+  autoFocus?: boolean;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  role?: string;
+  color?: 'primary' | 'error';
+  onChange?:
+    | ((event: React.ChangeEvent<HTMLElement, Element>) => void)
+    | ((event: React.ChangeEvent) => void);
+  disabled?: boolean;
+  size?: 'small' | 'medium';
+  label?: React.ReactNode;
+  material?: Partial<TextFieldProps>;
+  value?: string;
+  type?: React.HTMLInputTypeAttribute;
+  autoComplete?: string;
+  error?: boolean;
+  fullWidth?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+  multiline?: boolean;
+  placeholder?: string;
+  slotProps?: {
+    input?: Omit<Partial<InputProps>, 'slotProps'>;
+    inputLabel?: {};
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  helperText?: string | null;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      role?: string;
+      autoComplete?: string;
+      color?: 'primary' | 'error';
+      disabled?: boolean;
+      error?: boolean;
+      fullWidth?: boolean;
+      helperText?: string | null;
+      id?: string;
+      inputRef?: React.Ref<HTMLInputElement>;
+      label?: React.ReactNode;
+      onChange?: React.ChangeEventHandler;
+      placeholder?: string;
+      size?: 'small' | 'medium';
+      slotProps?: {
+        input?: Omit<Partial<InputProps>, 'slotProps'>;
+        inputLabel?: {};
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+      };
+      tabIndex?: number;
+      type?: React.HTMLInputTypeAttribute;
+      value?: string;
+      ref?: Ref<HTMLInputElement>;
+      multiline?: boolean;
+      autoFocus?: boolean;
+    } & BaseTextFieldPropsOverrides,
+    QuickFilterState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+};
+```
+
+### QuickFilterProps
+
+```typescript
+type QuickFilterProps = {
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
+   * @returns The array of value on which quick filter is applied
+   */
+  parser?: (input: string) => any[];
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @default (values: string[]) => values.join(' ')
+   * @returns The string to display in the text field
+   */
+  formatter?: (values: any[]) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /** The expanded state of the quick filter control. */
+  expanded?: boolean;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+  /** Callback function that is called when the quick filter input is expanded or collapsed. */
+  onExpandedChange?: (expanded: boolean) => void;
+};
+```
+
+### QuickFilterTriggerProps
+
+```typescript
+type QuickFilterTriggerProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    QuickFilterState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+};
+```
+
+### renderBooleanCell
+
+```typescript
+type renderBooleanCell = (
+  params: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>,
+) => React.ReactNode;
+```
+
+### ToolbarButtonProps
+
+```typescript
+type ToolbarButtonProps = {
+  ref?: Ref<HTMLButtonElement>;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<{
+    ref?: Ref<HTMLButtonElement>;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    role?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    touchRippleRef?: any;
+    label?: string;
+    color?: 'default' | 'inherit' | 'primary';
+    edge?: 'start' | 'end' | false;
+    material?: Partial<IconButtonProps>;
+  }>;
+};
+```
+
+### ToolbarProps
+
+```typescript
+type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
+  render?: RenderProp<
+    MUIStyledCommonProps<Theme> &
+      Pick<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+        | 'defaultChecked'
+        | 'defaultValue'
+        | 'suppressContentEditableWarning'
+        | 'suppressHydrationWarning'
+        | 'accessKey'
+        | 'autoCapitalize'
+        | 'autoFocus'
+        | 'className'
+        | 'contentEditable'
+        | 'contextMenu'
+        | 'dir'
+        | 'draggable'
+        | 'enterKeyHint'
+        | 'hidden'
+        | 'id'
+        | 'lang'
+        | 'nonce'
+        | 'slot'
+        | 'spellCheck'
+        | 'style'
+        | 'tabIndex'
+        | 'title'
+        | 'translate'
+        | 'radioGroup'
+        | 'role'
+        | 'about'
+        | 'content'
+        | 'datatype'
+        | 'inlist'
+        | 'prefix'
+        | 'property'
+        | 'rel'
+        | 'resource'
+        | 'rev'
+        | 'typeof'
+        | 'vocab'
+        | 'autoCorrect'
+        | 'autoSave'
+        | 'color'
+        | 'itemProp'
+        | 'itemScope'
+        | 'itemType'
+        | 'itemID'
+        | 'itemRef'
+        | 'results'
+        | 'security'
+        | 'unselectable'
+        | 'popover'
+        | 'popoverTargetAction'
+        | 'popoverTarget'
+        | 'inert'
+        | 'inputMode'
+        | 'is'
+        | 'exportparts'
+        | 'part'
+        | 'tw'
+        | 'aria-activedescendant'
+        | 'aria-atomic'
+        | 'aria-autocomplete'
+        | 'aria-braillelabel'
+        | 'aria-brailleroledescription'
+        | 'aria-busy'
+        | 'aria-checked'
+        | 'aria-colcount'
+        | 'aria-colindex'
+        | 'aria-colindextext'
+        | 'aria-colspan'
+        | 'aria-controls'
+        | 'aria-current'
+        | 'aria-describedby'
+        | 'aria-description'
+        | 'aria-details'
+        | 'aria-disabled'
+        | 'aria-dropeffect'
+        | 'aria-errormessage'
+        | 'aria-expanded'
+        | 'aria-flowto'
+        | 'aria-grabbed'
+        | 'aria-haspopup'
+        | 'aria-hidden'
+        | 'aria-invalid'
+        | 'aria-keyshortcuts'
+        | 'aria-label'
+        | 'aria-labelledby'
+        | 'aria-level'
+        | 'aria-live'
+        | 'aria-modal'
+        | 'aria-multiline'
+        | 'aria-multiselectable'
+        | 'aria-orientation'
+        | 'aria-owns'
+        | 'aria-placeholder'
+        | 'aria-posinset'
+        | 'aria-pressed'
+        | 'aria-readonly'
+        | 'aria-relevant'
+        | 'aria-required'
+        | 'aria-roledescription'
+        | 'aria-rowcount'
+        | 'aria-rowindex'
+        | 'aria-rowindextext'
+        | 'aria-rowspan'
+        | 'aria-selected'
+        | 'aria-setsize'
+        | 'aria-sort'
+        | 'aria-valuemax'
+        | 'aria-valuemin'
+        | 'aria-valuenow'
+        | 'aria-valuetext'
+        | 'children'
+        | 'dangerouslySetInnerHTML'
+        | 'onCopy'
+        | 'onCopyCapture'
+        | 'onCut'
+        | 'onCutCapture'
+        | 'onPaste'
+        | 'onPasteCapture'
+        | 'onCompositionEnd'
+        | 'onCompositionEndCapture'
+        | 'onCompositionStart'
+        | 'onCompositionStartCapture'
+        | 'onCompositionUpdate'
+        | 'onCompositionUpdateCapture'
+        | 'onFocus'
+        | 'onFocusCapture'
+        | 'onBlur'
+        | 'onBlurCapture'
+        | 'onChange'
+        | 'onChangeCapture'
+        | 'onBeforeInput'
+        | 'onBeforeInputCapture'
+        | 'onInput'
+        | 'onInputCapture'
+        | 'onReset'
+        | 'onResetCapture'
+        | 'onSubmit'
+        | 'onSubmitCapture'
+        | 'onInvalid'
+        | 'onInvalidCapture'
+        | 'onLoad'
+        | 'onLoadCapture'
+        | 'onError'
+        | 'onErrorCapture'
+        | 'onKeyDown'
+        | 'onKeyDownCapture'
+        | 'onKeyPress'
+        | 'onKeyPressCapture'
+        | 'onKeyUp'
+        | 'onKeyUpCapture'
+        | 'onAbort'
+        | 'onAbortCapture'
+        | 'onCanPlay'
+        | 'onCanPlayCapture'
+        | 'onCanPlayThrough'
+        | 'onCanPlayThroughCapture'
+        | 'onDurationChange'
+        | 'onDurationChangeCapture'
+        | 'onEmptied'
+        | 'onEmptiedCapture'
+        | 'onEncrypted'
+        | 'onEncryptedCapture'
+        | 'onEnded'
+        | 'onEndedCapture'
+        | 'onLoadedData'
+        | 'onLoadedDataCapture'
+        | 'onLoadedMetadata'
+        | 'onLoadedMetadataCapture'
+        | 'onLoadStart'
+        | 'onLoadStartCapture'
+        | 'onPause'
+        | 'onPauseCapture'
+        | 'onPlay'
+        | 'onPlayCapture'
+        | 'onPlaying'
+        | 'onPlayingCapture'
+        | 'onProgress'
+        | 'onProgressCapture'
+        | 'onRateChange'
+        | 'onRateChangeCapture'
+        | 'onSeeked'
+        | 'onSeekedCapture'
+        | 'onSeeking'
+        | 'onSeekingCapture'
+        | 'onStalled'
+        | 'onStalledCapture'
+        | 'onSuspend'
+        | 'onSuspendCapture'
+        | 'onTimeUpdate'
+        | 'onTimeUpdateCapture'
+        | 'onVolumeChange'
+        | 'onVolumeChangeCapture'
+        | 'onWaiting'
+        | 'onWaitingCapture'
+        | 'onAuxClick'
+        | 'onAuxClickCapture'
+        | 'onClick'
+        | 'onClickCapture'
+        | 'onContextMenu'
+        | 'onContextMenuCapture'
+        | 'onDoubleClick'
+        | 'onDoubleClickCapture'
+        | 'onDrag'
+        | 'onDragCapture'
+        | 'onDragEnd'
+        | 'onDragEndCapture'
+        | 'onDragEnter'
+        | 'onDragEnterCapture'
+        | 'onDragExit'
+        | 'onDragExitCapture'
+        | 'onDragLeave'
+        | 'onDragLeaveCapture'
+        | 'onDragOver'
+        | 'onDragOverCapture'
+        | 'onDragStart'
+        | 'onDragStartCapture'
+        | 'onDrop'
+        | 'onDropCapture'
+        | 'onMouseDown'
+        | 'onMouseDownCapture'
+        | 'onMouseEnter'
+        | 'onMouseLeave'
+        | 'onMouseMove'
+        | 'onMouseMoveCapture'
+        | 'onMouseOut'
+        | 'onMouseOutCapture'
+        | 'onMouseOver'
+        | 'onMouseOverCapture'
+        | 'onMouseUp'
+        | 'onMouseUpCapture'
+        | 'onSelect'
+        | 'onSelectCapture'
+        | 'onTouchCancel'
+        | 'onTouchCancelCapture'
+        | 'onTouchEnd'
+        | 'onTouchEndCapture'
+        | 'onTouchMove'
+        | 'onTouchMoveCapture'
+        | 'onTouchStart'
+        | 'onTouchStartCapture'
+        | 'onPointerDown'
+        | 'onPointerDownCapture'
+        | 'onPointerMove'
+        | 'onPointerMoveCapture'
+        | 'onPointerUp'
+        | 'onPointerUpCapture'
+        | 'onPointerCancel'
+        | 'onPointerCancelCapture'
+        | 'onPointerEnter'
+        | 'onPointerLeave'
+        | 'onPointerOver'
+        | 'onPointerOverCapture'
+        | 'onPointerOut'
+        | 'onPointerOutCapture'
+        | 'onGotPointerCapture'
+        | 'onGotPointerCaptureCapture'
+        | 'onLostPointerCapture'
+        | 'onLostPointerCaptureCapture'
+        | 'onScroll'
+        | 'onScrollCapture'
+        | 'onScrollEnd'
+        | 'onScrollEndCapture'
+        | 'onWheel'
+        | 'onWheelCapture'
+        | 'onAnimationStart'
+        | 'onAnimationStartCapture'
+        | 'onAnimationEnd'
+        | 'onAnimationEndCapture'
+        | 'onAnimationIteration'
+        | 'onAnimationIterationCapture'
+        | 'onToggle'
+        | 'onBeforeToggle'
+        | 'onTransitionCancel'
+        | 'onTransitionCancelCapture'
+        | 'onTransitionEnd'
+        | 'onTransitionEndCapture'
+        | 'onTransitionRun'
+        | 'onTransitionRunCapture'
+        | 'onTransitionStart'
+        | 'onTransitionStartCapture'
+        | 'ref'
+        | 'key'
+      >
+  >;
+};
+```
+
+## External Types
+
+### GridAlignment
+
+```typescript
+type GridAlignment = 'left' | 'right' | 'center';
+```
+
+### GridRowId
+
+```typescript
+type GridRowId = string | number;
+```
+
+### GridCellMode
+
+```typescript
+type GridCellMode = 'edit' | 'view';
+```
+
+### GridColType
+
+```typescript
+type GridColType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'dateTime'
+  | 'singleSelect'
+  | 'actions'
+  | 'custom'
+  | 'longText';
+```
+
+### GridLoadingOverlayVariant
+
+```typescript
+type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+```
diff --git a/docs/pages/x/api/data-grid/types.grid-filter-panel.ts b/docs/pages/x/api/data-grid/types.grid-filter-panel.ts
new file mode 100644
index 0000000000000..d9ba6ec7e4fb9
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-filter-panel.ts
@@ -0,0 +1,4 @@
+import { GridFilterPanel } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridFilterPanel = createTypes(import.meta.url, GridFilterPanel);
diff --git a/docs/pages/x/api/data-grid/types.grid-list-view-col-def.ts b/docs/pages/x/api/data-grid/types.grid-list-view-col-def.ts
new file mode 100644
index 0000000000000..6e51d72e2bb33
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-list-view-col-def.ts
@@ -0,0 +1,4 @@
+import { GridListViewColDef } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridListViewColDef = createTypes(import.meta.url, GridListViewColDef);
diff --git a/docs/pages/x/api/data-grid/types.grid-print-export-options.ts b/docs/pages/x/api/data-grid/types.grid-print-export-options.ts
new file mode 100644
index 0000000000000..bb404010b0082
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-print-export-options.ts
@@ -0,0 +1,4 @@
+import { GridPrintExportOptions } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridPrintExportOptions = createTypes(import.meta.url, GridPrintExportOptions);
diff --git a/docs/pages/x/api/data-grid/types.grid-render-context.ts b/docs/pages/x/api/data-grid/types.grid-render-context.ts
new file mode 100644
index 0000000000000..f9424f6bbe128
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-render-context.ts
@@ -0,0 +1,4 @@
+import { GridRenderContext } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridRenderContext = createTypes(import.meta.url, GridRenderContext);
diff --git a/docs/pages/x/api/data-grid/types.grid-row-class-name-params.ts b/docs/pages/x/api/data-grid/types.grid-row-class-name-params.ts
new file mode 100644
index 0000000000000..3e90052181538
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-row-class-name-params.ts
@@ -0,0 +1,4 @@
+import { GridRowClassNameParams } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridRowClassNameParams = createTypes(import.meta.url, GridRowClassNameParams);
diff --git a/docs/pages/x/api/data-grid/types.grid-row-order-change-params.ts b/docs/pages/x/api/data-grid/types.grid-row-order-change-params.ts
new file mode 100644
index 0000000000000..786054d9f8d98
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-row-order-change-params.ts
@@ -0,0 +1,4 @@
+import { GridRowOrderChangeParams } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridRowOrderChangeParams = createTypes(import.meta.url, GridRowOrderChangeParams);
diff --git a/docs/pages/x/api/data-grid/types.grid-row-params.ts b/docs/pages/x/api/data-grid/types.grid-row-params.ts
new file mode 100644
index 0000000000000..a95f52ee6bef6
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-row-params.ts
@@ -0,0 +1,4 @@
+import { GridRowParams } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridRowParams = createTypes(import.meta.url, GridRowParams);
diff --git a/docs/pages/x/api/data-grid/types.grid-row-spacing-params.ts b/docs/pages/x/api/data-grid/types.grid-row-spacing-params.ts
new file mode 100644
index 0000000000000..f2f7d5f04d4a0
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-row-spacing-params.ts
@@ -0,0 +1,4 @@
+import { GridRowSpacingParams } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridRowSpacingParams = createTypes(import.meta.url, GridRowSpacingParams);
diff --git a/docs/pages/x/api/data-grid/types.grid-single-select-col-def.ts b/docs/pages/x/api/data-grid/types.grid-single-select-col-def.ts
new file mode 100644
index 0000000000000..d396a2d7aee5e
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-single-select-col-def.ts
@@ -0,0 +1,4 @@
+import { GridSingleSelectColDef } from '@mui/x-data-grid-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridSingleSelectColDef = createTypes(import.meta.url, GridSingleSelectColDef);
diff --git a/docs/pages/x/api/data-grid/types.grid-toolbar-quick-filter.ts b/docs/pages/x/api/data-grid/types.grid-toolbar-quick-filter.ts
new file mode 100644
index 0000000000000..8b403fddb6293
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.grid-toolbar-quick-filter.ts
@@ -0,0 +1,4 @@
+import { GridToolbarQuickFilter } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesGridToolbarQuickFilter = createTypes(import.meta.url, GridToolbarQuickFilter);
diff --git a/docs/pages/x/api/data-grid/types.pivot-panel-trigger.md b/docs/pages/x/api/data-grid/types.pivot-panel-trigger.md
new file mode 100644
index 0000000000000..dd941868498df
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.pivot-panel-trigger.md
@@ -0,0 +1,914 @@
+# Data Grid
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.pivot-panel-trigger.md'
+
+## API Reference
+
+### AiAssistantPanelTrigger
+
+A button that opens and closes the assistant panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [AI Assistant Panel](https://mui.com/x/react-data-grid/components/ai-assistant-panel/)
+
+API:
+
+- [AiAssistantPanelTrigger API](https://mui.com/x/api/data-grid/ai-assistant-panel-trigger/)
+
+**AiAssistantPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                               | Default | Description                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                   |
+| className      | `string \| ((state: AiAssistantPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, AiAssistantPanelState>` | -       | A function to customize rendering of the component. |
+
+### ChartsPanelTrigger
+
+A button that opens and closes the charts integration panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Charts Panel](https://mui.com/x/react-data-grid/components/charts-panel/)
+
+API:
+
+- [ChartsPanelTrigger API](https://mui.com/x/api/data-grid/charts-panel-trigger/)
+
+**ChartsPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                          | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| className      | `string \| ((state: ChartsPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, ChartsPanelState>` | -       | A function to customize rendering of the component. |
+
+### ExportExcel
+
+A button that triggers an Excel export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-data-grid/components/export/)
+
+API:
+
+- [ExportExcel API](https://mui.com/x/api/data-grid/export-excel/)
+
+**ExportExcel Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                        | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| options        | `GridExcelExportOptions`                                                                                                                                                                                                                                                                                                                                                    | -       | The options to apply on the Excel export.           |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>` | -       | A function to customize rendering of the component. |
+
+### GridAiAssistantPanel
+
+### GridAssistantIcon
+
+**GridAssistantIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridChartsIcon
+
+**GridChartsIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridChartsPanel
+
+**GridChartsPanel Props:**
+
+| Prop          | Type                                       | Default | Description                                                                                                                                                         |
+| :------------ | :----------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| getColumnName | `((field: string) => string \| undefined)` | -       | Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user. |
+| schema        | `GridChartsConfigurationOptions`           | `{}`    | The schema of the charts configuration.                                                                                                                             |
+
+### GridColumnMenuAggregationItem
+
+**GridColumnMenuAggregationItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuGroupingItem
+
+**GridColumnMenuGroupingItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridEmptyPivotOverlay
+
+**GridEmptyPivotOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridExcelExportMenuItem
+
+**GridExcelExportMenuItem Props:**
+
+| Prop     | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description |
+| :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| hideMenu | `(() => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -           |
+| options  | `{ worker?: (() => Worker); valueOptionsSheetName?: string; exceljsPreProcess?: ((processInput: GridExceljsProcessInput) => Promise<void>); exceljsPostProcess?: ((processInput: GridExceljsProcessInput) => Promise<void>); columnsStyles?: ColumnsStylesInterface; includeColumnGroupsHeaders?: boolean; fileName?: string; includeHeaders?: boolean; getRowsToExport?: ((params: GridGetRowsToExportParams) => GridRowId[]); escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | -       | -           |
+
+### GridExpandLessIcon
+
+**GridExpandLessIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFunctionsIcon
+
+**GridFunctionsIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridGroupWorkIcon
+
+**GridGroupWorkIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridHistoryIcon
+
+**GridHistoryIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMicIcon
+
+**GridMicIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMicOffIcon
+
+**GridMicOffIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMoveToBottomIcon
+
+**GridMoveToBottomIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMoveToTopIcon
+
+**GridMoveToTopIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridPivotIcon
+
+**GridPivotIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridPivotPanel
+
+### GridPromptIcon
+
+**GridPromptIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridRerunIcon
+
+**GridRerunIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSendIcon
+
+**GridSendIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSyncDisabledIcon
+
+**GridSyncDisabledIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSyncIcon
+
+**GridSyncIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridWorkspacesIcon
+
+**GridWorkspacesIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### PivotPanelTrigger
+
+A button that opens and closes the pivot panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Pivot Panel](https://mui.com/x/react-data-grid/components/pivot-panel/)
+
+API:
+
+- [PivotPanelTrigger API](https://mui.com/x/api/data-grid/pivot-panel-trigger/)
+
+**PivotPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                         | Default | Description                                         |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| className      | `string \| ((state: PivotPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, PivotPanelState>` | -       | A function to customize rendering of the component. |
+
+### PromptField
+
+The top level Prompt Field component that provides context to child components.
+It renders a `<div />` element.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptField API](https://mui.com/x/api/data-grid/prompt-field/)
+
+**PromptField Props:**
+
+| Prop          | Type                                                        | Default | Description                                             |
+| :------------ | :---------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| lang          | `string`                                                    | -       | -                                                       |
+| onRecordError | `((error: string) => void)`                                 | -       | Called when a speech recognition error occurs.          |
+| onSubmit\*    | `((prompt: string) => void)`                                | -       | Called when the user submits the prompt.                |
+| className     | `string \| ((state: PromptFieldState) => string)`           | -       | Override or extend the styles applied to the component. |
+| render        | `RenderProp<React.ComponentProps<'div'>, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+### PromptFieldControl
+
+A component that takes user input.
+It renders the `baseTextField` slot.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptFieldControl API](https://mui.com/x/api/data-grid/prompt-field-control/)
+
+**PromptFieldControl Props:**
+
+| Prop         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default | Description                                             |
+| :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label        | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| value        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| autoComplete | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| color        | `'primary' \| 'error'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| error        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| fullWidth    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| helperText   | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                       |
+| material     | `Partial<TextFieldProps>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| multiline    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| onChange     | `(((event: React.ChangeEvent<HTMLElement, Element>) => void) \| ((event: React.ChangeEvent) => void))`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| placeholder  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| role         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| size         | `'small' \| 'medium'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| slotProps    | `{ input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| tabIndex     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| type         | `React.HTMLInputTypeAttribute`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| autoFocus    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| disabled     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| inputRef     | `React.Ref<HTMLInputElement>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| id           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| className    | `string \| ((state: PromptFieldState) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | Override or extend the styles applied to the component. |
+| style        | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| render       | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; autoComplete?: string; color?: 'primary' \| 'error'; disabled?: boolean; error?: boolean; fullWidth?: boolean; helperText?: string \| null; id?: string; inputRef?: React.Ref<HTMLInputElement>; label?: React.ReactNode; onChange?: React.ChangeEventHandler; placeholder?: string; size?: 'small' \| 'medium'; slotProps?: { input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }; tabIndex?: number; type?: React.HTMLInputTypeAttribute; value?: string; ref?: Ref<HTMLInputElement>; multiline?: boolean; autoFocus?: boolean } & BaseTextFieldPropsOverrides, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+### PromptFieldRecord
+
+A button that records the user's voice when clicked.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptFieldRecord API](https://mui.com/x/api/data-grid/prompt-field-record/)
+
+**PromptFieldRecord Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | -                                                       |
+| className      | `string \| ((state: PromptFieldState) => string)`                                                                                                                                                                                                                                                                                                                                                                                 | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| render         | `RenderProp<{ children?: React.ReactNode; className?: string; style?: React.CSSProperties; ref?: Ref<HTMLButtonElement>; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; tabIndex?: number; title?: string; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+### PromptFieldSend
+
+A button that processes the prompt when clicked.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+
+API:
+
+- [PromptFieldSend API](https://mui.com/x/api/data-grid/prompt-field-send/)
+
+**PromptFieldSend Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | -                                                       |
+| className      | `string \| ((state: PromptFieldState) => string)`                                                                                                                                                                                                                                                                                                                                                                                 | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| render         | `RenderProp<{ children?: React.ReactNode; className?: string; style?: React.CSSProperties; ref?: Ref<HTMLButtonElement>; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; tabIndex?: number; title?: string; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }, PromptFieldState>` | -       | A function to customize rendering of the component.     |
+
+## Additional Types
+
+### AiAssistantPanelState
+
+```typescript
+type AiAssistantPanelState = {
+  /** If `true`, the assistant panel is open. */
+  open: boolean;
+};
+```
+
+### AiAssistantPanelTriggerProps
+
+```typescript
+type AiAssistantPanelTriggerProps = {
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    AiAssistantPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: AiAssistantPanelState) => string);
+};
+```
+
+### ChartsPanelState
+
+```typescript
+type ChartsPanelState = {
+  /** If `true`, the charts integration panel is open. */
+  open: boolean;
+};
+```
+
+### ChartsPanelTriggerProps
+
+```typescript
+type ChartsPanelTriggerProps = {
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    ChartsPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: ChartsPanelState) => string);
+};
+```
+
+### ExportExcelProps
+
+```typescript
+type ExportExcelProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+} & BaseButtonPropsOverrides & {
+    render?: RenderProp<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    options?: GridExcelExportOptions;
+  };
+```
+
+### GridChartsPanelProps
+
+```typescript
+type GridChartsPanelProps = {
+  /**
+   * The schema of the charts configuration.
+   * @default {}
+   * @type GridChartsConfigurationOptions
+   */
+  schema?: GridChartsConfigurationOptions;
+  /**
+   * Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user.
+   * @returns The name of the column or undefined if the column name should be determined by the grid
+   */
+  getColumnName?: (field: string) => string | undefined;
+};
+```
+
+### GridExcelExportMenuItemProps
+
+```typescript
+type GridExcelExportMenuItemProps = {
+  hideMenu?: () => void;
+  options?: {
+    worker?: () => Worker;
+    valueOptionsSheetName?: string;
+    exceljsPreProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
+    exceljsPostProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
+    columnsStyles?: ColumnsStylesInterface;
+    includeColumnGroupsHeaders?: boolean;
+    fileName?: string;
+    includeHeaders?: boolean;
+    getRowsToExport?: (params: GridGetRowsToExportParams) => GridRowId[];
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+};
+```
+
+### PivotPanelState
+
+```typescript
+type PivotPanelState = {
+  /** If `true`, the pivot panel is open. */
+  open: boolean;
+  /** If `true`, pivot is active. */
+  active: boolean;
+};
+```
+
+### PivotPanelTriggerProps
+
+```typescript
+type PivotPanelTriggerProps = {
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    PivotPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: PivotPanelState) => string);
+};
+```
+
+### PromptFieldControlProps
+
+```typescript
+type PromptFieldControlProps = {
+  onChange?:
+    | ((event: React.ChangeEvent<HTMLElement, Element>) => void)
+    | ((event: React.ChangeEvent) => void);
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLInputElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium';
+  tabIndex?: number;
+  label?: React.ReactNode;
+  color?: 'primary' | 'error';
+  material?: Partial<TextFieldProps>;
+  autoFocus?: boolean;
+  value?: string;
+  type?: React.HTMLInputTypeAttribute;
+  inputRef?: React.Ref<HTMLInputElement>;
+  slotProps?: {
+    input?: Omit<Partial<InputProps>, 'slotProps'>;
+    inputLabel?: {};
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  autoComplete?: string;
+  error?: boolean;
+  fullWidth?: boolean;
+  helperText?: string | null;
+  placeholder?: string;
+  multiline?: boolean;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      role?: string;
+      autoComplete?: string;
+      color?: 'primary' | 'error';
+      disabled?: boolean;
+      error?: boolean;
+      fullWidth?: boolean;
+      helperText?: string | null;
+      id?: string;
+      inputRef?: React.Ref<HTMLInputElement>;
+      label?: React.ReactNode;
+      onChange?: React.ChangeEventHandler;
+      placeholder?: string;
+      size?: 'small' | 'medium';
+      slotProps?: {
+        input?: Omit<Partial<InputProps>, 'slotProps'>;
+        inputLabel?: {};
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+      };
+      tabIndex?: number;
+      type?: React.HTMLInputTypeAttribute;
+      value?: string;
+      ref?: Ref<HTMLInputElement>;
+      multiline?: boolean;
+      autoFocus?: boolean;
+    } & BaseTextFieldPropsOverrides,
+    PromptFieldState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+};
+```
+
+### PromptFieldProps
+
+```typescript
+type PromptFieldProps = {
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<React.ComponentProps<'div'>, PromptFieldState>;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+  /**
+   * The BCP 47 language tag to use for the speech recognition.
+   * @default HTML lang attribute value or the user agent's language setting
+   */
+  lang?: string;
+  /** Called when a speech recognition error occurs. */
+  onRecordError?: (error: string) => void;
+  /** Called when the user submits the prompt. */
+  onSubmit: (prompt: string) => void;
+};
+```
+
+### PromptFieldRecordProps
+
+```typescript
+type PromptFieldRecordProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    {
+      children?: React.ReactNode;
+      className?: string;
+      style?: React.CSSProperties;
+      ref?: Ref<HTMLButtonElement>;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+      label?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    },
+    PromptFieldState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+};
+```
+
+### PromptFieldSendProps
+
+```typescript
+type PromptFieldSendProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  ref?: Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    {
+      children?: React.ReactNode;
+      className?: string;
+      style?: React.CSSProperties;
+      ref?: Ref<HTMLButtonElement>;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+      label?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    },
+    PromptFieldState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: PromptFieldState) => string);
+};
+```
+
+## External Types
+
+### GridRowId
+
+```typescript
+type GridRowId = string | number;
+```
diff --git a/docs/pages/x/api/data-grid/types.pivot-panel-trigger.ts b/docs/pages/x/api/data-grid/types.pivot-panel-trigger.ts
new file mode 100644
index 0000000000000..c52045a71321c
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.pivot-panel-trigger.ts
@@ -0,0 +1,4 @@
+import { PivotPanelTrigger } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPivotPanelTrigger = createTypes(import.meta.url, PivotPanelTrigger);
diff --git a/docs/pages/x/api/data-grid/types.prompt-field-control.ts b/docs/pages/x/api/data-grid/types.prompt-field-control.ts
new file mode 100644
index 0000000000000..21a3c9f1c50d8
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.prompt-field-control.ts
@@ -0,0 +1,4 @@
+import { PromptFieldControl } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPromptFieldControl = createTypes(import.meta.url, PromptFieldControl);
diff --git a/docs/pages/x/api/data-grid/types.prompt-field-record.ts b/docs/pages/x/api/data-grid/types.prompt-field-record.ts
new file mode 100644
index 0000000000000..c1e4de23654a2
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.prompt-field-record.ts
@@ -0,0 +1,4 @@
+import { PromptFieldRecord } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPromptFieldRecord = createTypes(import.meta.url, PromptFieldRecord);
diff --git a/docs/pages/x/api/data-grid/types.prompt-field-send.ts b/docs/pages/x/api/data-grid/types.prompt-field-send.ts
new file mode 100644
index 0000000000000..e26f334c7f490
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.prompt-field-send.ts
@@ -0,0 +1,4 @@
+import { PromptFieldSend } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPromptFieldSend = createTypes(import.meta.url, PromptFieldSend);
diff --git a/docs/pages/x/api/data-grid/types.prompt-field.ts b/docs/pages/x/api/data-grid/types.prompt-field.ts
new file mode 100644
index 0000000000000..589eddd442282
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.prompt-field.ts
@@ -0,0 +1,4 @@
+import { PromptField } from '@mui/x-data-grid-premium/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPromptField = createTypes(import.meta.url, PromptField);
diff --git a/docs/pages/x/api/data-grid/types.quick-filter-clear.ts b/docs/pages/x/api/data-grid/types.quick-filter-clear.ts
new file mode 100644
index 0000000000000..7f1268d7eb3f8
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.quick-filter-clear.ts
@@ -0,0 +1,4 @@
+import { QuickFilterClear } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesQuickFilterClear = createTypes(import.meta.url, QuickFilterClear);
diff --git a/docs/pages/x/api/data-grid/types.quick-filter-control.ts b/docs/pages/x/api/data-grid/types.quick-filter-control.ts
new file mode 100644
index 0000000000000..7925c8f3fdd47
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.quick-filter-control.ts
@@ -0,0 +1,4 @@
+import { QuickFilterControl } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesQuickFilterControl = createTypes(import.meta.url, QuickFilterControl);
diff --git a/docs/pages/x/api/data-grid/types.quick-filter-trigger.ts b/docs/pages/x/api/data-grid/types.quick-filter-trigger.ts
new file mode 100644
index 0000000000000..1c25e14de88d6
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.quick-filter-trigger.ts
@@ -0,0 +1,4 @@
+import { QuickFilterTrigger } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesQuickFilterTrigger = createTypes(import.meta.url, QuickFilterTrigger);
diff --git a/docs/pages/x/api/data-grid/types.quick-filter.ts b/docs/pages/x/api/data-grid/types.quick-filter.ts
new file mode 100644
index 0000000000000..235c17a1ef1a1
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.quick-filter.ts
@@ -0,0 +1,4 @@
+import { QuickFilter } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesQuickFilter = createTypes(import.meta.url, QuickFilter);
diff --git a/docs/pages/x/api/data-grid/types.toolbar-button.ts b/docs/pages/x/api/data-grid/types.toolbar-button.ts
new file mode 100644
index 0000000000000..09fda2a3f84c5
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.toolbar-button.ts
@@ -0,0 +1,4 @@
+import { ToolbarButton } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesToolbarButton = createTypes(import.meta.url, ToolbarButton);
diff --git a/docs/pages/x/api/data-grid/types.toolbar.md b/docs/pages/x/api/data-grid/types.toolbar.md
new file mode 100644
index 0000000000000..acd417bbc3c84
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.toolbar.md
@@ -0,0 +1,3896 @@
+# Data Grid
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.toolbar.md'
+
+## API Reference
+
+### ColumnsPanelTrigger
+
+A button that opens and closes the columns panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Columns Panel](https://mui.com/x/react-data-grid/components/columns-panel/)
+
+API:
+
+- [ColumnsPanelTrigger API](https://mui.com/x/api/data-grid/columns-panel-trigger/)
+
+**ColumnsPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                             |
+| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                       |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| className      | `string \| ((state: ColumnsPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, ColumnsPanelState>` | -       | A function to customize rendering of the component.     |
+
+### ExportCsv
+
+A button that triggers a CSV export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-data-grid/components/export/)
+
+API:
+
+- [ExportCsv API](https://mui.com/x/api/data-grid/export-csv/)
+
+**ExportCsv Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                        | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| options        | `GridCsvExportOptions`                                                                                                                                                                                                                                                                                                                                                      | -       | The options to apply on the CSV export.             |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>` | -       | A function to customize rendering of the component. |
+
+### ExportPrint
+
+A button that triggers a print export.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Export](https://mui.com/x/react-data-grid/components/export/)
+
+API:
+
+- [ExportPrint API](https://mui.com/x/api/data-grid/export-print/)
+
+**ExportPrint Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                        | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| options        | `GridPrintExportOptions`                                                                                                                                                                                                                                                                                                                                                    | -       | The options to apply on the Print export.           |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                            | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                    | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>` | -       | A function to customize rendering of the component. |
+
+### FilterPanelTrigger
+
+A button that opens and closes the filter panel.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Filter Panel](https://mui.com/x/react-data-grid/components/filter-panel/)
+
+API:
+
+- [FilterPanelTrigger API](https://mui.com/x/api/data-grid/filter-panel-trigger/)
+
+**FilterPanelTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                          | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                   |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                   |
+| className      | `string \| ((state: FilterPanelState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | A function to customize rendering of the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                   |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, FilterPanelState>` | -       | A function to customize rendering of the component. |
+
+### GridActionsCell
+
+**GridActionsCell Props:**
+
+| Prop                       | Type                                                                                                                                                            | Default | Description                                                                                                                                                                                                        |
+| :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value                      | `V`                                                                                                                                                             | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields.                                                                                                               |
+| api                        | `GridApiCommunity`                                                                                                                                              | -       | -                                                                                                                                                                                                                  |
+| cellMode\*                 | `GridCellMode`                                                                                                                                                  | -       | The mode of the cell.                                                                                                                                                                                              |
+| colDef\*                   | `GridStateColDef`                                                                                                                                               | -       | The column of the row that the current cell belongs to.                                                                                                                                                            |
+| field\*                    | `string`                                                                                                                                                        | -       | The column field of the cell that triggered the event.                                                                                                                                                             |
+| formattedValue             | `F`                                                                                                                                                             | -       | The cell value formatted with the column valueFormatter.                                                                                                                                                           |
+| hasFocus\*                 | `boolean`                                                                                                                                                       | -       | If true, the cell is the active element.                                                                                                                                                                           |
+| isEditable                 | `boolean`                                                                                                                                                       | -       | If true, the cell is editable.                                                                                                                                                                                     |
+| onMenuClose                | `((params: GridRowParams<GridValidRowModel>, event?: React.MouseEvent<HTMLElement, MouseEvent> \| React.KeyboardEvent \| MouseEvent \| TouchEvent) => boolean)` | -       | Callback to fire before the menu gets closed.&#xA;Use this callback to prevent the menu from closing.                                                                                                              |
+| onMenuOpen                 | `((params: GridRowParams<GridValidRowModel>, event: React.MouseEvent<HTMLElement, MouseEvent>) => boolean)`                                                     | -       | Callback to fire before the menu gets opened.&#xA;Use this callback to prevent the menu from opening.                                                                                                              |
+| position                   | `MenuPosition`                                                                                                                                                  | -       | -                                                                                                                                                                                                                  |
+| row\*                      | `GridValidRowModel`                                                                                                                                             | -       | The row model of the row that the current cell belongs to.                                                                                                                                                         |
+| rowNode\*                  | `GridTreeNodeWithRender`                                                                                                                                        | -       | The node of the row that the current cell belongs to.                                                                                                                                                              |
+| suppressChildrenValidation | `boolean`                                                                                                                                                       | `false` | If true, the children passed to the component will not be validated.&#xA;If false, only `GridActionsCellItem` and `React.Fragment` are allowed as children.&#xA;Only use this prop if you know what you are doing. |
+| tabIndex\*                 | `0 \| -1`                                                                                                                                                       | -       | the tabIndex value.                                                                                                                                                                                                |
+| id\*                       | `GridRowId`                                                                                                                                                     | -       | The grid row id.                                                                                                                                                                                                   |
+| children\*                 | `React.ReactNode`                                                                                                                                               | -       | -                                                                                                                                                                                                                  |
+
+### GridActionsCellItem
+
+**GridActionsCellItem Props:**
+
+| Prop             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Default | Description                                                                          |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------- |
+| label\*          | `string \| React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                                                    |
+| value            | `number \| string \| string[]`                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                                                    |
+| closeMenu        | `(() => void)`                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                                                    |
+| closeMenuOnClick | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `true`  | If false, the menu will not close when this item is clicked.                         |
+| color            | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                    |
+| component        | `React.ElementType`                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | from https\://mui.com/material-ui/api/button-base/#ButtonBase-prop-component         |
+| edge             | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                                                    |
+| icon             | `string & ReactElement \| number & ReactElement \| bigint & ReactElement \| false & ReactElement \| true & ReactElement \| ReactElement & ReactElement \| Iterable<React.ReactNode, any, any> & ReactElement \| React.ReactPortal & ReactElement \| Promise<AwaitedReactNode> & ReactElement \| ((props: GridBaseIconProps) => React.ReactNode \| Promise<React.ReactNode>) \| __type & ReactElement \| React.JSXElementConstructor<GridBaseIconProps> \| React.ReactNode` | -       | -                                                                                    |
+| iconEnd          | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                                                    |
+| iconStart        | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                                                    |
+| inert            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | For items that aren't interactive themselves (but may contain an interactive widget) |
+| material         | `Partial<IconButtonProps> \| Partial<MenuItemProps>`                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                                                    |
+| role             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| selected         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| showInMenu       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| size             | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                                                    |
+| tabIndex         | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| title            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| touchRippleRef   | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                    |
+| autoFocus        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| disabled         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                                                    |
+| id               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| children         | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                                                    |
+| className        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                                                    |
+| style            | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                    |
+
+### GridAddIcon
+
+**GridAddIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridArrowDownwardIcon
+
+**GridArrowDownwardIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridArrowUpwardIcon
+
+**GridArrowUpwardIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridBody
+
+**GridBody Props:**
+
+| Prop     | Type              | Default | Description |
+| :------- | :---------------- | :------ | :---------- |
+| children | `React.ReactNode` | -       | -           |
+
+### GridBooleanCell
+
+**GridBooleanCell Props:**
+
+| Prop                | Type                     | Default | Description                                                                                          |
+| :------------------ | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value               | `V`                      | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*               | `GridApiCommunity`       | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*          | `GridCellMode`           | -       | The mode of the cell.                                                                                |
+| colDef\*            | `GridStateColDef`        | -       | The column of the row that the current cell belongs to.                                              |
+| field\*             | `string`                 | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue      | `F`                      | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*          | `boolean`                | -       | If true, the cell is the active element.                                                             |
+| hideDescendantCount | `boolean`                | -       | -                                                                                                    |
+| isEditable          | `boolean`                | -       | If true, the cell is editable.                                                                       |
+| row\*               | `any`                    | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*           | `GridTreeNodeWithRender` | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*          | `0 \| -1`                | -       | the tabIndex value.                                                                                  |
+| id\*                | `GridRowId`              | -       | The grid row id.                                                                                     |
+
+### GridCell
+
+**GridCell Props:**
+
+| Prop              | Type                                                                                                    | Default | Description |
+| :---------------- | :------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| onClick           | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| colIndex\*        | `number`                                                                                                | -       | -           |
+| colSpan           | `number`                                                                                                | -       | -           |
+| column\*          | `GridStateColDef`                                                                                       | -       | -           |
+| disableDragEvents | `boolean`                                                                                               | -       | -           |
+| isNotVisible\*    | `boolean`                                                                                               | -       | -           |
+| onDoubleClick     | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onDragEnter       | `React.DragEventHandler<HTMLDivElement>`                                                                | -       | -           |
+| onDragOver        | `React.DragEventHandler<HTMLDivElement>`                                                                | -       | -           |
+| onFocus           | `(((event: React.FocusEvent<HTMLDivElement, Element>) => void) \| ((event: React.FocusEvent) => void))` | -       | -           |
+| onKeyDown         | `React.KeyboardEventHandler<HTMLDivElement>`                                                            | -       | -           |
+| onKeyUp           | `React.KeyboardEventHandler<HTMLDivElement>`                                                            | -       | -           |
+| onMouseDown       | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseEnter      | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseLeave      | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseOver       | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| onMouseUp         | `React.MouseEventHandler<HTMLDivElement>`                                                               | -       | -           |
+| pinnedOffset      | `number`                                                                                                | -       | -           |
+| pinnedPosition\*  | `unknown`                                                                                               | -       | -           |
+| row\*             | `GridRowModel`                                                                                          | -       | -           |
+| rowId\*           | `GridRowId`                                                                                             | -       | -           |
+| rowNode\*         | `GridTreeNode`                                                                                          | -       | -           |
+| showLeftBorder\*  | `boolean`                                                                                               | -       | -           |
+| showRightBorder\* | `boolean`                                                                                               | -       | -           |
+| width\*           | `number`                                                                                                | -       | -           |
+| align\*           | `GridAlignment`                                                                                         | -       | -           |
+| children          | `React.ReactNode`                                                                                       | -       | -           |
+| className         | `string`                                                                                                | -       | -           |
+| style             | `React.CSSProperties`                                                                                   | -       | -           |
+
+### GridCellCheckboxForwardRef
+
+**GridCellCheckboxForwardRef Props:**
+
+| Prop           | Type                     | Default | Description                                                                                          |
+| :------------- | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value          | `V`                      | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*          | `GridApiCommunity`       | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*     | `GridCellMode`           | -       | The mode of the cell.                                                                                |
+| colDef\*       | `GridStateColDef`        | -       | The column of the row that the current cell belongs to.                                              |
+| field\*        | `string`                 | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue | `F`                      | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*     | `boolean`                | -       | If true, the cell is the active element.                                                             |
+| isEditable     | `boolean`                | -       | If true, the cell is editable.                                                                       |
+| row\*          | `any`                    | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*      | `GridTreeNodeWithRender` | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*     | `0 \| -1`                | -       | the tabIndex value.                                                                                  |
+| id\*           | `GridRowId`              | -       | The grid row id.                                                                                     |
+
+### GridCellCheckboxRenderer
+
+**GridCellCheckboxRenderer Props:**
+
+| Prop           | Type                     | Default | Description                                                                                          |
+| :------------- | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value          | `V`                      | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*          | `GridApiCommunity`       | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*     | `GridCellMode`           | -       | The mode of the cell.                                                                                |
+| colDef\*       | `GridStateColDef`        | -       | The column of the row that the current cell belongs to.                                              |
+| field\*        | `string`                 | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue | `F`                      | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*     | `boolean`                | -       | If true, the cell is the active element.                                                             |
+| isEditable     | `boolean`                | -       | If true, the cell is editable.                                                                       |
+| row\*          | `any`                    | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*      | `GridTreeNodeWithRender` | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*     | `0 \| -1`                | -       | the tabIndex value.                                                                                  |
+| id\*           | `GridRowId`              | -       | The grid row id.                                                                                     |
+
+### GridCheckCircleIcon
+
+**GridCheckCircleIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridCheckIcon
+
+**GridCheckIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridClearIcon
+
+**GridClearIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridCloseIcon
+
+**GridCloseIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridColumnHeaderFilterIconButton
+
+**GridColumnHeaderFilterIconButton Props:**
+
+| Prop    | Type                                                                                                                              | Default | Description |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| onClick | `((params: GridColumnHeaderParams<GridValidRowModel, any, any>, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)` | -       | -           |
+| counter | `number`                                                                                                                          | -       | -           |
+| field\* | `string`                                                                                                                          | -       | -           |
+
+### GridColumnHeaderItem
+
+**GridColumnHeaderItem Props:**
+
+| Prop               | Type                  | Default | Description |
+| :----------------- | :-------------------- | :------ | :---------- |
+| colDef\*           | `GridStateColDef`     | -       | -           |
+| colIndex\*         | `number`              | -       | -           |
+| columnMenuOpen\*   | `boolean`             | -       | -           |
+| disableReorder     | `boolean`             | -       | -           |
+| filterItemsCounter | `number`              | -       | -           |
+| hasFocus           | `boolean`             | -       | -           |
+| headerHeight\*     | `number`              | -       | -           |
+| isDragging\*       | `boolean`             | -       | -           |
+| isLast\*           | `boolean`             | -       | -           |
+| isResizing\*       | `boolean`             | -       | -           |
+| isSiblingFocused\* | `boolean`             | -       | -           |
+| pinnedOffset       | `number`              | -       | -           |
+| pinnedPosition     | `unknown`             | -       | -           |
+| separatorSide      | `unknown`             | -       | -           |
+| showLeftBorder\*   | `boolean`             | -       | -           |
+| showRightBorder\*  | `boolean`             | -       | -           |
+| sortDirection\*    | `GridSortDirection`   | -       | -           |
+| sortIndex          | `number`              | -       | -           |
+| tabIndex\*         | `0 \| -1`             | -       | -           |
+| style              | `React.CSSProperties` | -       | -           |
+
+### GridColumnHeaderMenu
+
+**GridColumnHeaderMenu Props:**
+
+| Prop                  | Type                                    | Default | Description |
+| :-------------------- | :-------------------------------------- | :------ | :---------- |
+| open\*                | `boolean`                               | -       | -           |
+| ContentComponent\*    | `React.JSXElementConstructor<any>`      | -       | -           |
+| columnMenuButtonId    | `string`                                | -       | -           |
+| columnMenuId          | `string`                                | -       | -           |
+| contentComponentProps | `any`                                   | -       | -           |
+| field\*               | `string`                                | -       | -           |
+| onExited              | `((node: HTMLElement \| null) => void)` | -       | -           |
+| target\*              | `HTMLElement \| null`                   | -       | -           |
+
+### GridColumnHeaderSeparator
+
+**GridColumnHeaderSeparator Props:**
+
+| Prop        | Type      | Default | Description |
+| :---------- | :-------- | :------ | :---------- |
+| height\*    | `number`  | -       | -           |
+| resizable\* | `boolean` | -       | -           |
+| resizing\*  | `boolean` | -       | -           |
+| side        | `unknown` | -       | -           |
+
+### GridColumnHeaderSortIcon
+
+**GridColumnHeaderSortIcon Props:**
+
+| Prop           | Type                                                                                                                                   | Default | Description |
+| :------------- | :------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| label          | `string`                                                                                                                               | -       | -           |
+| onClick        | `(((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) \| ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void))` | -       | -           |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                  | -       | -           |
+| direction\*    | `GridSortDirection`                                                                                                                    | -       | -           |
+| edge           | `'start' \| 'end' \| false`                                                                                                            | -       | -           |
+| field\*        | `string`                                                                                                                               | -       | -           |
+| index          | `number`                                                                                                                               | -       | -           |
+| material       | `Partial<IconButtonProps>`                                                                                                             | -       | -           |
+| role           | `string`                                                                                                                               | -       | -           |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                       | -       | -           |
+| sortingOrder\* | `GridSortDirection[]`                                                                                                                  | -       | -           |
+| tabIndex       | `number`                                                                                                                               | -       | -           |
+| title          | `string`                                                                                                                               | -       | -           |
+| touchRippleRef | `any`                                                                                                                                  | -       | -           |
+| disabled       | `boolean`                                                                                                                              | -       | -           |
+| id             | `string`                                                                                                                               | -       | -           |
+| children       | `React.ReactNode`                                                                                                                      | -       | -           |
+| className      | `string`                                                                                                                               | -       | -           |
+| style          | `React.CSSProperties`                                                                                                                  | -       | -           |
+
+### GridColumnHeaderTitle
+
+**GridColumnHeaderTitle Props:**
+
+| Prop          | Type              | Default | Description |
+| :------------ | :---------------- | :------ | :---------- |
+| label\*       | `string`          | -       | -           |
+| columnWidth\* | `number`          | -       | -           |
+| description   | `React.ReactNode` | -       | -           |
+
+### GridColumnIcon
+
+**GridColumnIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridColumnMenuColumnsItem
+
+**GridColumnMenuColumnsItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuContainer
+
+**GridColumnMenuContainer Props:**
+
+| Prop       | Type                                      | Default | Description |
+| :--------- | :---------------------------------------- | :------ | :---------- |
+| open\*     | `boolean`                                 | -       | -           |
+| colDef\*   | `GridColDef`                              | -       | -           |
+| hideMenu\* | `((event: React.SyntheticEvent) => void)` | -       | -           |
+| labelledby | `string`                                  | -       | -           |
+| id         | `string`                                  | -       | -           |
+
+### GridColumnMenuFilterItem
+
+**GridColumnMenuFilterItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuHideItem
+
+**GridColumnMenuHideItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuManageItem
+
+**GridColumnMenuManageItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnMenuSortItem
+
+**GridColumnMenuSortItem Props:**
+
+| Prop      | Type                                                   | Default | Description |
+| :-------- | :----------------------------------------------------- | :------ | :---------- |
+| onClick\* | `((event: React.MouseEvent<any, MouseEvent>) => void)` | -       | -           |
+| colDef\*  | `GridColDef`                                           | -       | -           |
+
+### GridColumnsManagement
+
+**GridColumnsManagement Props:**
+
+| Prop                  | Type                                                     | Default | Description                                                                                                                                                                                                                          |
+| :-------------------- | :------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| autoFocusSearchField  | `boolean`                                                | `true`  | If `true`, the column search field will be focused automatically.&#xA;If `false`, the first column switch input will be focused automatically.&#xA;This helps to avoid input keyboard panel to popup automatically on touch devices. |
+| disableResetButton    | `boolean`                                                | `false` | If `true`, the `Reset` button will not be disabled                                                                                                                                                                                   |
+| disableShowHideToggle | `boolean`                                                | `false` | If `true`, the `Show/Hide all` toggle checkbox will not be displayed.                                                                                                                                                                |
+| getTogglableColumns   | `((columns: GridColDef[]) => string[])`                  | -       | Returns the list of togglable columns.&#xA;If used, only those columns will be displayed in the panel&#xA;which are passed as the return value of the function.                                                                      |
+| searchDebounceMs      | `number`                                                 | `150`   | The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.                                                                                                                                    |
+| searchInputProps      | `Partial<TextFieldProps>`                                | -       | -                                                                                                                                                                                                                                    |
+| searchPredicate       | `((column: GridColDef, searchValue: string) => boolean)` | -       | -                                                                                                                                                                                                                                    |
+| sort                  | `'asc' \| 'desc'`                                        | -       | -                                                                                                                                                                                                                                    |
+| toggleAllMode         | `'all' \| 'filteredOnly'`                                | `'all'` | Changes the behavior of the `Show/Hide All` toggle when the search field is used: `all`: Will toggle all columns.`filteredOnly`: Will only toggle columns that match the search criteria.                                            |
+
+### GridColumnsPanel
+
+### GridColumnUnsortedIcon
+
+**GridColumnUnsortedIcon Props:**
+
+| Prop           | Type                                          | Default | Description |
+| :------------- | :-------------------------------------------- | :------ | :---------- |
+| color          | `string`                                      | -       | -           |
+| fontSize       | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| sortingOrder\* | `GridSortDirection[]`                         | -       | -           |
+| titleAccess    | `string`                                      | -       | -           |
+| className      | `string`                                      | -       | -           |
+| style          | `React.CSSProperties`                         | -       | -           |
+
+### GridCsvExportMenuItem
+
+**GridCsvExportMenuItem Props:**
+
+| Prop     | Type                                                                                                                                                                                                                                                                                                                                           | Default | Description |
+| :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- |
+| hideMenu | `(() => void)`                                                                                                                                                                                                                                                                                                                                 | -       | -           |
+| options  | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | -       | -           |
+
+### GridDeleteForeverIcon
+
+**GridDeleteForeverIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridDeleteIcon
+
+**GridDeleteIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridDownloadIcon
+
+**GridDownloadIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridDragIcon
+
+**GridDragIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridEditBooleanCell
+
+**GridEditBooleanCell Props:**
+
+| Prop              | Type                                                                                                  | Default | Description                                                                                          |
+| :---------------- | :---------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                                                   | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLInputElement, Element>, newValue: boolean) => void \| Promise<void>)` | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                                                    | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                                                        | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                   | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                                                     | -       | The column of the row that the current cell belongs to.                                              |
+| field\*           | `string`                                                                                              | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                                                   | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                                             | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                             | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                             | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                             | -       | -                                                                                                    |
+| row\*             | `any`                                                                                                 | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                                              | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*        | `0 \| -1`                                                                                             | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                                                           | -       | The grid row id.                                                                                     |
+
+### GridEditDateCell
+
+**GridEditDateCell Props:**
+
+| Prop              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                                                                          |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLInputElement, Element>, newValue: Date \| null) => void \| Promise<void>)`                                                                                                                                                                                                                                                                                                                                                                                     | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | The column of the row that the current cell belongs to.                                              |
+| field\*           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| row\*             | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps         | `{ root?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLElement>; inputRef?: React.Ref<HTMLInputElement>; fullWidth?: boolean; type?: React.HTMLInputTypeAttribute; value?: string; onChange: React.ChangeEventHandler; disabled?: boolean; endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> } } & BaseInputPropsOverrides> }` | -       | -                                                                                                    |
+| tabIndex\*        | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -       | The grid row id.                                                                                     |
+
+### GridEditInputCell
+
+**GridEditInputCell Props:**
+
+| Prop              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                                                                          |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLInputElement, Element>, newValue: string) => void \| Promise<void>)`                                                                                                                                                                                                                                                                                                                                                                                           | -       | Callback called when the value is changed by the user.                                               |
+| api               | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode          | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | -                                                                                                    |
+| colDef            | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | The column of the row that the current cell belongs to.                                              |
+| debounceMs        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                                                                    |
+| field             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                                                                    |
+| row               | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode           | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps         | `{ root?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLElement>; inputRef?: React.Ref<HTMLInputElement>; fullWidth?: boolean; type?: React.HTMLInputTypeAttribute; value?: string; onChange: React.ChangeEventHandler; disabled?: boolean; endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> } } & BaseInputPropsOverrides> }` | -       | -                                                                                                    |
+| tabIndex          | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | the tabIndex value.                                                                                  |
+| id                | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -       | The grid row id.                                                                                     |
+
+### GridEditLongTextCell
+
+**GridEditLongTextCell Props:**
+
+| Prop              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default | Description                                                                                          |
+| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.ChangeEvent<HTMLTextAreaElement, Element>, newValue: string) => void \| Promise<void>)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column of the row that the current cell belongs to.                                              |
+| debounceMs        | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                                                                    |
+| field\*           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is the active element.                                                             |
+| isEditable        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                                                                    |
+| row\*             | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps         | `{ root?: GridSkeletonCellProps<HTMLDivElement>; value?: GridSkeletonCellProps<HTMLDivElement>; popper?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; popperContent?: GridSkeletonCellProps<HTMLDivElement>; textarea?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref<HTMLTextAreaElement>; inputRef?: React.Ref<HTMLTextAreaElement>; fullWidth?: boolean; value?: string; onChange: React.ChangeEventHandler<HTMLTextAreaElement, Element>; onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>; disabled?: boolean; autoFocus?: boolean; minRows?: number; maxRows?: number } & BaseTextareaPropsOverrides> }` | -       | Props passed to internal components.                                                                 |
+| tabIndex\*        | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | The grid row id.                                                                                     |
+
+### GridEditSingleSelectCell
+
+**GridEditSingleSelectCell Props:**
+
+| Prop              | Type                                                                      | Default | Description                                                                                          |
+| :---------------- | :------------------------------------------------------------------------ | :------ | :--------------------------------------------------------------------------------------------------- |
+| value             | `V`                                                                       | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| onValueChange     | `((event: React.SyntheticEvent, newValue: any) => void \| Promise<void>)` | -       | Callback called when the value is changed by the user.                                               |
+| api\*             | `GridApiCommunity`                                                        | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*        | `GridCellMode`                                                            | -       | The mode of the cell.                                                                                |
+| changeReason      | `'debouncedSetEditCellValue' \| 'setEditCellValue'`                       | -       | -                                                                                                    |
+| colDef\*          | `GridStateColDef`                                                         | -       | The column of the row that the current cell belongs to.                                              |
+| field\*           | `string`                                                                  | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue    | `F`                                                                       | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*        | `boolean`                                                                 | -       | If true, the cell is the active element.                                                             |
+| initialOpen       | `boolean`                                                                 | -       | If true, the select opens by default.                                                                |
+| isEditable        | `boolean`                                                                 | -       | If true, the cell is editable.                                                                       |
+| isProcessingProps | `boolean`                                                                 | -       | -                                                                                                    |
+| isValidating      | `boolean`                                                                 | -       | -                                                                                                    |
+| row\*             | `any`                                                                     | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*         | `GridTreeNodeWithRender`                                                  | -       | The node of the row that the current cell belongs to.                                                |
+| tabIndex\*        | `0 \| -1`                                                                 | -       | the tabIndex value.                                                                                  |
+| id\*              | `GridRowId`                                                               | -       | The grid row id.                                                                                     |
+
+### GridExpandMoreIcon
+
+**GridExpandMoreIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFilterAltIcon
+
+**GridFilterAltIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFilterForm
+
+**GridFilterForm Props:**
+
+| Prop                              | Type                                      | Default                                         | Description                                                                                                                            |
+| :-------------------------------- | :---------------------------------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- |
+| applyFilterChanges\*              | `((item: GridFilterItem) => void)`        | -                                               | Callback called when the operator, column field or value is changed.                                                                   |
+| applyMultiFilterOperatorChanges\* | `((operator: unknown) => void)`           | -                                               | Callback called when the logic operator is changed.                                                                                    |
+| columnInputProps                  | `any`                                     | `{}`                                            | Props passed to the column input component.                                                                                            |
+| columnsSort                       | `'asc' \| 'desc'`                         | -                                               | Changes how the options in the columns selector should be ordered.&#xA;If not specified, the order is derived from the `columns` prop. |
+| deleteFilter\*                    | `((item: GridFilterItem) => void)`        | -                                               | Callback called when the delete button is clicked.                                                                                     |
+| deleteIconProps                   | `any`                                     | `{}`                                            | Props passed to the delete icon.                                                                                                       |
+| disableMultiFilterOperator        | `boolean`                                 | -                                               | If `true`, disables the logic operator field but still renders it.                                                                     |
+| filterColumns                     | `((args: FilterColumnsArgs) => string[])` | -                                               | Allows to filter the columns displayed in the filter form.                                                                             |
+| focusElementRef                   | `React.Ref<any>`                          | -                                               | A ref allowing to set imperative focus.&#xA;It can be passed to the el                                                                 |
+| hasMultipleFilters\*              | `boolean`                                 | -                                               | If `true`, the logic operator field is rendered.&#xA;The field will be invisible if `showMultiFilterOperators` is also `true`.         |
+| item\*                            | `GridFilterItem`                          | -                                               | The \[\[GridFilterItem]] representing this form.                                                                                       |
+| logicOperatorInputProps           | `any`                                     | `{}`                                            | Props passed to the logic operator input component.                                                                                    |
+| logicOperators                    | `unknown[]`                               | `[GridLogicOperator.And, GridLogicOperator.Or]` | Sets the available logic operators.                                                                                                    |
+| operatorInputProps                | `any`                                     | `{}`                                            | Props passed to the operator input component.                                                                                          |
+| showMultiFilterOperators          | `boolean`                                 | -                                               | If `true`, the logic operator field is visible.                                                                                        |
+| valueInputProps                   | `any`                                     | `{}`                                            | Props passed to the value input component.                                                                                             |
+| readOnly                          | `boolean`                                 | `false`                                         | `true` if the filter is disabled/read only.&#xA;i.e. `colDef.fiterable = false` but passed in `filterModel`                            |
+
+### GridFilterInputBoolean
+
+**GridFilterInputBoolean Props:**
+
+| Prop             | Type                                | Default | Description                                                                                                                 |
+| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`       | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)` | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                   | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                    | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                   | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                           | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                    | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`          | -       | -                                                                                                                           |
+| tabIndex         | `number`                            | -       | -                                                                                                                           |
+| disabled         | `boolean`                           | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`    | -       | -                                                                                                                           |
+| className        | `string`                            | -       | -                                                                                                                           |
+
+### GridFilterInputDate
+
+**GridFilterInputDate Props:**
+
+| Prop             | Type                                | Default | Description                                                                                                                 |
+| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`       | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)` | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                   | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                    | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                   | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                           | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                    | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`          | -       | -                                                                                                                           |
+| tabIndex         | `number`                            | -       | -                                                                                                                           |
+| type             | `'date' \| 'datetime-local'`        | -       | -                                                                                                                           |
+| disabled         | `boolean`                           | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`    | -       | -                                                                                                                           |
+| className        | `string`                            | -       | -                                                                                                                           |
+
+### GridFilterInputMultipleSingleSelect
+
+**GridFilterInputMultipleSingleSelect Props:**
+
+| Prop             | Type                                                                            | Default | Description                                                                                                                 |
+| :--------------- | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`                                                   | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)`                                             | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                                                               | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                                                                | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                                                               | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                                                                       | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                                                                | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`                                                       | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`                                                       | -       | -                                                                                                                           |
+| slotProps        | `{ root: Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'> }` | -       | -                                                                                                                           |
+| tabIndex         | `number`                                                                        | -       | -                                                                                                                           |
+| type             | `'singleSelect'`                                                                | -       | -                                                                                                                           |
+| disabled         | `boolean`                                                                       | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`                                                | -       | -                                                                                                                           |
+| className        | `string`                                                                        | -       | -                                                                                                                           |
+
+### GridFilterInputMultipleValue
+
+**GridFilterInputMultipleValue Props:**
+
+| Prop             | Type                                                                      | Default | Description                                                                                                                 |
+| :--------------- | :------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`                                             | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)`                                       | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                                                         | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                                                          | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                                                         | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                                                                 | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                                                          | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`                                                 | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`                                                 | -       | -                                                                                                                           |
+| slotProps        | `{ root: Omit<AutocompleteProps<string, true, false, true>, 'options'> }` | -       | -                                                                                                                           |
+| tabIndex         | `number`                                                                  | -       | -                                                                                                                           |
+| type             | `'text' \| 'number' \| 'date' \| 'datetime-local'`                        | -       | -                                                                                                                           |
+| disabled         | `boolean`                                                                 | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`                                          | -       | -                                                                                                                           |
+| className        | `string`                                                                  | -       | -                                                                                                                           |
+
+### GridFilterInputSingleSelect
+
+**GridFilterInputSingleSelect Props:**
+
+| Prop             | Type                                | Default | Description                                                                                                                 |
+| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`       | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)` | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                   | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                    | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                   | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                           | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                    | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`           | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`          | -       | -                                                                                                                           |
+| tabIndex         | `number`                            | -       | -                                                                                                                           |
+| type             | `'singleSelect'`                    | -       | -                                                                                                                           |
+| disabled         | `boolean`                           | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`    | -       | -                                                                                                                           |
+| className        | `string`                            | -       | -                                                                                                                           |
+
+### GridFilterInputValue
+
+**GridFilterInputValue Props:**
+
+| Prop             | Type                                               | Default | Description                                                                                                                 |
+| :--------------- | :------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| apiRef\*         | `RefObject<GridApiCommunity>`                      | -       | -                                                                                                                           |
+| applyValue\*     | `((value: GridFilterItem) => void)`                | -       | -                                                                                                                           |
+| clearButton      | `React.ReactNode`                                  | -       | -                                                                                                                           |
+| focusElementRef  | `React.Ref<any>`                                   | -       | -                                                                                                                           |
+| headerFilterMenu | `React.ReactNode`                                  | -       | -                                                                                                                           |
+| isFilterActive   | `boolean`                                          | -       | It is `true` if the filter either has a value or an operator with no value&#xA;required is selected (for example `isEmpty`) |
+| item\*           | `GridFilterItem`                                   | -       | -                                                                                                                           |
+| onBlur           | `React.FocusEventHandler`                          | -       | -                                                                                                                           |
+| onFocus          | `React.FocusEventHandler`                          | -       | -                                                                                                                           |
+| slotProps        | `{ root: TextFieldProps }`                         | -       | -                                                                                                                           |
+| tabIndex         | `number`                                           | -       | -                                                                                                                           |
+| type             | `'text' \| 'number' \| 'date' \| 'datetime-local'` | -       | -                                                                                                                           |
+| disabled         | `boolean`                                          | -       | -                                                                                                                           |
+| inputRef         | `React.Ref<HTMLElement \| null>`                   | -       | -                                                                                                                           |
+| className        | `string`                                           | -       | -                                                                                                                           |
+
+### GridFilterListIcon
+
+**GridFilterListIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridFilterPanel
+
+**GridFilterPanel Props:**
+
+| Prop                   | Type                                                                                                                                                                               | Default                                         | Description                                                                                                                            |
+| :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------- |
+| columnsSort            | `'asc' \| 'desc'`                                                                                                                                                                  | -                                               | Changes how the options in the columns selector should be ordered.&#xA;If not specified, the order is derived from the `columns` prop. |
+| disableAddFilterButton | `boolean`                                                                                                                                                                          | `false`                                         | If `true`, the `Add filter` button will not be displayed.                                                                              |
+| disableRemoveAllButton | `boolean`                                                                                                                                                                          | `false`                                         | If `true`, the `Remove all` button will be disabled                                                                                    |
+| filterFormProps        | `Pick<GridFilterFormProps, 'columnsSort' \| 'deleteIconProps' \| 'logicOperatorInputProps' \| 'operatorInputProps' \| 'columnInputProps' \| 'valueInputProps' \| 'filterColumns'>` | -                                               | Props passed to each filter form.                                                                                                      |
+| getColumnForNewFilter  | `((args: GetColumnForNewFilterArgs) => string \| null)`                                                                                                                            | -                                               | Function that returns the next filter item to be picked as default filter.                                                             |
+| logicOperators         | `unknown[]`                                                                                                                                                                        | `[GridLogicOperator.And, GridLogicOperator.Or]` | Sets the available logic operators.                                                                                                    |
+| sx                     | `SxProps<Theme>`                                                                                                                                                                   | -                                               | The system prop that allows defining system overrides as well as additional CSS styles.                                                |
+
+### GridFooter
+
+**GridFooter Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridFooterContainer
+
+**GridFooterContainer Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridFooterPlaceholder
+
+### GridGenericColumnMenu
+
+**GridGenericColumnMenu Props:**
+
+| Prop       | Type                                                          | Default | Description                                                                                                                                                                                                       |
+| :--------- | :------------------------------------------------------------ | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| open\*     | `boolean`                                                     | -       | -                                                                                                                                                                                                                 |
+| colDef\*   | `GridColDef`                                                  | -       | -                                                                                                                                                                                                                 |
+| hideMenu\* | `((event: React.SyntheticEvent) => void)`                     | -       | -                                                                                                                                                                                                                 |
+| labelledby | `string`                                                      | -       | -                                                                                                                                                                                                                 |
+| slotProps  | `{ [key: string]: GridColumnMenuSlotProps }`                  | -       | Could be used to pass new props or override props specific to a column menu component&#xA;e.g. `displayOrder`                                                                                                     |
+| slots      | `{ [key: string]: React.JSXElementConstructor<any> \| null }` | -       | `slots` could be used to add new and (or) override default column menu items&#xA;If you register a nee component you must pass it's `displayOrder` in `slotProps`&#xA;or it will be placed in the end of the list |
+| id         | `string`                                                      | -       | -                                                                                                                                                                                                                 |
+
+### GridHeader
+
+### GridHeaderCheckbox
+
+**GridHeaderCheckbox Props:**
+
+| Prop     | Type                                           | Default | Description                                             |
+| :------- | :--------------------------------------------- | :------ | :------------------------------------------------------ |
+| colDef\* | `GridStateColDef<GridValidRowModel, any, any>` | -       | The column of the current header component.             |
+| field\*  | `string`                                       | -       | The column field of the column that triggered the event |
+
+### GridKeyboardArrowRight
+
+**GridKeyboardArrowRight Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridLoadIcon
+
+**GridLoadIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridLoadingOverlay
+
+**GridLoadingOverlay Props:**
+
+| Prop          | Type                        | Default             | Description                                            |
+| :------------ | :-------------------------- | :------------------ | :----------------------------------------------------- |
+| noRowsVariant | `GridLoadingOverlayVariant` | `'skeleton'`        | The variant of the overlay when no rows are displayed. |
+| sx            | `SxProps<Theme>`            | -                   | -                                                      |
+| variant       | `GridLoadingOverlayVariant` | `'linear-progress'` | The variant of the overlay.                            |
+
+### GridLongTextCell
+
+**GridLongTextCell Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default | Description                                                                                          |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- |
+| value          | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value.&#xA;If the column has `valueGetter`, use `params.row` to directly access the fields. |
+| api\*          | `GridApiCommunity`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | GridApi that let you manipulate the grid.                                                            |
+| cellMode\*     | `GridCellMode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | The mode of the cell.                                                                                |
+| colDef\*       | `GridStateColDef`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -       | The column of the row that the current cell belongs to.                                              |
+| field\*        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The column field of the cell that triggered the event.                                               |
+| formattedValue | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | The cell value formatted with the column valueFormatter.                                             |
+| hasFocus\*     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is the active element.                                                             |
+| isEditable     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | If true, the cell is editable.                                                                       |
+| renderContent  | `((value: string \| null) => React.ReactNode)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | A function to customize the content rendered in the popup.                                           |
+| row\*          | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | The row model of the row that the current cell belongs to.                                           |
+| rowNode\*      | `GridTreeNodeWithRender`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | -       | The node of the row that the current cell belongs to.                                                |
+| slotProps      | `{ root?: GridSkeletonCellProps<HTMLDivElement>; content?: GridSkeletonCellProps<HTMLDivElement>; expandButton?: React.ButtonHTMLAttributes<HTMLButtonElement>; collapseButton?: React.ButtonHTMLAttributes<HTMLButtonElement>; popper?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref<HTMLDivElement>; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; popperContent?: GridSkeletonCellProps<HTMLDivElement> }` | -       | Props passed to internal components.                                                                 |
+| tabIndex\*     | `0 \| -1`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -       | the tabIndex value.                                                                                  |
+| id\*           | `GridRowId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | The grid row id.                                                                                     |
+
+### GridLongTextCellCollapseIcon
+
+**GridLongTextCellCollapseIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridLongTextCellExpandIcon
+
+**GridLongTextCellExpandIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMenu
+
+**GridMenu Props:**
+
+| Prop       | Type                                                                  | Default | Description |
+| :--------- | :-------------------------------------------------------------------- | :------ | :---------- |
+| open\*     | `boolean`                                                             | -       | -           |
+| onClose\*  | `((event?: React.KeyboardEvent \| MouseEvent \| TouchEvent) => void)` | -       | -           |
+| onExited   | `((node: HTMLElement \| null) => void)`                               | -       | -           |
+| position   | `MenuPosition`                                                        | -       | -           |
+| target\*   | `HTMLElement \| null`                                                 | -       | -           |
+| children\* | `React.ReactNode`                                                     | -       | -           |
+| className  | `string`                                                              | -       | -           |
+
+### GridMenuIcon
+
+**GridMenuIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridMoreVertIcon
+
+**GridMoreVertIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridNoColumnsOverlay
+
+**GridNoColumnsOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridNoRowsOverlay
+
+**GridNoRowsOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridOverlay
+
+**GridOverlay Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPagination
+
+### GridPanel
+
+**GridPanel Props:**
+
+| Prop      | Type                        | Default | Description                                             |
+| :-------- | :-------------------------- | :------ | :------------------------------------------------------ |
+| open\*    | `boolean`                   | -       | -                                                       |
+| classes   | `Partial<GridPanelClasses>` | -       | Override or extend the styles applied to the component. |
+| flip      | `boolean`                   | -       | -                                                       |
+| onClose   | `(() => void)`              | -       | -                                                       |
+| target    | `Element \| null`           | -       | -                                                       |
+| id        | `string`                    | -       | -                                                       |
+| children  | `React.ReactNode`           | -       | -                                                       |
+| className | `string`                    | -       | -                                                       |
+
+### GridPanelContent
+
+**GridPanelContent Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPanelFooter
+
+**GridPanelFooter Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPanelHeader
+
+**GridPanelHeader Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridPanelWrapper
+
+### GridPrintExportMenuItem
+
+**GridPrintExportMenuItem Props:**
+
+| Prop     | Type                                                                                                                                                                                                                                                                                                                                        | Default | Description |
+| :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- |
+| hideMenu | `(() => void)`                                                                                                                                                                                                                                                                                                                              | -       | -           |
+| options  | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | -       | -           |
+
+### GridRedoIcon
+
+**GridRedoIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridRemoveIcon
+
+**GridRemoveIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridRoot
+
+**GridRoot Props:**
+
+| Prop      | Type              | Default | Description                                                                             |
+| :-------- | :---------------- | :------ | :-------------------------------------------------------------------------------------- |
+| sidePanel | `React.ReactNode` | -       | -                                                                                       |
+| sx        | `SxProps<Theme>`  | -       | The system prop that allows defining system overrides as well as additional CSS styles. |
+
+### GridRow
+
+**GridRow Props:**
+
+| Prop                 | Type                                      | Default | Description                                                                                                                                                 |
+| :------------------- | :---------------------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick              | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| columnsTotalWidth\*  | `number`                                  | -       | -                                                                                                                                                           |
+| firstColumnIndex\*   | `number`                                  | -       | -                                                                                                                                                           |
+| focusedColumnIndex\* | `number \| undefined`                     | -       | Determines which cell has focus.&#xA;If `null`, no cell in this row has focus.                                                                              |
+| gridHasFiller\*      | `boolean`                                 | -       | -                                                                                                                                                           |
+| index\*              | `number`                                  | -       | Index of the row in the whole sorted and filtered dataset.&#xA;If some rows above have expanded children, this index also take those children into account. |
+| isFirstVisible\*     | `boolean`                                 | -       | -                                                                                                                                                           |
+| isLastVisible\*      | `boolean`                                 | -       | -                                                                                                                                                           |
+| isNotVisible\*       | `boolean`                                 | -       | -                                                                                                                                                           |
+| lastColumnIndex\*    | `number`                                  | -       | -                                                                                                                                                           |
+| offsetLeft\*         | `number`                                  | -       | -                                                                                                                                                           |
+| onDoubleClick        | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| onMouseEnter         | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| onMouseLeave         | `React.MouseEventHandler<HTMLDivElement>` | -       | -                                                                                                                                                           |
+| pinnedColumns\*      | `GridPinnedColumns`                       | -       | -                                                                                                                                                           |
+| row\*                | `GridRowModel`                            | -       | -                                                                                                                                                           |
+| rowHeight\*          | `number \| 'auto'`                        | -       | -                                                                                                                                                           |
+| rowId\*              | `GridRowId`                               | -       | -                                                                                                                                                           |
+| scrollbarWidth\*     | `number`                                  | -       | -                                                                                                                                                           |
+| selected\*           | `boolean`                                 | -       | -                                                                                                                                                           |
+| showBottomBorder\*   | `boolean`                                 | -       | -                                                                                                                                                           |
+| visibleColumns\*     | `GridStateColDef[]`                       | -       | -                                                                                                                                                           |
+
+### GridRowCheckbox
+
+**GridRowCheckbox Props:**
+
+| Prop           | Type                                                                                                   | Default | Description      |
+| :------------- | :----------------------------------------------------------------------------------------------------- | :------ | :--------------- |
+| name           | `string`                                                                                               | -       | -                |
+| label          | `React.ReactNode`                                                                                      | -       | -                |
+| checked        | `boolean`                                                                                              | -       | -                |
+| indeterminate  | `boolean`                                                                                              | -       | -                |
+| density        | `'standard' \| 'compact'`                                                                              | -       | -                |
+| fullWidth      | `boolean`                                                                                              | -       | -                |
+| material       | `Partial<CheckboxProps>`                                                                               | -       | -                |
+| onChange       | `(((event: React.ChangeEvent<HTMLElement, Element>) => void) \| ((event: React.ChangeEvent) => void))` | -       | -                |
+| rowId\*        | `GridRowId`                                                                                            | -       | The grid row id. |
+| size           | `'small' \| 'medium'`                                                                                  | -       | -                |
+| slotProps      | `{ htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & { ref?: React.Ref<HTMLInputElement> } }`  | -       | -                |
+| tabIndex       | `number`                                                                                               | -       | -                |
+| touchRippleRef | `any`                                                                                                  | -       | -                |
+| autoFocus      | `boolean`                                                                                              | -       | -                |
+| disabled       | `boolean`                                                                                              | -       | -                |
+| inputRef       | `React.Ref<HTMLInputElement>`                                                                          | -       | -                |
+| id             | `string`                                                                                               | -       | -                |
+| className      | `string`                                                                                               | -       | -                |
+| style          | `React.CSSProperties`                                                                                  | -       | -                |
+
+### GridRowCount
+
+**GridRowCount Props:**
+
+| Prop              | Type             | Default | Description |
+| :---------------- | :--------------- | :------ | :---------- |
+| rowCount\*        | `number`         | -       | -           |
+| sx                | `SxProps<Theme>` | -       | -           |
+| visibleRowCount\* | `number`         | -       | -           |
+
+### GridSearchIcon
+
+**GridSearchIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridSelectedRowCount
+
+**GridSelectedRowCount Props:**
+
+| Prop               | Type             | Default | Description |
+| :----------------- | :--------------- | :------ | :---------- |
+| selectedRowCount\* | `number`         | -       | -           |
+| sx                 | `SxProps<Theme>` | -       | -           |
+
+### GridSeparatorIcon
+
+**GridSeparatorIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridShadowScrollArea
+
+Adds scroll shadows above and below content in a scrollable container.
+
+**GridShadowScrollArea Props:**
+
+| Prop       | Type              | Default | Description |
+| :--------- | :---------------- | :------ | :---------- |
+| children\* | `React.ReactNode` | -       | -           |
+
+### GridSkeletonCell
+
+**GridSkeletonCell Props:**
+
+| Prop   | Type               | Default | Description                                                                         |
+| :----- | :----------------- | :------ | :---------------------------------------------------------------------------------- |
+| empty  | `boolean`          | `false` | If `true`, the cell will not display the skeleton but still reserve the cell space. |
+| field  | `string`           | -       | -                                                                                   |
+| height | `number \| 'auto'` | -       | -                                                                                   |
+| type   | `GridColType`      | -       | -                                                                                   |
+| width  | `number \| string` | -       | -                                                                                   |
+| align  | `string`           | -       | -                                                                                   |
+
+### GridTableRowsIcon
+
+**GridTableRowsIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridToolbar
+
+**GridToolbar Props:**
+
+| Prop                | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                                    |
+| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------- |
+| csvOptions          | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                       | -       | -                                              |
+| printOptions        | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                          | -       | -                                              |
+| quickFilterProps    | `GridToolbarQuickFilterProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -       | Props passed to the quick filter component.    |
+| showHistoryControls | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`  | Show the history controls (undo/redo buttons). |
+| showQuickFilter     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`  | Show the quick filter component.               |
+| slotProps           | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside.           |
+| sx                  | `SxProps<Theme>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                              |
+
+### GridToolbarColumnsButton
+
+**GridToolbarColumnsButton Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarContainer
+
+**GridToolbarContainer Props:**
+
+| Prop | Type             | Default | Description |
+| :--- | :--------------- | :------ | :---------- |
+| sx   | `SxProps<Theme>` | -       | -           |
+
+### GridToolbarDensitySelector
+
+**GridToolbarDensitySelector Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarExport
+
+**GridToolbarExport Props:**
+
+| Prop         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| csvOptions   | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                       | -       | -                                    |
+| printOptions | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }`                                                                                                                                                                                                                                                                                          | -       | -                                    |
+| slotProps    | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarExportContainer
+
+**GridToolbarExportContainer Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default | Description                          |
+| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarFilterButton
+
+**GridToolbarFilterButton Props:**
+
+| Prop      | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Default | Description                          |
+| :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------- |
+| slotProps | `{ button?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides>; tooltip?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { children: ReactElement; enterDelay?: number; title: React.ReactNode; disableInteractive?: boolean } & BaseTooltipPropsOverrides>; badge?: Partial<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { badgeContent?: React.ReactNode; children?: React.ReactNode; color?: 'primary' \| 'default' \| 'error'; invisible?: boolean; overlap?: 'circular'; variant?: 'dot'; style?: React.CSSProperties } & BaseBadgePropsOverrides> }` | `{}`    | The props used for each slot inside. |
+
+### GridToolbarQuickFilter
+
+**GridToolbarQuickFilter Props:**
+
+| Prop                 | Type                          | Default                                  | Description                                                                                       |
+| :------------------- | :---------------------------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------ |
+| debounceMs           | `number`                      | `150`                                    | The debounce time in milliseconds.                                                                |
+| quickFilterFormatter | `((values: any[]) => string)` | `(values: string[]) => values.join(' ')` | Function responsible for formatting values of quick filter in a string when the model is modified |
+| quickFilterParser    | `((input: string) => any[])`  | `(searchText: string) => searchText      |
+
+.split(' ')
+.filter((word) => word !== '')`| Function responsible for parsing text input in an array of independent values for quick filtering. |
+| slotProps            |`{ root: TextFieldProps }`   | -                                                                               | -                                                                                                  |
+| className            |`string` | - | - |
+
+### GridTripleDotsVerticalIcon
+
+**GridTripleDotsVerticalIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridUndoIcon
+
+**GridUndoIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridViewColumnIcon
+
+**GridViewColumnIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridViewHeadlineIcon
+
+**GridViewHeadlineIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridViewStreamIcon
+
+**GridViewStreamIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### GridVisibilityOffIcon
+
+**GridVisibilityOffIcon Props:**
+
+| Prop        | Type                                          | Default | Description |
+| :---------- | :-------------------------------------------- | :------ | :---------- |
+| color       | `string`                                      | -       | -           |
+| fontSize    | `'small' \| 'medium' \| 'large' \| 'inherit'` | -       | -           |
+| titleAccess | `string`                                      | -       | -           |
+| className   | `string`                                      | -       | -           |
+| style       | `React.CSSProperties`                         | -       | -           |
+
+### QuickFilter
+
+The top level Quick Filter component that provides context to child components.
+It renders a `<div />` element.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
+
+**QuickFilter Props:**
+
+| Prop             | Type                                                        | Default                                                                       | Description                                                                                        |
+| :--------------- | :---------------------------------------------------------- | :---------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- |
+| debounceMs       | `number`                                                    | `150`                                                                         | The debounce time in milliseconds.                                                                 |
+| defaultExpanded  | `boolean`                                                   | `false`                                                                       | The default expanded state of the quick filter control.                                            |
+| expanded         | `boolean`                                                   | -                                                                             | The expanded state of the quick filter control.                                                    |
+| formatter        | `((values: any[]) => string)`                               | `(values: string[]) => values.join(' ')`                                      | Function responsible for formatting values of quick filter in a string when the model is modified  |
+| onExpandedChange | `((expanded: boolean) => void)`                             | -                                                                             | Callback function that is called when the quick filter input is expanded or collapsed.             |
+| parser           | `((input: string) => any[])`                                | `(searchText: string) => searchText.split(' ').filter((word) => word !== '')` | Function responsible for parsing text input in an array of independent values for quick filtering. |
+| className        | `string \| ((state: QuickFilterState) => string)`           | -                                                                             | Override or extend the styles applied to the component.                                            |
+| render           | `RenderProp<React.ComponentProps<'div'>, QuickFilterState>` | -                                                                             | A function to customize rendering of the component.                                                |
+
+### QuickFilterClear
+
+A button that resets the filter value.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilterClear API](https://mui.com/x/api/data-grid/quick-filter-clear/)
+
+**QuickFilterClear Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                       |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                 | -       | -                                                       |
+| className      | `string \| ((state: QuickFilterState) => string)`                                                                                                                                                                                                                                                                                                                                                                                 | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| render         | `RenderProp<{ ref?: Ref<HTMLButtonElement>; className?: string; id?: string; style?: React.CSSProperties; tabIndex?: number; title?: string; role?: string; children?: React.ReactNode; disabled?: boolean; size?: 'small' \| 'medium' \| 'large'; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }, QuickFilterState>` | -       | A function to customize rendering of the component.     |
+
+### QuickFilterControl
+
+A component that takes user input and filters row data.
+It renders the `baseTextField` slot.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilterControl API](https://mui.com/x/api/data-grid/quick-filter-control/)
+
+**QuickFilterControl Props:**
+
+| Prop         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default | Description                                             |
+| :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| label        | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | -                                                       |
+| value        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| autoComplete | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| color        | `'primary' \| 'error'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| error        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| fullWidth    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| helperText   | `string \| null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -       | -                                                       |
+| material     | `Partial<TextFieldProps>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| multiline    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| onChange     | `(((event: React.ChangeEvent<HTMLElement, Element>) => void) \| ((event: React.ChangeEvent) => void))`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| placeholder  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| role         | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| size         | `'small' \| 'medium'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| slotProps    | `{ input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| tabIndex     | `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| type         | `React.HTMLInputTypeAttribute`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| autoFocus    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| disabled     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -       | -                                                       |
+| inputRef     | `React.Ref<HTMLInputElement>`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| id           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                       |
+| className    | `string \| ((state: QuickFilterState) => string)`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | -       | Override or extend the styles applied to the component. |
+| style        | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| render       | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { role?: string; autoComplete?: string; color?: 'primary' \| 'error'; disabled?: boolean; error?: boolean; fullWidth?: boolean; helperText?: string \| null; id?: string; inputRef?: React.Ref<HTMLInputElement>; label?: React.ReactNode; onChange?: React.ChangeEventHandler; placeholder?: string; size?: 'small' \| 'medium'; slotProps?: { input?: Omit<Partial<InputProps>, 'slotProps'>; inputLabel?: {}; htmlInput?: React.InputHTMLAttributes<HTMLInputElement> }; tabIndex?: number; type?: React.HTMLInputTypeAttribute; value?: string; ref?: Ref<HTMLInputElement>; multiline?: boolean; autoFocus?: boolean } & BaseTextFieldPropsOverrides, QuickFilterState>` | -       | A function to customize rendering of the component.     |
+
+### QuickFilterTrigger
+
+A button that expands/collapses the quick filter.
+It renders the `baseButton` slot.
+
+Demos:
+
+- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
+
+API:
+
+- [QuickFilterTrigger API](https://mui.com/x/api/data-grid/quick-filter-trigger/)
+
+**QuickFilterTrigger Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                          | Default | Description                                             |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :------------------------------------------------------ |
+| material       | `Partial<ButtonProps>`                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                       |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                              | -       | -                                                       |
+| startIcon      | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                       |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                       |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                             | -       | -                                                       |
+| className      | `string \| ((state: QuickFilterState) => string)`                                                                                                                                                                                                                                                                                                                                             | -       | Override or extend the styles applied to the component. |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                         | -       | -                                                       |
+| render         | `RenderProp<React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & { ref?: Ref<HTMLButtonElement>; children?: React.ReactNode; disabled?: boolean; id?: string; role?: string; size?: 'small' \| 'medium' \| 'large'; startIcon?: React.ReactNode; tabIndex?: number; title?: string; touchRippleRef?: any } & BaseButtonPropsOverrides, QuickFilterState>` | -       | A function to customize rendering of the component.     |
+
+### renderActionsCell
+
+**Parameters:**
+
+| Parameter | Type                                                           | Default | Description |
+| :-------- | :------------------------------------------------------------- | :------ | :---------- |
+| params    | `GridLongTextCellProps<any, any, any, GridTreeNodeWithRender>` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditBooleanCell
+
+**Parameters:**
+
+| Parameter | Type                       | Default | Description |
+| :-------- | :------------------------- | :------ | :---------- |
+| params    | `GridEditBooleanCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditDateCell
+
+**Parameters:**
+
+| Parameter | Type                                                              | Default | Description |
+| :-------- | :---------------------------------------------------------------- | :------ | :---------- |
+| params    | `GridEditBooleanCellProps<any, any, any, GridTreeNodeWithRender>` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditInputCell
+
+**Parameters:**
+
+| Parameter | Type                     | Default | Description |
+| :-------- | :----------------------- | :------ | :---------- |
+| params    | `GridEditInputCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditLongTextCell
+
+**Parameters:**
+
+| Parameter | Type                        | Default | Description |
+| :-------- | :-------------------------- | :------ | :---------- |
+| params    | `GridEditLongTextCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderEditSingleSelectCell
+
+**Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| params    | `GridEditSingleSelectCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### renderLongTextCell
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| params    | `GridLongTextCellProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = React.JSX.Element;
+```
+
+### Toolbar
+
+The top level Toolbar component that provides context to child components.
+It renders a styled `<div />` element.
+
+Demos:
+
+- [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+
+API:
+
+- [Toolbar API](https://mui.com/x/api/data-grid/toolbar/)
+
+**Toolbar Props:**
+
+| Prop   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default | Description                                         |
+| :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| render | `RenderProp<GridPanelWrapperProps<Theme> & Pick<GridEditBooleanCellProps<GridSkeletonCellProps<HTMLDivElement>, HTMLDivElement>, 'defaultChecked' \| 'defaultValue' \| 'suppressContentEditableWarning' \| 'suppressHydrationWarning' \| 'accessKey' \| 'autoCapitalize' \| 'autoFocus' \| 'className' \| 'contentEditable' \| 'contextMenu' \| 'dir' \| 'draggable' \| 'enterKeyHint' \| 'hidden' \| 'id' \| 'lang' \| 'nonce' \| 'slot' \| 'spellCheck' \| 'style' \| 'tabIndex' \| 'title' \| 'translate' \| 'radioGroup' \| 'role' \| 'about' \| 'content' \| 'datatype' \| 'inlist' \| 'prefix' \| 'property' \| 'rel' \| 'resource' \| 'rev' \| 'typeof' \| 'vocab' \| 'autoCorrect' \| 'autoSave' \| 'color' \| 'itemProp' \| 'itemScope' \| 'itemType' \| 'itemID' \| 'itemRef' \| 'results' \| 'security' \| 'unselectable' \| 'popover' \| 'popoverTargetAction' \| 'popoverTarget' \| 'inert' \| 'inputMode' \| 'is' \| 'exportparts' \| 'part' \| 'tw' \| 'aria-activedescendant' \| 'aria-atomic' \| 'aria-autocomplete' \| 'aria-braillelabel' \| 'aria-brailleroledescription' \| 'aria-busy' \| 'aria-checked' \| 'aria-colcount' \| 'aria-colindex' \| 'aria-colindextext' \| 'aria-colspan' \| 'aria-controls' \| 'aria-current' \| 'aria-describedby' \| 'aria-description' \| 'aria-details' \| 'aria-disabled' \| 'aria-dropeffect' \| 'aria-errormessage' \| 'aria-expanded' \| 'aria-flowto' \| 'aria-grabbed' \| 'aria-haspopup' \| 'aria-hidden' \| 'aria-invalid' \| 'aria-keyshortcuts' \| 'aria-label' \| 'aria-labelledby' \| 'aria-level' \| 'aria-live' \| 'aria-modal' \| 'aria-multiline' \| 'aria-multiselectable' \| 'aria-orientation' \| 'aria-owns' \| 'aria-placeholder' \| 'aria-posinset' \| 'aria-pressed' \| 'aria-readonly' \| 'aria-relevant' \| 'aria-required' \| 'aria-roledescription' \| 'aria-rowcount' \| 'aria-rowindex' \| 'aria-rowindextext' \| 'aria-rowspan' \| 'aria-selected' \| 'aria-setsize' \| 'aria-sort' \| 'aria-valuemax' \| 'aria-valuemin' \| 'aria-valuenow' \| 'aria-valuetext' \| 'children' \| 'dangerouslySetInnerHTML' \| 'onCopy' \| 'onCopyCapture' \| 'onCut' \| 'onCutCapture' \| 'onPaste' \| 'onPasteCapture' \| 'onCompositionEnd' \| 'onCompositionEndCapture' \| 'onCompositionStart' \| 'onCompositionStartCapture' \| 'onCompositionUpdate' \| 'onCompositionUpdateCapture' \| 'onFocus' \| 'onFocusCapture' \| 'onBlur' \| 'onBlurCapture' \| 'onChange' \| 'onChangeCapture' \| 'onBeforeInput' \| 'onBeforeInputCapture' \| 'onInput' \| 'onInputCapture' \| 'onReset' \| 'onResetCapture' \| 'onSubmit' \| 'onSubmitCapture' \| 'onInvalid' \| 'onInvalidCapture' \| 'onLoad' \| 'onLoadCapture' \| 'onError' \| 'onErrorCapture' \| 'onKeyDown' \| 'onKeyDownCapture' \| 'onKeyPress' \| 'onKeyPressCapture' \| 'onKeyUp' \| 'onKeyUpCapture' \| 'onAbort' \| 'onAbortCapture' \| 'onCanPlay' \| 'onCanPlayCapture' \| 'onCanPlayThrough' \| 'onCanPlayThroughCapture' \| 'onDurationChange' \| 'onDurationChangeCapture' \| 'onEmptied' \| 'onEmptiedCapture' \| 'onEncrypted' \| 'onEncryptedCapture' \| 'onEnded' \| 'onEndedCapture' \| 'onLoadedData' \| 'onLoadedDataCapture' \| 'onLoadedMetadata' \| 'onLoadedMetadataCapture' \| 'onLoadStart' \| 'onLoadStartCapture' \| 'onPause' \| 'onPauseCapture' \| 'onPlay' \| 'onPlayCapture' \| 'onPlaying' \| 'onPlayingCapture' \| 'onProgress' \| 'onProgressCapture' \| 'onRateChange' \| 'onRateChangeCapture' \| 'onSeeked' \| 'onSeekedCapture' \| 'onSeeking' \| 'onSeekingCapture' \| 'onStalled' \| 'onStalledCapture' \| 'onSuspend' \| 'onSuspendCapture' \| 'onTimeUpdate' \| 'onTimeUpdateCapture' \| 'onVolumeChange' \| 'onVolumeChangeCapture' \| 'onWaiting' \| 'onWaitingCapture' \| 'onAuxClick' \| 'onAuxClickCapture' \| 'onClick' \| 'onClickCapture' \| 'onContextMenu' \| 'onContextMenuCapture' \| 'onDoubleClick' \| 'onDoubleClickCapture' \| 'onDrag' \| 'onDragCapture' \| 'onDragEnd' \| 'onDragEndCapture' \| 'onDragEnter' \| 'onDragEnterCapture' \| 'onDragExit' \| 'onDragExitCapture' \| 'onDragLeave' \| 'onDragLeaveCapture' \| 'onDragOver' \| 'onDragOverCapture' \| 'onDragStart' \| 'onDragStartCapture' \| 'onDrop' \| 'onDropCapture' \| 'onMouseDown' \| 'onMouseDownCapture' \| 'onMouseEnter' \| 'onMouseLeave' \| 'onMouseMove' \| 'onMouseMoveCapture' \| 'onMouseOut' \| 'onMouseOutCapture' \| 'onMouseOver' \| 'onMouseOverCapture' \| 'onMouseUp' \| 'onMouseUpCapture' \| 'onSelect' \| 'onSelectCapture' \| 'onTouchCancel' \| 'onTouchCancelCapture' \| 'onTouchEnd' \| 'onTouchEndCapture' \| 'onTouchMove' \| 'onTouchMoveCapture' \| 'onTouchStart' \| 'onTouchStartCapture' \| 'onPointerDown' \| 'onPointerDownCapture' \| 'onPointerMove' \| 'onPointerMoveCapture' \| 'onPointerUp' \| 'onPointerUpCapture' \| 'onPointerCancel' \| 'onPointerCancelCapture' \| 'onPointerEnter' \| 'onPointerLeave' \| 'onPointerOver' \| 'onPointerOverCapture' \| 'onPointerOut' \| 'onPointerOutCapture' \| 'onGotPointerCapture' \| 'onGotPointerCaptureCapture' \| 'onLostPointerCapture' \| 'onLostPointerCaptureCapture' \| 'onScroll' \| 'onScrollCapture' \| 'onScrollEnd' \| 'onScrollEndCapture' \| 'onWheel' \| 'onWheelCapture' \| 'onAnimationStart' \| 'onAnimationStartCapture' \| 'onAnimationEnd' \| 'onAnimationEndCapture' \| 'onAnimationIteration' \| 'onAnimationIterationCapture' \| 'onToggle' \| 'onBeforeToggle' \| 'onTransitionCancel' \| 'onTransitionCancelCapture' \| 'onTransitionEnd' \| 'onTransitionEndCapture' \| 'onTransitionRun' \| 'onTransitionRunCapture' \| 'onTransitionStart' \| 'onTransitionStartCapture' \| 'ref' \| 'key'>>` | -       | A function to customize rendering of the component. |
+
+### ToolbarButton
+
+A button for performing actions from the toolbar.
+It renders the `baseIconButton` slot.
+
+Demos:
+
+- [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+
+API:
+
+- [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
+
+**ToolbarButton Props:**
+
+| Prop           | Type                                                                                                                                                                                                                                                                                                                                                                                                            | Default | Description                                         |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------- |
+| label          | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| color          | `'default' \| 'inherit' \| 'primary'`                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| edge           | `'start' \| 'end' \| false`                                                                                                                                                                                                                                                                                                                                                                                     | -       | -                                                   |
+| material       | `Partial<IconButtonProps>`                                                                                                                                                                                                                                                                                                                                                                                      | -       | -                                                   |
+| role           | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| size           | `'small' \| 'medium' \| 'large'`                                                                                                                                                                                                                                                                                                                                                                                | -       | -                                                   |
+| tabIndex       | `number`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| title          | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| touchRippleRef | `any`                                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| disabled       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                       | -       | -                                                   |
+| id             | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| children       | `React.ReactNode`                                                                                                                                                                                                                                                                                                                                                                                               | -       | -                                                   |
+| className      | `string`                                                                                                                                                                                                                                                                                                                                                                                                        | -       | -                                                   |
+| style          | `React.CSSProperties`                                                                                                                                                                                                                                                                                                                                                                                           | -       | -                                                   |
+| render         | `RenderProp<{ ref?: Ref<HTMLButtonElement>; className?: string; id?: string; style?: React.CSSProperties; tabIndex?: number; title?: string; role?: string; children?: React.ReactNode; disabled?: boolean; size?: 'small' \| 'medium' \| 'large'; touchRippleRef?: any; label?: string; color?: 'default' \| 'inherit' \| 'primary'; edge?: 'start' \| 'end' \| false; material?: Partial<IconButtonProps> }>` | -       | A function to customize rendering of the component. |
+
+## Additional Types
+
+### ColumnHeaderFilterIconButtonProps
+
+```typescript
+type ColumnHeaderFilterIconButtonProps = {
+  field: string;
+  counter?: number;
+  onClick?: (
+    params: GridColumnHeaderParams<GridValidRowModel, any, any>,
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+};
+```
+
+### ColumnsPanelState
+
+```typescript
+type ColumnsPanelState = {
+  /** If `true`, the columns panel is open. */
+  open: boolean;
+};
+```
+
+### ColumnsPanelTriggerProps
+
+```typescript
+type ColumnsPanelTriggerProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    ColumnsPanelState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: ColumnsPanelState) => string);
+};
+```
+
+### ExportCsvProps
+
+```typescript
+type ExportCsvProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+} & BaseButtonPropsOverrides & {
+    render?: RenderProp<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    options?: GridCsvExportOptions;
+  };
+```
+
+### ExportPrintProps
+
+```typescript
+type ExportPrintProps = React.DOMAttributes<HTMLElement> & {
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  ref?: Ref<HTMLButtonElement>;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  id?: string;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any;
+} & BaseButtonPropsOverrides & {
+    render?: RenderProp<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    options?: GridPrintExportOptions;
+  };
+```
+
+### FilterColumnsArgs
+
+```typescript
+type FilterColumnsArgs = {
+  field: string;
+  columns: GridStateColDef[];
+  currentFilters: GridFilterItem[];
+};
+```
+
+### FilterPanelState
+
+```typescript
+type FilterPanelState = {
+  /** If `true`, the filter panel is open. */
+  open: boolean;
+  /** The number of active filters. */
+  filterCount: number;
+};
+```
+
+### FilterPanelTriggerProps
+
+```typescript
+type FilterPanelTriggerProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    FilterPanelState
+  >;
+  /** A function to customize rendering of the component. */
+  className?: string | ((state: FilterPanelState) => string);
+};
+```
+
+### GetColumnForNewFilterArgs
+
+```typescript
+type GetColumnForNewFilterArgs = { currentFilters: GridFilterItem[]; columns: GridStateColDef[] };
+```
+
+### GridActionsCellItemProps
+
+```typescript
+type GridActionsCellItemProps = (
+  | {
+      showInMenu?: false;
+      label: string;
+      ref?: Ref<HTMLButtonElement>;
+      id?: string;
+      tabIndex?: number;
+      title?: string;
+      role?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      size?: 'small' | 'medium' | 'large';
+      touchRippleRef?: any;
+      label?: string;
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    }
+  | {
+      showInMenu: true;
+      closeMenuOnClick?: boolean;
+      closeMenu?: () => void;
+      label: React.ReactNode;
+      autoFocus?: boolean;
+      inert?: boolean;
+      material?: Partial<MenuItemProps>;
+      iconStart?: React.ReactNode;
+      iconEnd?: React.ReactNode;
+      selected?: boolean;
+      value?: number | string | string[];
+    }
+) & {
+  icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
+  /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+  component?: React.ElementType;
+  icon: ReactElement;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  disabled?: boolean;
+};
+```
+
+### GridApiContext
+
+```typescript
+type GridApiContext = React.Context<unknown>;
+```
+
+### GridCellProps
+
+```typescript
+type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
+  align: GridAlignment;
+  className?: string;
+  colIndex: number;
+  column: GridStateColDef;
+  row: GridRowModel;
+  rowId: GridRowId;
+  rowNode: GridTreeNode;
+  width: number;
+  colSpan?: number;
+  disableDragEvents?: boolean;
+  isNotVisible: boolean;
+  pinnedOffset?: number;
+  pinnedPosition: unknown;
+  showRightBorder: boolean;
+  showLeftBorder: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+};
+```
+
+### GridColumnHeaderMenuProps
+
+```typescript
+type GridColumnHeaderMenuProps = {
+  columnMenuId?: string;
+  columnMenuButtonId?: string;
+  ContentComponent: React.JSXElementConstructor<any>;
+  contentComponentProps?: any;
+  field: string;
+  open: boolean;
+  target: HTMLElement | null;
+  onExited?: (node: HTMLElement | null) => void;
+};
+```
+
+### GridColumnHeaderSeparatorProps
+
+```typescript
+type GridColumnHeaderSeparatorProps = {
+  resizable: boolean;
+  resizing: boolean;
+  height: number;
+  side?: unknown;
+};
+```
+
+### GridColumnHeaderSeparatorSides
+
+| Member | Value   | Description |
+| :----- | :------ | :---------- |
+| Left   | `left`  | -           |
+| Right  | `right` | -           |
+
+### GridColumnHeaderSortIconProps
+
+```typescript
+type GridColumnHeaderSortIconProps = {
+  ref?: Ref<HTMLButtonElement>;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  onClick?:
+    | ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void)
+    | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void);
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  field: string;
+  direction: GridSortDirection;
+  index?: number;
+  sortingOrder: GridSortDirection[];
+};
+```
+
+### GridColumnHeaderTitleProps
+
+```typescript
+type GridColumnHeaderTitleProps = {
+  label: string;
+  columnWidth: number;
+  description?: React.ReactNode;
+};
+```
+
+### GridColumnMenuContainerProps
+
+```typescript
+type GridColumnMenuContainerProps = {
+  hideMenu: (event: React.SyntheticEvent) => void;
+  colDef: GridColDef;
+  open: boolean;
+  id?: string;
+  labelledby?: string;
+};
+```
+
+### GridColumnMenuItemProps
+
+```typescript
+type GridColumnMenuItemProps = {
+  [key: string]: any;
+  colDef: GridColDef;
+  onClick: (event: React.MouseEvent<any, MouseEvent>) => void;
+};
+```
+
+### GridColumnMenuProps
+
+```typescript
+type GridColumnMenuProps = {
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots?: { [key: string]: React.JSXElementConstructor<any> | null };
+  id?: string;
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps?: { [key: string]: GridColumnMenuSlotProps };
+  colDef: GridColDef;
+  open: boolean;
+  hideMenu: (event: React.SyntheticEvent) => void;
+  labelledby?: string;
+};
+```
+
+### GridColumnsManagementProps
+
+```typescript
+type GridColumnsManagementProps = {
+  sort?: 'asc' | 'desc';
+  searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+  searchInputProps?: Partial<TextFieldProps>;
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs?: number;
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField?: boolean;
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle?: boolean;
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton?: boolean;
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode?: 'all' | 'filteredOnly';
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @returns The list of togglable columns' field names.
+   */
+  getTogglableColumns?: (columns: GridColDef[]) => string[];
+};
+```
+
+### GridColumnsPanelProps
+
+```typescript
+type GridColumnsPanelProps = {};
+```
+
+### GridColumnUnsortedIconProps
+
+```typescript
+type GridColumnUnsortedIconProps = {
+  sortingOrder: GridSortDirection[];
+  className?: string;
+  style?: React.CSSProperties;
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
+  color?: string;
+  titleAccess?: string;
+};
+```
+
+### GridCsvExportMenuItemProps
+
+```typescript
+type GridCsvExportMenuItemProps = {
+  hideMenu?: () => void;
+  options?: {
+    delimiter?: string;
+    fileName?: string;
+    utf8WithBom?: boolean;
+    includeHeaders?: boolean;
+    includeColumnGroupsHeaders?: boolean;
+    getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    shouldAppendQuotes?: boolean;
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+};
+```
+
+### GridEditBooleanCellProps
+
+```typescript
+type GridEditBooleanCellProps = {
+  [prop: string]: any;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLInputElement, Element>,
+    newValue: boolean,
+  ) => void | Promise<void>;
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditDateCellProps
+
+```typescript
+type GridEditDateCellProps = {
+  [prop: string]: any;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLInputElement, Element>,
+    newValue: Date | null,
+  ) => void | Promise<void>;
+  slotProps?: {
+    root?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: React.Ref<HTMLElement>;
+        inputRef?: React.Ref<HTMLInputElement>;
+        fullWidth?: boolean;
+        type?: React.HTMLInputTypeAttribute;
+        value?: string;
+        onChange: React.ChangeEventHandler;
+        disabled?: boolean;
+        endAdornment?: React.ReactNode;
+        startAdornment?: React.ReactNode;
+        slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> };
+      } & BaseInputPropsOverrides
+    >;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditInputCellProps
+
+```typescript
+type GridEditInputCellProps = {
+  [prop: string]: any;
+  debounceMs?: number;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLInputElement, Element>,
+    newValue: string,
+  ) => void | Promise<void>;
+  slotProps?: {
+    root?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: React.Ref<HTMLElement>;
+        inputRef?: React.Ref<HTMLInputElement>;
+        fullWidth?: boolean;
+        type?: React.HTMLInputTypeAttribute;
+        value?: string;
+        onChange: React.ChangeEventHandler;
+        disabled?: boolean;
+        endAdornment?: React.ReactNode;
+        startAdornment?: React.ReactNode;
+        slotProps?: { htmlInput?: React.InputHTMLAttributes<HTMLInputElement> };
+      } & BaseInputPropsOverrides
+    >;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditLongTextCellProps
+
+```typescript
+type GridEditLongTextCellProps = {
+  [prop: string]: any;
+  debounceMs?: number;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (
+    event: React.ChangeEvent<HTMLTextAreaElement, Element>,
+    newValue: string,
+  ) => void | Promise<void>;
+  /** Props passed to internal components. */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement>;
+    value?: React.HTMLAttributes<HTMLDivElement>;
+    popper?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        role?: string;
+        ref?: Ref<HTMLDivElement>;
+        open: boolean;
+        children?: React.ReactNode;
+        clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+        clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+        flip?: boolean;
+        focusTrap?: boolean;
+        onExited?: (node: HTMLElement | null) => void;
+        onClickAway?: (event: MouseEvent | TouchEvent) => void;
+        onDidShow?: () => void;
+        onDidHide?: () => void;
+        id?: string;
+        target?: Element | null;
+        transition?: boolean;
+        placement?: Placement;
+      } & BasePopperPropsOverrides
+    >;
+    popperContent?: React.HTMLAttributes<HTMLDivElement>;
+    textarea?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: React.Ref<HTMLTextAreaElement>;
+        inputRef?: React.Ref<HTMLTextAreaElement>;
+        fullWidth?: boolean;
+        value?: string;
+        onChange: React.ChangeEventHandler<HTMLTextAreaElement, Element>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+        disabled?: boolean;
+        autoFocus?: boolean;
+        minRows?: number;
+        maxRows?: number;
+      } & BaseTextareaPropsOverrides
+    >;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: string | null;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: string | null;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridEditSingleSelectCellProps
+
+```typescript
+type GridEditSingleSelectCellProps = {
+  [prop: string]: any;
+  /**
+   * Callback called when the value is changed by the user.
+   * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: React.SyntheticEvent, newValue: any) => void | Promise<void>;
+  /** If true, the select opens by default. */
+  initialOpen?: boolean;
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: V;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: F;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+  isValidating?: boolean;
+  isProcessingProps?: boolean;
+  changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+};
+```
+
+### GridExportDisplayOptions
+
+```typescript
+type GridExportDisplayOptions = {
+  /**
+   * If `true`, this export option will be removed from the GridToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+};
+```
+
+### GridExportMenuItemProps
+
+```typescript
+type GridExportMenuItemProps<Options extends {}> = {
+  hideMenu?: () => void;
+  options?: Options & GridExportDisplayOptions;
+};
+```
+
+### GridFilterFormProps
+
+```typescript
+type GridFilterFormProps = {
+  /** The [[GridFilterItem]] representing this form. */
+  item: GridFilterItem;
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
+  hasMultipleFilters: boolean;
+  /** If `true`, the logic operator field is visible. */
+  showMultiFilterOperators?: boolean;
+  /** If `true`, disables the logic operator field but still renders it. */
+  disableMultiFilterOperator?: boolean;
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
+  focusElementRef?: React.Ref<any>;
+  /** Callback called when the operator, column field or value is changed. */
+  applyFilterChanges: (item: GridFilterItem) => void;
+  /** Callback called when the logic operator is changed. */
+  applyMultiFilterOperatorChanges: (operator: unknown) => void;
+  /** Callback called when the delete button is clicked. */
+  deleteFilter: (item: GridFilterItem) => void;
+  /**
+   * Allows to filter the columns displayed in the filter form.
+   * @returns The filtered fields array.
+   */
+  filterColumns?: (args: FilterColumnsArgs) => string[];
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators?: unknown[];
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort?: 'asc' | 'desc';
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
+  deleteIconProps?: any;
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
+  logicOperatorInputProps?: any;
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
+  operatorInputProps?: any;
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
+  columnInputProps?: any;
+  /**
+   * `true` if the filter is disabled/read only.
+   * i.e. `colDef.fiterable = false` but passed in `filterModel`
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
+  valueInputProps?: any;
+  /** @ignore - do not document. */
+  children?: React.ReactNode;
+};
+```
+
+### GridFilterInputBooleanProps
+
+```typescript
+type GridFilterInputBooleanProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+};
+```
+
+### GridFilterInputDateProps
+
+```typescript
+type GridFilterInputDateProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+  type?: 'date' | 'datetime-local';
+};
+```
+
+### GridFilterInputMultipleSingleSelectProps
+
+```typescript
+type GridFilterInputMultipleSingleSelectProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'> };
+  type?: 'singleSelect';
+};
+```
+
+### GridFilterInputMultipleValueProps
+
+```typescript
+type GridFilterInputMultipleValueProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: Omit<AutocompleteProps<string, true, false, true>, 'options'> };
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+```
+
+### GridFilterInputSingleSelectProps
+
+```typescript
+type GridFilterInputSingleSelectProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+  type?: 'singleSelect';
+};
+```
+
+### GridFooterContainerProps
+
+```typescript
+type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
+```
+
+### GridGenericColumnMenuProps
+
+```typescript
+type GridGenericColumnMenuProps = {
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: { [key: string]: React.JSXElementConstructor<any> };
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: { [key: string]: GridColumnMenuSlotProps };
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots?: { [key: string]: React.JSXElementConstructor<any> | null };
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps?: { [key: string]: GridColumnMenuSlotProps };
+  hideMenu: (event: React.SyntheticEvent) => void;
+  colDef: GridColDef;
+  open: boolean;
+  id?: string;
+  labelledby?: string;
+};
+```
+
+### GridLoadingOverlayProps
+
+```typescript
+type GridLoadingOverlayProps = {
+  /**
+   * The variant of the overlay.
+   * @default 'linear-progress'
+   */
+  variant?: GridLoadingOverlayVariant;
+  /**
+   * The variant of the overlay when no rows are displayed.
+   * @default 'skeleton'
+   */
+  noRowsVariant?: GridLoadingOverlayVariant;
+  sx?: SxProps<Theme>;
+};
+```
+
+### GridLongTextCellProps
+
+```typescript
+type GridLongTextCellProps = {
+  /**
+   * A function to customize the content rendered in the popup.
+   * @returns The content to render in the popup.
+   */
+  renderContent?: (value: string | null) => React.ReactNode;
+  /** Props passed to internal components. */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement>;
+    content?: React.HTMLAttributes<HTMLDivElement>;
+    expandButton?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    collapseButton?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    popper?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        role?: string;
+        ref?: Ref<HTMLDivElement>;
+        open: boolean;
+        children?: React.ReactNode;
+        clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
+        clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
+        flip?: boolean;
+        focusTrap?: boolean;
+        onExited?: (node: HTMLElement | null) => void;
+        onClickAway?: (event: MouseEvent | TouchEvent) => void;
+        onDidShow?: () => void;
+        onDidHide?: () => void;
+        id?: string;
+        target?: Element | null;
+        transition?: boolean;
+        placement?: Placement;
+      } & BasePopperPropsOverrides
+    >;
+    popperContent?: React.HTMLAttributes<HTMLDivElement>;
+  };
+  /** GridApi that let you manipulate the grid. */
+  api: GridApiCommunity;
+  /** The grid row id. */
+  id: GridRowId;
+  /** The column field of the cell that triggered the event. */
+  field: string;
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value?: string | null;
+  /** The cell value formatted with the column valueFormatter. */
+  formattedValue?: string | null;
+  /** The row model of the row that the current cell belongs to. */
+  row: any;
+  /** The node of the row that the current cell belongs to. */
+  rowNode: GridTreeNodeWithRender;
+  /** The column of the row that the current cell belongs to. */
+  colDef: GridStateColDef;
+  /** If true, the cell is editable. */
+  isEditable?: boolean;
+  /** The mode of the cell. */
+  cellMode: GridCellMode;
+  /** If true, the cell is the active element. */
+  hasFocus: boolean;
+  /** the tabIndex value. */
+  tabIndex: 0 | -1;
+};
+```
+
+### GridMenuProps
+
+```typescript
+type GridMenuProps = {
+  open: boolean;
+  target: HTMLElement | null;
+  onClose: (event?: React.KeyboardEvent | MouseEvent | TouchEvent) => void;
+  position?: MenuPosition;
+  children: React.ReactNode;
+  className?: string;
+  onExited?: (node: HTMLElement | null) => void;
+};
+```
+
+### GridOverlayProps
+
+```typescript
+type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
+```
+
+### gridPanelClasses
+
+```typescript
+type gridPanelClasses = Record<'panel' | 'paper', string>;
+```
+
+### GridPanelClasses
+
+```typescript
+type GridPanelClasses = {
+  /** Styles applied to the root element. */
+  panel: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+};
+```
+
+### GridPanelProps
+
+```typescript
+type GridPanelProps = {
+  ref?: React.Ref<HTMLDivElement>;
+  children?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<GridPanelClasses>;
+  open: boolean;
+  onClose?: () => void;
+  className?: string;
+  id?: string;
+  flip?: boolean;
+  target?: Element | null;
+};
+```
+
+### GridPanelWrapperProps
+
+```typescript
+type GridPanelWrapperProps = {};
+```
+
+### GridPrintExportMenuItemProps
+
+```typescript
+type GridPrintExportMenuItemProps = {
+  hideMenu?: () => void;
+  options?: {
+    fileName?: string;
+    hideToolbar?: boolean;
+    hideFooter?: boolean;
+    includeCheckboxes?: boolean;
+    copyStyles?: boolean;
+    bodyClassName?: string;
+    pageStyle?: string | (() => string);
+    getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+};
+```
+
+### GridRootProps
+
+```typescript
+type GridRootProps = {
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  sidePanel?: React.ReactNode;
+};
+```
+
+### GridRowCountProps
+
+```typescript
+type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> &
+  RowCountProps & { sx?: SxProps<Theme> };
+```
+
+### GridRowProps
+
+```typescript
+type GridRowProps = {
+  row: GridRowModel;
+  rowId: GridRowId;
+  selected: boolean;
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  index: number;
+  rowHeight: number | 'auto';
+  offsetLeft: number;
+  columnsTotalWidth: number;
+  firstColumnIndex: number;
+  lastColumnIndex: number;
+  visibleColumns: GridStateColDef[];
+  pinnedColumns: GridPinnedColumns;
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedColumnIndex: number | undefined;
+  isFirstVisible: boolean;
+  isLastVisible: boolean;
+  isNotVisible: boolean;
+  showBottomBorder: boolean;
+  scrollbarWidth: number;
+  gridHasFiller: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+};
+```
+
+### GridShadowScrollAreaProps
+
+```typescript
+type GridShadowScrollAreaProps = { children: React.ReactNode };
+```
+
+### GridSkeletonCellProps
+
+```typescript
+type GridSkeletonCellProps = {
+  type?: GridColType;
+  width?: number | string;
+  height?: number | 'auto';
+  field?: string;
+  align?: string;
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty?: boolean;
+};
+```
+
+### GridToolbarContainerProps
+
+```typescript
+type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> };
+```
+
+### GridToolbarExportProps
+
+```typescript
+type GridToolbarExportProps = {
+  csvOptions?: {
+    delimiter?: string;
+    fileName?: string;
+    utf8WithBom?: boolean;
+    includeHeaders?: boolean;
+    includeColumnGroupsHeaders?: boolean;
+    getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    shouldAppendQuotes?: boolean;
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  printOptions?: {
+    fileName?: string;
+    hideToolbar?: boolean;
+    hideFooter?: boolean;
+    includeCheckboxes?: boolean;
+    copyStyles?: boolean;
+    bodyClassName?: string;
+    pageStyle?: string | (() => string);
+    getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    tooltip?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        children: ReactElement;
+        enterDelay?: number;
+        title: React.ReactNode;
+        disableInteractive?: boolean;
+      } & BaseTooltipPropsOverrides
+    >;
+  };
+};
+```
+
+### GridToolbarFilterButtonProps
+
+```typescript
+type GridToolbarFilterButtonProps = {
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    tooltip?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        children: ReactElement;
+        enterDelay?: number;
+        title: React.ReactNode;
+        disableInteractive?: boolean;
+      } & BaseTooltipPropsOverrides
+    >;
+    badge?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        badgeContent?: React.ReactNode;
+        children?: React.ReactNode;
+        color?: 'primary' | 'default' | 'error';
+        invisible?: boolean;
+        overlap?: 'circular';
+        variant?: 'dot';
+        style?: React.CSSProperties;
+      } & BaseBadgePropsOverrides
+    >;
+  };
+};
+```
+
+### GridToolbarProps
+
+```typescript
+type GridToolbarProps = {
+  /**
+   * Show the history controls (undo/redo buttons).
+   * @default true
+   */
+  showHistoryControls?: boolean;
+  /**
+   * Show the quick filter component.
+   * @default true
+   */
+  showQuickFilter?: boolean;
+  /** Props passed to the quick filter component. */
+  quickFilterProps?: GridToolbarQuickFilterProps;
+  sx?: SxProps<Theme>;
+  csvOptions?: {
+    delimiter?: string;
+    fileName?: string;
+    utf8WithBom?: boolean;
+    includeHeaders?: boolean;
+    includeColumnGroupsHeaders?: boolean;
+    getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[];
+    shouldAppendQuotes?: boolean;
+    escapeFormulas?: boolean;
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  printOptions?: {
+    fileName?: string;
+    hideToolbar?: boolean;
+    hideFooter?: boolean;
+    includeCheckboxes?: boolean;
+    copyStyles?: boolean;
+    bodyClassName?: string;
+    pageStyle?: string | (() => string);
+    getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[];
+    fields?: string[];
+    allColumns?: boolean;
+    disableToolbarButton?: boolean;
+  };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        ref?: Ref<HTMLButtonElement>;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        id?: string;
+        role?: string;
+        size?: 'small' | 'medium' | 'large';
+        startIcon?: React.ReactNode;
+        tabIndex?: number;
+        title?: string;
+        touchRippleRef?: any;
+      } & BaseButtonPropsOverrides
+    >;
+    tooltip?: Partial<
+      React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+        children: ReactElement;
+        enterDelay?: number;
+        title: React.ReactNode;
+        disableInteractive?: boolean;
+      } & BaseTooltipPropsOverrides
+    >;
+  };
+};
+```
+
+### GridToolbarQuickFilterProps
+
+```typescript
+type GridToolbarQuickFilterProps = {
+  className?: string;
+  /**
+ * Function responsible for parsing text input in an array of independent values for quick filtering.
+ * @default (searchText: string) => searchText
+.split(' ')
+.filter((word) => word !== '')
+ * @returns The array of value on which quick filter is applied
+ */
+  quickFilterParser?: (input: string) => any[];
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @default (values: string[]) => values.join(' ')
+   * @returns The string to display in the text field
+   */
+  quickFilterFormatter?: (values: any[]) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+  slotProps?: { root: TextFieldProps };
+};
+```
+
+### GridTypeFilterInputValueProps
+
+```typescript
+type GridTypeFilterInputValueProps = {
+  item: GridFilterItem;
+  applyValue: (value: GridFilterItem) => void;
+  apiRef: RefObject<GridApiCommunity>;
+  inputRef?: React.Ref<HTMLElement | null>;
+  focusElementRef?: React.Ref<any>;
+  headerFilterMenu?: React.ReactNode;
+  clearButton?: React.ReactNode;
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (for example `isEmpty`)
+   */
+  isFilterActive?: boolean;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+  tabIndex?: number;
+  disabled?: boolean;
+  className?: string;
+  slotProps?: { root: TextFieldProps };
+  type?: 'text' | 'number' | 'date' | 'datetime-local';
+};
+```
+
+### QuickFilterClearProps
+
+```typescript
+type QuickFilterClearProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  children?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  label?: string;
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    {
+      ref?: Ref<HTMLButtonElement>;
+      className?: string;
+      id?: string;
+      style?: React.CSSProperties;
+      tabIndex?: number;
+      title?: string;
+      role?: string;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      size?: 'small' | 'medium' | 'large';
+      touchRippleRef?: any;
+      label?: string;
+      color?: 'default' | 'inherit' | 'primary';
+      edge?: 'start' | 'end' | false;
+      material?: Partial<IconButtonProps>;
+    },
+    QuickFilterState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+};
+```
+
+### QuickFilterControlProps
+
+```typescript
+type QuickFilterControlProps = {
+  ref?: Ref<HTMLInputElement>;
+  autoFocus?: boolean;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  role?: string;
+  color?: 'primary' | 'error';
+  onChange?:
+    | ((event: React.ChangeEvent<HTMLElement, Element>) => void)
+    | ((event: React.ChangeEvent) => void);
+  disabled?: boolean;
+  size?: 'small' | 'medium';
+  label?: React.ReactNode;
+  material?: Partial<TextFieldProps>;
+  value?: string;
+  type?: React.HTMLInputTypeAttribute;
+  autoComplete?: string;
+  error?: boolean;
+  fullWidth?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+  multiline?: boolean;
+  placeholder?: string;
+  slotProps?: {
+    input?: Omit<Partial<InputProps>, 'slotProps'>;
+    inputLabel?: {};
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
+  helperText?: string | null;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      role?: string;
+      autoComplete?: string;
+      color?: 'primary' | 'error';
+      disabled?: boolean;
+      error?: boolean;
+      fullWidth?: boolean;
+      helperText?: string | null;
+      id?: string;
+      inputRef?: React.Ref<HTMLInputElement>;
+      label?: React.ReactNode;
+      onChange?: React.ChangeEventHandler;
+      placeholder?: string;
+      size?: 'small' | 'medium';
+      slotProps?: {
+        input?: Omit<Partial<InputProps>, 'slotProps'>;
+        inputLabel?: {};
+        htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+      };
+      tabIndex?: number;
+      type?: React.HTMLInputTypeAttribute;
+      value?: string;
+      ref?: Ref<HTMLInputElement>;
+      multiline?: boolean;
+      autoFocus?: boolean;
+    } & BaseTextFieldPropsOverrides,
+    QuickFilterState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+};
+```
+
+### QuickFilterProps
+
+```typescript
+type QuickFilterProps = {
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
+   * @returns The array of value on which quick filter is applied
+   */
+  parser?: (input: string) => any[];
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @default (values: string[]) => values.join(' ')
+   * @returns The string to display in the text field
+   */
+  formatter?: (values: any[]) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /** The expanded state of the quick filter control. */
+  expanded?: boolean;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+  /** Callback function that is called when the quick filter input is expanded or collapsed. */
+  onExpandedChange?: (expanded: boolean) => void;
+};
+```
+
+### QuickFilterTriggerProps
+
+```typescript
+type QuickFilterTriggerProps = {
+  ref?: Ref<HTMLButtonElement>;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  startIcon?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  material?: Partial<ButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<
+    React.DOMAttributes<HTMLElement> & { className?: string; style?: React.CSSProperties } & {
+      ref?: Ref<HTMLButtonElement>;
+      children?: React.ReactNode;
+      disabled?: boolean;
+      id?: string;
+      role?: string;
+      size?: 'small' | 'medium' | 'large';
+      startIcon?: React.ReactNode;
+      tabIndex?: number;
+      title?: string;
+      touchRippleRef?: any;
+    } & BaseButtonPropsOverrides,
+    QuickFilterState
+  >;
+  /** Override or extend the styles applied to the component. */
+  className?: string | ((state: QuickFilterState) => string);
+};
+```
+
+### renderBooleanCell
+
+```typescript
+type renderBooleanCell = (
+  params: GridRenderCellParams<any, any, any, GridTreeNodeWithRender>,
+) => React.ReactNode;
+```
+
+### ToolbarButtonProps
+
+```typescript
+type ToolbarButtonProps = {
+  ref?: Ref<HTMLButtonElement>;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  role?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  touchRippleRef?: any;
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
+  material?: Partial<IconButtonProps>;
+  /** A function to customize rendering of the component. */
+  render?: RenderProp<{
+    ref?: Ref<HTMLButtonElement>;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    role?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    touchRippleRef?: any;
+    label?: string;
+    color?: 'default' | 'inherit' | 'primary';
+    edge?: 'start' | 'end' | false;
+    material?: Partial<IconButtonProps>;
+  }>;
+};
+```
+
+### ToolbarProps
+
+```typescript
+type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
+  render?: RenderProp<
+    MUIStyledCommonProps<Theme> &
+      Pick<
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+        | 'defaultChecked'
+        | 'defaultValue'
+        | 'suppressContentEditableWarning'
+        | 'suppressHydrationWarning'
+        | 'accessKey'
+        | 'autoCapitalize'
+        | 'autoFocus'
+        | 'className'
+        | 'contentEditable'
+        | 'contextMenu'
+        | 'dir'
+        | 'draggable'
+        | 'enterKeyHint'
+        | 'hidden'
+        | 'id'
+        | 'lang'
+        | 'nonce'
+        | 'slot'
+        | 'spellCheck'
+        | 'style'
+        | 'tabIndex'
+        | 'title'
+        | 'translate'
+        | 'radioGroup'
+        | 'role'
+        | 'about'
+        | 'content'
+        | 'datatype'
+        | 'inlist'
+        | 'prefix'
+        | 'property'
+        | 'rel'
+        | 'resource'
+        | 'rev'
+        | 'typeof'
+        | 'vocab'
+        | 'autoCorrect'
+        | 'autoSave'
+        | 'color'
+        | 'itemProp'
+        | 'itemScope'
+        | 'itemType'
+        | 'itemID'
+        | 'itemRef'
+        | 'results'
+        | 'security'
+        | 'unselectable'
+        | 'popover'
+        | 'popoverTargetAction'
+        | 'popoverTarget'
+        | 'inert'
+        | 'inputMode'
+        | 'is'
+        | 'exportparts'
+        | 'part'
+        | 'tw'
+        | 'aria-activedescendant'
+        | 'aria-atomic'
+        | 'aria-autocomplete'
+        | 'aria-braillelabel'
+        | 'aria-brailleroledescription'
+        | 'aria-busy'
+        | 'aria-checked'
+        | 'aria-colcount'
+        | 'aria-colindex'
+        | 'aria-colindextext'
+        | 'aria-colspan'
+        | 'aria-controls'
+        | 'aria-current'
+        | 'aria-describedby'
+        | 'aria-description'
+        | 'aria-details'
+        | 'aria-disabled'
+        | 'aria-dropeffect'
+        | 'aria-errormessage'
+        | 'aria-expanded'
+        | 'aria-flowto'
+        | 'aria-grabbed'
+        | 'aria-haspopup'
+        | 'aria-hidden'
+        | 'aria-invalid'
+        | 'aria-keyshortcuts'
+        | 'aria-label'
+        | 'aria-labelledby'
+        | 'aria-level'
+        | 'aria-live'
+        | 'aria-modal'
+        | 'aria-multiline'
+        | 'aria-multiselectable'
+        | 'aria-orientation'
+        | 'aria-owns'
+        | 'aria-placeholder'
+        | 'aria-posinset'
+        | 'aria-pressed'
+        | 'aria-readonly'
+        | 'aria-relevant'
+        | 'aria-required'
+        | 'aria-roledescription'
+        | 'aria-rowcount'
+        | 'aria-rowindex'
+        | 'aria-rowindextext'
+        | 'aria-rowspan'
+        | 'aria-selected'
+        | 'aria-setsize'
+        | 'aria-sort'
+        | 'aria-valuemax'
+        | 'aria-valuemin'
+        | 'aria-valuenow'
+        | 'aria-valuetext'
+        | 'children'
+        | 'dangerouslySetInnerHTML'
+        | 'onCopy'
+        | 'onCopyCapture'
+        | 'onCut'
+        | 'onCutCapture'
+        | 'onPaste'
+        | 'onPasteCapture'
+        | 'onCompositionEnd'
+        | 'onCompositionEndCapture'
+        | 'onCompositionStart'
+        | 'onCompositionStartCapture'
+        | 'onCompositionUpdate'
+        | 'onCompositionUpdateCapture'
+        | 'onFocus'
+        | 'onFocusCapture'
+        | 'onBlur'
+        | 'onBlurCapture'
+        | 'onChange'
+        | 'onChangeCapture'
+        | 'onBeforeInput'
+        | 'onBeforeInputCapture'
+        | 'onInput'
+        | 'onInputCapture'
+        | 'onReset'
+        | 'onResetCapture'
+        | 'onSubmit'
+        | 'onSubmitCapture'
+        | 'onInvalid'
+        | 'onInvalidCapture'
+        | 'onLoad'
+        | 'onLoadCapture'
+        | 'onError'
+        | 'onErrorCapture'
+        | 'onKeyDown'
+        | 'onKeyDownCapture'
+        | 'onKeyPress'
+        | 'onKeyPressCapture'
+        | 'onKeyUp'
+        | 'onKeyUpCapture'
+        | 'onAbort'
+        | 'onAbortCapture'
+        | 'onCanPlay'
+        | 'onCanPlayCapture'
+        | 'onCanPlayThrough'
+        | 'onCanPlayThroughCapture'
+        | 'onDurationChange'
+        | 'onDurationChangeCapture'
+        | 'onEmptied'
+        | 'onEmptiedCapture'
+        | 'onEncrypted'
+        | 'onEncryptedCapture'
+        | 'onEnded'
+        | 'onEndedCapture'
+        | 'onLoadedData'
+        | 'onLoadedDataCapture'
+        | 'onLoadedMetadata'
+        | 'onLoadedMetadataCapture'
+        | 'onLoadStart'
+        | 'onLoadStartCapture'
+        | 'onPause'
+        | 'onPauseCapture'
+        | 'onPlay'
+        | 'onPlayCapture'
+        | 'onPlaying'
+        | 'onPlayingCapture'
+        | 'onProgress'
+        | 'onProgressCapture'
+        | 'onRateChange'
+        | 'onRateChangeCapture'
+        | 'onSeeked'
+        | 'onSeekedCapture'
+        | 'onSeeking'
+        | 'onSeekingCapture'
+        | 'onStalled'
+        | 'onStalledCapture'
+        | 'onSuspend'
+        | 'onSuspendCapture'
+        | 'onTimeUpdate'
+        | 'onTimeUpdateCapture'
+        | 'onVolumeChange'
+        | 'onVolumeChangeCapture'
+        | 'onWaiting'
+        | 'onWaitingCapture'
+        | 'onAuxClick'
+        | 'onAuxClickCapture'
+        | 'onClick'
+        | 'onClickCapture'
+        | 'onContextMenu'
+        | 'onContextMenuCapture'
+        | 'onDoubleClick'
+        | 'onDoubleClickCapture'
+        | 'onDrag'
+        | 'onDragCapture'
+        | 'onDragEnd'
+        | 'onDragEndCapture'
+        | 'onDragEnter'
+        | 'onDragEnterCapture'
+        | 'onDragExit'
+        | 'onDragExitCapture'
+        | 'onDragLeave'
+        | 'onDragLeaveCapture'
+        | 'onDragOver'
+        | 'onDragOverCapture'
+        | 'onDragStart'
+        | 'onDragStartCapture'
+        | 'onDrop'
+        | 'onDropCapture'
+        | 'onMouseDown'
+        | 'onMouseDownCapture'
+        | 'onMouseEnter'
+        | 'onMouseLeave'
+        | 'onMouseMove'
+        | 'onMouseMoveCapture'
+        | 'onMouseOut'
+        | 'onMouseOutCapture'
+        | 'onMouseOver'
+        | 'onMouseOverCapture'
+        | 'onMouseUp'
+        | 'onMouseUpCapture'
+        | 'onSelect'
+        | 'onSelectCapture'
+        | 'onTouchCancel'
+        | 'onTouchCancelCapture'
+        | 'onTouchEnd'
+        | 'onTouchEndCapture'
+        | 'onTouchMove'
+        | 'onTouchMoveCapture'
+        | 'onTouchStart'
+        | 'onTouchStartCapture'
+        | 'onPointerDown'
+        | 'onPointerDownCapture'
+        | 'onPointerMove'
+        | 'onPointerMoveCapture'
+        | 'onPointerUp'
+        | 'onPointerUpCapture'
+        | 'onPointerCancel'
+        | 'onPointerCancelCapture'
+        | 'onPointerEnter'
+        | 'onPointerLeave'
+        | 'onPointerOver'
+        | 'onPointerOverCapture'
+        | 'onPointerOut'
+        | 'onPointerOutCapture'
+        | 'onGotPointerCapture'
+        | 'onGotPointerCaptureCapture'
+        | 'onLostPointerCapture'
+        | 'onLostPointerCaptureCapture'
+        | 'onScroll'
+        | 'onScrollCapture'
+        | 'onScrollEnd'
+        | 'onScrollEndCapture'
+        | 'onWheel'
+        | 'onWheelCapture'
+        | 'onAnimationStart'
+        | 'onAnimationStartCapture'
+        | 'onAnimationEnd'
+        | 'onAnimationEndCapture'
+        | 'onAnimationIteration'
+        | 'onAnimationIterationCapture'
+        | 'onToggle'
+        | 'onBeforeToggle'
+        | 'onTransitionCancel'
+        | 'onTransitionCancelCapture'
+        | 'onTransitionEnd'
+        | 'onTransitionEndCapture'
+        | 'onTransitionRun'
+        | 'onTransitionRunCapture'
+        | 'onTransitionStart'
+        | 'onTransitionStartCapture'
+        | 'ref'
+        | 'key'
+      >
+  >;
+};
+```
+
+## External Types
+
+### GridAlignment
+
+```typescript
+type GridAlignment = 'left' | 'right' | 'center';
+```
+
+### GridRowId
+
+```typescript
+type GridRowId = string | number;
+```
+
+### GridCellMode
+
+```typescript
+type GridCellMode = 'edit' | 'view';
+```
+
+### GridColType
+
+```typescript
+type GridColType =
+  | 'string'
+  | 'number'
+  | 'boolean'
+  | 'date'
+  | 'dateTime'
+  | 'singleSelect'
+  | 'actions'
+  | 'custom'
+  | 'longText';
+```
+
+### GridLoadingOverlayVariant
+
+```typescript
+type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';
+```
diff --git a/docs/pages/x/api/data-grid/types.toolbar.ts b/docs/pages/x/api/data-grid/types.toolbar.ts
new file mode 100644
index 0000000000000..6c7e0db494b94
--- /dev/null
+++ b/docs/pages/x/api/data-grid/types.toolbar.ts
@@ -0,0 +1,4 @@
+import { Toolbar } from '@mui/x-data-grid/components';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesToolbar = createTypes(import.meta.url, Toolbar);
diff --git a/docs/pages/x/api/date-pickers/date-calendar.js b/docs/pages/x/api/date-pickers/date-calendar.js
index 211c30ad3f2dc..73038dca8a257 100644
--- a/docs/pages/x/api/date-pickers/date-calendar.js
+++ b/docs/pages/x/api/date-pickers/date-calendar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-calendar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateCalendar } from './types.date-calendar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'classes', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'focusedView', 'loading', 'maxDate', 'minDate', 'monthsPerRow', 'onChange', 'onFocusedViewChange', 'onMonthChange', 'onViewChange', 'onYearChange', 'openTo', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-calendar',
-    false,
-    /\.\/date-calendar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateCalendar" allowedProps={allowedProps}>
+      <TypesDateCalendar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-field.js b/docs/pages/x/api/date-pickers/date-field.js
index f69cd3edda468..332426ae63091 100644
--- a/docs/pages/x/api/date-pickers/date-field.js
+++ b/docs/pages/x/api/date-pickers/date-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateField } from './types.date-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areAllSectionsEmpty', 'autoFocus', 'clearButtonPosition', 'clearable', 'color', 'defaultValue', 'disableFuture', 'disablePast', 'disabled', 'endAdornment', 'error', 'fieldRef', 'focused', 'format', 'formatDensity', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'maxDate', 'minDate', 'name', 'onChange', 'onClear', 'onError', 'onSelectedSectionsChange', 'openPickerButtonPosition', 'readOnly', 'referenceDate', 'required', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'shouldRespectLeadingZeros', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'timezone', 'value', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-field',
-    false,
-    /\.\/date-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateField" allowedProps={allowedProps}>
+      <TypesDateField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.js b/docs/pages/x/api/date-pickers/date-picker-toolbar.js
index 533200b5dfa8c..6df2a13eec0d5 100644
--- a/docs/pages/x/api/date-pickers/date-picker-toolbar.js
+++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-picker-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDatePickerToolbar } from './types.date-picker-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'toolbarFormat', 'toolbarPlaceholder'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-picker-toolbar',
-    false,
-    /\.\/date-picker-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DatePickerToolbar" allowedProps={allowedProps}>
+      <TypesDatePickerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-picker.js b/docs/pages/x/api/date-pickers/date-picker.js
index 943949bb0e448..588f919cc1f7b 100644
--- a/docs/pages/x/api/date-pickers/date-picker.js
+++ b/docs/pages/x/api/date-pickers/date-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDatePicker } from './types.date-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'closeOnSelect', 'dayOfWeekFormatter', 'defaultValue', 'desktopModeMediaQuery', 'disableFuture', 'disableHighlightToday', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'minDate', 'monthsPerRow', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'onYearChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-picker',
-    false,
-    /\.\/date-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DatePicker" allowedProps={allowedProps}>
+      <TypesDatePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.js b/docs/pages/x/api/date-pickers/date-range-calendar.js
index c79f3bc86c644..ab764cfb122de 100644
--- a/docs/pages/x/api/date-pickers/date-range-calendar.js
+++ b/docs/pages/x/api/date-pickers/date-range-calendar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-range-calendar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateRangeCalendar } from './types.date-range-calendar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'availableRangePositions', 'calendars', 'classes', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'focusedView', 'loading', 'maxDate', 'minDate', 'onChange', 'onFocusedViewChange', 'onMonthChange', 'onRangePositionChange', 'onViewChange', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'shouldDisableDate', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-range-calendar',
-    false,
-    /\.\/date-range-calendar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateRangeCalendar" allowedProps={allowedProps}>
+      <TypesDateRangeCalendar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-range-picker-day.js b/docs/pages/x/api/date-pickers/date-range-picker-day.js
index fa7cf7c0fef39..58ced04b3bb76 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker-day.js
+++ b/docs/pages/x/api/date-pickers/date-range-picker-day.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-range-picker-day.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateRangePickerDay } from './types.date-range-picker-day';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['TouchRippleProps', 'action', 'centerRipple', 'classes', 'day', 'disableHighlightToday', 'disableRipple', 'disableTouchRipple', 'disabled', 'draggable', 'focusRipple', 'focusVisibleClassName', 'isAnimating', 'isDayFillerCell', 'isEndOfHighlighting', 'isEndOfPreviewing', 'isFirstVisibleCell', 'isHighlighting', 'isLastVisibleCell', 'isPreviewing', 'isStartOfHighlighting', 'isStartOfPreviewing', 'isVisuallySelected', 'nativeButton', 'onBlur', 'onClick', 'onDaySelect', 'onFocus', 'onFocusVisible', 'onKeyDown', 'onMouseDown', 'onMouseEnter', 'outsideCurrentMonth', 'selected', 'showDaysOutsideCurrentMonth', 'sx', 'today', 'touchRippleRef'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-range-picker-day',
-    false,
-    /\.\/date-range-picker-day.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateRangePickerDay" allowedProps={allowedProps}>
+      <TypesDateRangePickerDay />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.js b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.js
index e0227f412e874..60ac42e0e3f87 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.js
+++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-range-picker-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateRangePickerToolbar } from './types.date-range-picker-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'toolbarFormat', 'toolbarPlaceholder'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-range-picker-toolbar',
-    false,
-    /\.\/date-range-picker-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateRangePickerToolbar" allowedProps={allowedProps}>
+      <TypesDateRangePickerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-range-picker.js b/docs/pages/x/api/date-pickers/date-range-picker.js
index bf573c3c4de5b..a610b60fa20dc 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker.js
+++ b/docs/pages/x/api/date-pickers/date-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateRangePicker } from './types.date-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'calendars', 'closeOnSelect', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'desktopModeMediaQuery', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'minDate', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'open', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'viewRenderers'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-range-picker',
-    false,
-    /\.\/date-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateRangePicker" allowedProps={allowedProps}>
+      <TypesDateRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-field.js b/docs/pages/x/api/date-pickers/date-time-field.js
index 5ca51f60e027c..49cdd246b2ca6 100644
--- a/docs/pages/x/api/date-pickers/date-time-field.js
+++ b/docs/pages/x/api/date-pickers/date-time-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimeField } from './types.date-time-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'areAllSectionsEmpty', 'autoFocus', 'clearButtonPosition', 'clearable', 'color', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'endAdornment', 'error', 'fieldRef', 'focused', 'format', 'formatDensity', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'name', 'onChange', 'onClear', 'onError', 'onSelectedSectionsChange', 'openPickerButtonPosition', 'readOnly', 'referenceDate', 'required', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableTime', 'shouldDisableYear', 'shouldRespectLeadingZeros', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'timezone', 'value', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-field',
-    false,
-    /\.\/date-time-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimeField" allowedProps={allowedProps}>
+      <TypesDateTimeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.js b/docs/pages/x/api/date-pickers/date-time-picker-tabs.js
index 6a59aacc2662c..2e5e3321517ca 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.js
+++ b/docs/pages/x/api/date-pickers/date-time-picker-tabs.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-picker-tabs.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimePickerTabs } from './types.date-time-picker-tabs';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'dateIcon', 'hidden', 'sx', 'timeIcon'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-picker-tabs',
-    false,
-    /\.\/date-time-picker-tabs.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimePickerTabs" allowedProps={allowedProps}>
+      <TypesDateTimePickerTabs />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.js b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.js
index dc276aa98f90f..2163239b7e79c 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.js
+++ b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-picker-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimePickerToolbar } from './types.date-time-picker-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'toolbarFormat', 'toolbarPlaceholder', 'toolbarTitle'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-picker-toolbar',
-    false,
-    /\.\/date-time-picker-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimePickerToolbar" allowedProps={allowedProps}>
+      <TypesDateTimePickerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-picker.js b/docs/pages/x/api/date-pickers/date-time-picker.js
index 10e560dd6fca5..3bc4c283c06e8 100644
--- a/docs/pages/x/api/date-pickers/date-time-picker.js
+++ b/docs/pages/x/api/date-pickers/date-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimePicker } from './types.date-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'closeOnSelect', 'dayOfWeekFormatter', 'defaultValue', 'desktopModeMediaQuery', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'monthsPerRow', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'onYearChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableTime', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-picker',
-    false,
-    /\.\/date-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimePicker" allowedProps={allowedProps}>
+      <TypesDateTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.js b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.js
index 2f45440bb4ee3..c9b8f3ac41ffe 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.js
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-range-picker-tabs.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimeRangePickerTabs } from './types.date-time-range-picker-tabs';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'dateIcon', 'hidden', 'sx', 'timeIcon'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-range-picker-tabs',
-    false,
-    /\.\/date-time-range-picker-tabs.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimeRangePickerTabs" allowedProps={allowedProps}>
+      <TypesDateTimeRangePickerTabs />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.js b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.js
index 25ac6ce0f0810..8f15b3f8a07ac 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.js
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-range-picker-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimeRangePickerToolbar } from './types.date-time-range-picker-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'toolbarFormat', 'toolbarPlaceholder'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-range-picker-toolbar',
-    false,
-    /\.\/date-time-range-picker-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimeRangePickerToolbar" allowedProps={allowedProps}>
+      <TypesDateTimeRangePickerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.js b/docs/pages/x/api/date-pickers/date-time-range-picker.js
index 7640675805016..15213f0af8447 100644
--- a/docs/pages/x/api/date-pickers/date-time-range-picker.js
+++ b/docs/pages/x/api/date-pickers/date-time-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './date-time-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDateTimeRangePicker } from './types.date-time-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'calendars', 'closeOnSelect', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'desktopModeMediaQuery', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableTime', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/date-time-range-picker',
-    false,
-    /\.\/date-time-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DateTimeRangePicker" allowedProps={allowedProps}>
+      <TypesDateTimeRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/day-calendar-skeleton.js b/docs/pages/x/api/date-pickers/day-calendar-skeleton.js
index aadbbe30df37c..d4dd4940e890c 100644
--- a/docs/pages/x/api/date-pickers/day-calendar-skeleton.js
+++ b/docs/pages/x/api/date-pickers/day-calendar-skeleton.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './day-calendar-skeleton.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDayCalendarSkeleton } from './types.day-calendar-skeleton';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/day-calendar-skeleton',
-    false,
-    /\.\/day-calendar-skeleton.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DayCalendarSkeleton" allowedProps={allowedProps}>
+      <TypesDayCalendarSkeleton />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.js b/docs/pages/x/api/date-pickers/desktop-date-picker.js
index 515a4586d79e7..c9f4b6f3ec6f0 100644
--- a/docs/pages/x/api/date-pickers/desktop-date-picker.js
+++ b/docs/pages/x/api/date-pickers/desktop-date-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './desktop-date-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDesktopDatePicker } from './types.desktop-date-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'closeOnSelect', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'minDate', 'monthsPerRow', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'onYearChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/desktop-date-picker',
-    false,
-    /\.\/desktop-date-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DesktopDatePicker" allowedProps={allowedProps}>
+      <TypesDesktopDatePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.js b/docs/pages/x/api/date-pickers/desktop-date-range-picker.js
index 71c04f23011fb..a9b491d6ddad9 100644
--- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.js
+++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './desktop-date-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDesktopDateRangePicker } from './types.desktop-date-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'calendars', 'closeOnSelect', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'minDate', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'open', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'viewRenderers'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/desktop-date-range-picker',
-    false,
-    /\.\/desktop-date-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DesktopDateRangePicker" allowedProps={allowedProps}>
+      <TypesDesktopDateRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.js b/docs/pages/x/api/date-pickers/desktop-date-time-picker.js
index fd61fc08045bf..0fe9903b042fc 100644
--- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.js
+++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './desktop-date-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDesktopDateTimePicker } from './types.desktop-date-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'closeOnSelect', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'monthsPerRow', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'onYearChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableTime', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/desktop-date-time-picker',
-    false,
-    /\.\/desktop-date-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DesktopDateTimePicker" allowedProps={allowedProps}>
+      <TypesDesktopDateTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.js b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.js
index 5d8d6ff4e8c37..ab1f675f50e82 100644
--- a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.js
+++ b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './desktop-date-time-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDesktopDateTimeRangePicker } from './types.desktop-date-time-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'calendars', 'closeOnSelect', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableTime', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/desktop-date-time-range-picker',
-    false,
-    /\.\/desktop-date-time-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DesktopDateTimeRangePicker" allowedProps={allowedProps}>
+      <TypesDesktopDateTimeRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.js b/docs/pages/x/api/date-pickers/desktop-time-picker.js
index 6bd856267938a..b890eca365c9a 100644
--- a/docs/pages/x/api/date-pickers/desktop-time-picker.js
+++ b/docs/pages/x/api/date-pickers/desktop-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './desktop-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDesktopTimePicker } from './types.desktop-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'closeOnSelect', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/desktop-time-picker',
-    false,
-    /\.\/desktop-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DesktopTimePicker" allowedProps={allowedProps}>
+      <TypesDesktopTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/desktop-time-range-picker.js b/docs/pages/x/api/date-pickers/desktop-time-range-picker.js
index 2278eef36c8bc..76e60e04e148c 100644
--- a/docs/pages/x/api/date-pickers/desktop-time-range-picker.js
+++ b/docs/pages/x/api/date-pickers/desktop-time-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './desktop-time-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDesktopTimeRangePicker } from './types.desktop-time-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'closeOnSelect', 'defaultRangePosition', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/desktop-time-range-picker',
-    false,
-    /\.\/desktop-time-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DesktopTimeRangePicker" allowedProps={allowedProps}>
+      <TypesDesktopTimeRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/digital-clock.js b/docs/pages/x/api/date-pickers/digital-clock.js
index 8e37ac20b46d4..3bb189954e352 100644
--- a/docs/pages/x/api/date-pickers/digital-clock.js
+++ b/docs/pages/x/api/date-pickers/digital-clock.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './digital-clock.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesDigitalClock } from './types.digital-clock';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'classes', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'focusedView', 'maxTime', 'minTime', 'minutesStep', 'onChange', 'onFocusedViewChange', 'onViewChange', 'openTo', 'readOnly', 'referenceDate', 'shouldDisableTime', 'skipDisabled', 'slotProps', 'slots', 'sx', 'timeStep', 'timezone', 'value', 'view', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/digital-clock',
-    false,
-    /\.\/digital-clock.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="DigitalClock" allowedProps={allowedProps}>
+      <TypesDigitalClock />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/localization-provider.js b/docs/pages/x/api/date-pickers/localization-provider.js
index ea9afb1d2c48e..a75ba41d2e117 100644
--- a/docs/pages/x/api/date-pickers/localization-provider.js
+++ b/docs/pages/x/api/date-pickers/localization-provider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './localization-provider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesLocalizationProvider } from './types.localization-provider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['adapterLocale', 'dateAdapter', 'dateFormats', 'dateLibInstance', 'localeText'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/localization-provider',
-    false,
-    /\.\/localization-provider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="LocalizationProvider" allowedProps={allowedProps}>
+      <TypesLocalizationProvider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.js b/docs/pages/x/api/date-pickers/mobile-date-picker.js
index 0003a8a930b65..2ecdc06df2e43 100644
--- a/docs/pages/x/api/date-pickers/mobile-date-picker.js
+++ b/docs/pages/x/api/date-pickers/mobile-date-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mobile-date-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMobileDatePicker } from './types.mobile-date-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'closeOnSelect', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'minDate', 'monthsPerRow', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'onYearChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/mobile-date-picker',
-    false,
-    /\.\/mobile-date-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MobileDatePicker" allowedProps={allowedProps}>
+      <TypesMobileDatePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.js b/docs/pages/x/api/date-pickers/mobile-date-range-picker.js
index 6bea6c580e79a..08a6e570a5148 100644
--- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.js
+++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mobile-date-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMobileDateRangePicker } from './types.mobile-date-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'closeOnSelect', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'minDate', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'open', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'viewRenderers'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/mobile-date-range-picker',
-    false,
-    /\.\/mobile-date-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MobileDateRangePicker" allowedProps={allowedProps}>
+      <TypesMobileDateRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.js b/docs/pages/x/api/date-pickers/mobile-date-time-picker.js
index e7edfc2e645a6..34134f193516b 100644
--- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.js
+++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mobile-date-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMobileDateTimePicker } from './types.mobile-date-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'closeOnSelect', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'monthsPerRow', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'onYearChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableTime', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/mobile-date-time-picker',
-    false,
-    /\.\/mobile-date-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MobileDateTimePicker" allowedProps={allowedProps}>
+      <TypesMobileDateTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.js b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.js
index ffbeca9315ef0..ad6a6ee66b87a 100644
--- a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.js
+++ b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mobile-date-time-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMobileDateTimeRangePicker } from './types.mobile-date-time-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'closeOnSelect', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'displayWeekNumber', 'fixedWeekNumber', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'selectedSections', 'shouldDisableDate', 'shouldDisableTime', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/mobile-date-time-range-picker',
-    false,
-    /\.\/mobile-date-time-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MobileDateTimeRangePicker" allowedProps={allowedProps}>
+      <TypesMobileDateTimeRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.js b/docs/pages/x/api/date-pickers/mobile-time-picker.js
index 38edd68244799..cffef404d03ed 100644
--- a/docs/pages/x/api/date-pickers/mobile-time-picker.js
+++ b/docs/pages/x/api/date-pickers/mobile-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mobile-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMobileTimePicker } from './types.mobile-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'closeOnSelect', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/mobile-time-picker',
-    false,
-    /\.\/mobile-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MobileTimePicker" allowedProps={allowedProps}>
+      <TypesMobileTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/mobile-time-range-picker.js b/docs/pages/x/api/date-pickers/mobile-time-range-picker.js
index f7b419229b9d1..0313d4dd53934 100644
--- a/docs/pages/x/api/date-pickers/mobile-time-range-picker.js
+++ b/docs/pages/x/api/date-pickers/mobile-time-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './mobile-time-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMobileTimeRangePicker } from './types.mobile-time-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'closeOnSelect', 'defaultRangePosition', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/mobile-time-range-picker',
-    false,
-    /\.\/mobile-time-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MobileTimeRangePicker" allowedProps={allowedProps}>
+      <TypesMobileTimeRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/month-calendar.js b/docs/pages/x/api/date-pickers/month-calendar.js
index 7d190243a0beb..ff1bbb60656ba 100644
--- a/docs/pages/x/api/date-pickers/month-calendar.js
+++ b/docs/pages/x/api/date-pickers/month-calendar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './month-calendar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMonthCalendar } from './types.month-calendar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disablePast', 'disabled', 'maxDate', 'minDate', 'monthsPerRow', 'onChange', 'readOnly', 'referenceDate', 'shouldDisableMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/month-calendar',
-    false,
-    /\.\/month-calendar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MonthCalendar" allowedProps={allowedProps}>
+      <TypesMonthCalendar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.js b/docs/pages/x/api/date-pickers/multi-input-date-range-field.js
index 43cae5acb4138..c9bd3633f2b31 100644
--- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.js
+++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './multi-input-date-range-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMultiInputDateRangeField } from './types.multi-input-date-range-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'classes', 'dateSeparator', 'defaultValue', 'direction', 'disableFuture', 'disablePast', 'disabled', 'divider', 'endFieldRef', 'format', 'formatDensity', 'maxDate', 'minDate', 'onChange', 'onError', 'onSelectedSectionsChange', 'readOnly', 'referenceDate', 'selectedSections', 'shouldDisableDate', 'shouldRespectLeadingZeros', 'slotProps', 'slots', 'spacing', 'startFieldRef', 'sx', 'timezone', 'useFlexGap', 'value'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/multi-input-date-range-field',
-    false,
-    /\.\/multi-input-date-range-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MultiInputDateRangeField" allowedProps={allowedProps}>
+      <TypesMultiInputDateRangeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.js b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.js
index 9856d14277c50..daa0d1566fa14 100644
--- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.js
+++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './multi-input-date-time-range-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMultiInputDateTimeRangeField } from './types.multi-input-date-time-range-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'classes', 'dateSeparator', 'defaultValue', 'direction', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'divider', 'endFieldRef', 'format', 'formatDensity', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'onChange', 'onError', 'onSelectedSectionsChange', 'readOnly', 'referenceDate', 'selectedSections', 'shouldDisableDate', 'shouldDisableTime', 'shouldRespectLeadingZeros', 'slotProps', 'slots', 'spacing', 'startFieldRef', 'sx', 'timezone', 'useFlexGap', 'value'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/multi-input-date-time-range-field',
-    false,
-    /\.\/multi-input-date-time-range-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MultiInputDateTimeRangeField" allowedProps={allowedProps}>
+      <TypesMultiInputDateTimeRangeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.js b/docs/pages/x/api/date-pickers/multi-input-time-range-field.js
index 218fe87d98a2b..0154e382341c3 100644
--- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.js
+++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './multi-input-time-range-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMultiInputTimeRangeField } from './types.multi-input-time-range-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'classes', 'dateSeparator', 'defaultValue', 'direction', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'divider', 'endFieldRef', 'format', 'formatDensity', 'maxTime', 'minTime', 'minutesStep', 'onChange', 'onError', 'onSelectedSectionsChange', 'readOnly', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'shouldRespectLeadingZeros', 'slotProps', 'slots', 'spacing', 'startFieldRef', 'sx', 'timezone', 'useFlexGap', 'value'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/multi-input-time-range-field',
-    false,
-    /\.\/multi-input-time-range-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MultiInputTimeRangeField" allowedProps={allowedProps}>
+      <TypesMultiInputTimeRangeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/multi-section-digital-clock.js b/docs/pages/x/api/date-pickers/multi-section-digital-clock.js
index 823a0070ad033..0a914b5f8d1fd 100644
--- a/docs/pages/x/api/date-pickers/multi-section-digital-clock.js
+++ b/docs/pages/x/api/date-pickers/multi-section-digital-clock.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './multi-section-digital-clock.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesMultiSectionDigitalClock } from './types.multi-section-digital-clock';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'classes', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'focusedView', 'maxTime', 'minTime', 'minutesStep', 'onChange', 'onFocusedViewChange', 'onViewChange', 'openTo', 'readOnly', 'referenceDate', 'shouldDisableTime', 'skipDisabled', 'slotProps', 'slots', 'sx', 'timeSteps', 'timezone', 'value', 'view', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/multi-section-digital-clock',
-    false,
-    /\.\/multi-section-digital-clock.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="MultiSectionDigitalClock" allowedProps={allowedProps}>
+      <TypesMultiSectionDigitalClock />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/picker-day.js b/docs/pages/x/api/date-pickers/picker-day.js
index 4c87522bf462b..f23808f691951 100644
--- a/docs/pages/x/api/date-pickers/picker-day.js
+++ b/docs/pages/x/api/date-pickers/picker-day.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './picker-day.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickerDay } from './types.picker-day';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['TouchRippleProps', 'action', 'centerRipple', 'classes', 'day', 'disableHighlightToday', 'disableRipple', 'disableTouchRipple', 'disabled', 'focusRipple', 'focusVisibleClassName', 'isAnimating', 'isDayFillerCell', 'isFirstVisibleCell', 'isLastVisibleCell', 'isVisuallySelected', 'nativeButton', 'onBlur', 'onClick', 'onDaySelect', 'onFocus', 'onFocusVisible', 'onKeyDown', 'onMouseDown', 'onMouseEnter', 'outsideCurrentMonth', 'selected', 'showDaysOutsideCurrentMonth', 'sx', 'today', 'touchRippleRef'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/picker-day',
-    false,
-    /\.\/picker-day.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickerDay" allowedProps={allowedProps}>
+      <TypesPickerDay />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-action-bar.js b/docs/pages/x/api/date-pickers/pickers-action-bar.js
index a625c5dc777c2..8332b24e58b44 100644
--- a/docs/pages/x/api/date-pickers/pickers-action-bar.js
+++ b/docs/pages/x/api/date-pickers/pickers-action-bar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-action-bar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersActionBar } from './types.pickers-action-bar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['actions', 'disableSpacing', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-action-bar',
-    false,
-    /\.\/pickers-action-bar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersActionBar" allowedProps={allowedProps}>
+      <TypesPickersActionBar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.js b/docs/pages/x/api/date-pickers/pickers-calendar-header.js
index 8ed4f78311e5c..65eb0e758d72a 100644
--- a/docs/pages/x/api/date-pickers/pickers-calendar-header.js
+++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-calendar-header.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersCalendarHeader } from './types.pickers-calendar-header';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'format', 'labelId', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-calendar-header',
-    false,
-    /\.\/pickers-calendar-header.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersCalendarHeader" allowedProps={allowedProps}>
+      <TypesPickersCalendarHeader />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-layout.js b/docs/pages/x/api/date-pickers/pickers-layout.js
index 407804c769fd4..121d025bdf35d 100644
--- a/docs/pages/x/api/date-pickers/pickers-layout.js
+++ b/docs/pages/x/api/date-pickers/pickers-layout.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-layout.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersLayout } from './types.pickers-layout';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-layout',
-    false,
-    /\.\/pickers-layout.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersLayout" allowedProps={allowedProps}>
+      <TypesPickersLayout />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.js b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.js
index df0bedec98f82..d9c137e363c7f 100644
--- a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.js
+++ b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-range-calendar-header.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersRangeCalendarHeader } from './types.pickers-range-calendar-header';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['calendars', 'classes', 'format', 'labelId', 'month', 'monthIndex', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-range-calendar-header',
-    false,
-    /\.\/pickers-range-calendar-header.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersRangeCalendarHeader" allowedProps={allowedProps}>
+      <TypesPickersRangeCalendarHeader />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-section-list.js b/docs/pages/x/api/date-pickers/pickers-section-list.js
index eae8e23f56758..cfef04babb228 100644
--- a/docs/pages/x/api/date-pickers/pickers-section-list.js
+++ b/docs/pages/x/api/date-pickers/pickers-section-list.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-section-list.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersSectionList } from './types.pickers-section-list';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'contentEditable', 'elements', 'slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-section-list',
-    false,
-    /\.\/pickers-section-list.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersSectionList" allowedProps={allowedProps}>
+      <TypesPickersSectionList />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-shortcuts.js b/docs/pages/x/api/date-pickers/pickers-shortcuts.js
index 5aaf2cb23c6b0..744a211eb9b73 100644
--- a/docs/pages/x/api/date-pickers/pickers-shortcuts.js
+++ b/docs/pages/x/api/date-pickers/pickers-shortcuts.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-shortcuts.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersShortcuts } from './types.pickers-shortcuts';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['changeImportance', 'dense', 'disablePadding', 'items', 'subheader', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-shortcuts',
-    false,
-    /\.\/pickers-shortcuts.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersShortcuts" allowedProps={allowedProps}>
+      <TypesPickersShortcuts />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/pickers-text-field.js b/docs/pages/x/api/date-pickers/pickers-text-field.js
index a314f305a816a..e4627efb1f408 100644
--- a/docs/pages/x/api/date-pickers/pickers-text-field.js
+++ b/docs/pages/x/api/date-pickers/pickers-text-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-text-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesPickersTextField } from './types.pickers-text-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areAllSectionsEmpty', 'color', 'contentEditable', 'elements', 'endAdornment', 'error', 'focused', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'name', 'required', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/pickers-text-field',
-    false,
-    /\.\/pickers-text-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="PickersTextField" allowedProps={allowedProps}>
+      <TypesPickersTextField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.js b/docs/pages/x/api/date-pickers/single-input-date-range-field.js
index db34f6f96dd9c..3015eaab08180 100644
--- a/docs/pages/x/api/date-pickers/single-input-date-range-field.js
+++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './single-input-date-range-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSingleInputDateRangeField } from './types.single-input-date-range-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areAllSectionsEmpty', 'autoFocus', 'clearButtonPosition', 'clearable', 'color', 'dateSeparator', 'defaultValue', 'disableFuture', 'disablePast', 'disabled', 'endAdornment', 'error', 'fieldRef', 'focused', 'format', 'formatDensity', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'maxDate', 'minDate', 'name', 'onChange', 'onClear', 'onError', 'onSelectedSectionsChange', 'openPickerButtonPosition', 'readOnly', 'referenceDate', 'required', 'selectedSections', 'shouldDisableDate', 'shouldRespectLeadingZeros', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'timezone', 'value', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/single-input-date-range-field',
-    false,
-    /\.\/single-input-date-range-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SingleInputDateRangeField" allowedProps={allowedProps}>
+      <TypesSingleInputDateRangeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.js b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.js
index 4fb6013a8b84f..7dc23a6320ba8 100644
--- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.js
+++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './single-input-date-time-range-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSingleInputDateTimeRangeField } from './types.single-input-date-time-range-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'areAllSectionsEmpty', 'autoFocus', 'clearButtonPosition', 'clearable', 'color', 'dateSeparator', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'endAdornment', 'error', 'fieldRef', 'focused', 'format', 'formatDensity', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'name', 'onChange', 'onClear', 'onError', 'onSelectedSectionsChange', 'openPickerButtonPosition', 'readOnly', 'referenceDate', 'required', 'selectedSections', 'shouldDisableDate', 'shouldDisableTime', 'shouldRespectLeadingZeros', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'timezone', 'value', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/single-input-date-time-range-field',
-    false,
-    /\.\/single-input-date-time-range-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SingleInputDateTimeRangeField" allowedProps={allowedProps}>
+      <TypesSingleInputDateTimeRangeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.js b/docs/pages/x/api/date-pickers/single-input-time-range-field.js
index 66d8627586a0a..0837b18cc3431 100644
--- a/docs/pages/x/api/date-pickers/single-input-time-range-field.js
+++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './single-input-time-range-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSingleInputTimeRangeField } from './types.single-input-time-range-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'areAllSectionsEmpty', 'autoFocus', 'clearButtonPosition', 'clearable', 'color', 'dateSeparator', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'endAdornment', 'error', 'fieldRef', 'focused', 'format', 'formatDensity', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'maxTime', 'minTime', 'minutesStep', 'name', 'onChange', 'onClear', 'onError', 'onSelectedSectionsChange', 'openPickerButtonPosition', 'readOnly', 'referenceDate', 'required', 'selectedSections', 'shouldDisableTime', 'shouldRespectLeadingZeros', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'timezone', 'value', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/single-input-time-range-field',
-    false,
-    /\.\/single-input-time-range-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SingleInputTimeRangeField" allowedProps={allowedProps}>
+      <TypesSingleInputTimeRangeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/static-date-picker.js b/docs/pages/x/api/date-pickers/static-date-picker.js
index 62d2fe44eab79..a0a5c4cbf55f2 100644
--- a/docs/pages/x/api/date-pickers/static-date-picker.js
+++ b/docs/pages/x/api/date-pickers/static-date-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './static-date-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStaticDatePicker } from './types.static-date-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disablePast', 'disabled', 'displayStaticWrapperAs', 'displayWeekNumber', 'fixedWeekNumber', 'loading', 'localeText', 'maxDate', 'minDate', 'monthsPerRow', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onViewChange', 'onYearChange', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/static-date-picker',
-    false,
-    /\.\/static-date-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StaticDatePicker" allowedProps={allowedProps}>
+      <TypesStaticDatePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.js b/docs/pages/x/api/date-pickers/static-date-range-picker.js
index acfb3154fd2e3..8a2c7391147fb 100644
--- a/docs/pages/x/api/date-pickers/static-date-range-picker.js
+++ b/docs/pages/x/api/date-pickers/static-date-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './static-date-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStaticDateRangePicker } from './types.static-date-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['autoFocus', 'calendars', 'currentMonthCalendarPosition', 'dayOfWeekFormatter', 'defaultRangePosition', 'defaultValue', 'disableAutoMonthSwitching', 'disableDragEditing', 'disableFuture', 'disableHighlightToday', 'disablePast', 'disabled', 'displayStaticWrapperAs', 'displayWeekNumber', 'fixedWeekNumber', 'loading', 'localeText', 'maxDate', 'minDate', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onRangePositionChange', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'shouldDisableDate', 'showDaysOutsideCurrentMonth', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'viewRenderers'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/static-date-range-picker',
-    false,
-    /\.\/static-date-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StaticDateRangePicker" allowedProps={allowedProps}>
+      <TypesStaticDateRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.js b/docs/pages/x/api/date-pickers/static-date-time-picker.js
index b17df54349638..fa1b4cd60d48d 100644
--- a/docs/pages/x/api/date-pickers/static-date-time-picker.js
+++ b/docs/pages/x/api/date-pickers/static-date-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './static-date-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStaticDateTimePicker } from './types.static-date-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'dayOfWeekFormatter', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'displayStaticWrapperAs', 'displayWeekNumber', 'fixedWeekNumber', 'loading', 'localeText', 'maxDate', 'maxDateTime', 'maxTime', 'minDate', 'minDateTime', 'minTime', 'minutesStep', 'monthsPerRow', 'onAccept', 'onChange', 'onClose', 'onError', 'onMonthChange', 'onViewChange', 'onYearChange', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'renderLoading', 'shouldDisableDate', 'shouldDisableMonth', 'shouldDisableTime', 'shouldDisableYear', 'showDaysOutsideCurrentMonth', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/static-date-time-picker',
-    false,
-    /\.\/static-date-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StaticDateTimePicker" allowedProps={allowedProps}>
+      <TypesStaticDateTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/static-time-picker.js b/docs/pages/x/api/date-pickers/static-time-picker.js
index 3a17771c7b739..a2011e157097b 100644
--- a/docs/pages/x/api/date-pickers/static-time-picker.js
+++ b/docs/pages/x/api/date-pickers/static-time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './static-time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStaticTimePicker } from './types.static-time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'displayStaticWrapperAs', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'onAccept', 'onChange', 'onClose', 'onError', 'onViewChange', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'shouldDisableTime', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/static-time-picker',
-    false,
-    /\.\/static-time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StaticTimePicker" allowedProps={allowedProps}>
+      <TypesStaticTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-clock.js b/docs/pages/x/api/date-pickers/time-clock.js
index cc957083b7bb3..7af794ad0327f 100644
--- a/docs/pages/x/api/date-pickers/time-clock.js
+++ b/docs/pages/x/api/date-pickers/time-clock.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-clock.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimeClock } from './types.time-clock';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'classes', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'focusedView', 'maxTime', 'minTime', 'minutesStep', 'onChange', 'onFocusedViewChange', 'onViewChange', 'openTo', 'readOnly', 'referenceDate', 'shouldDisableTime', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'view', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-clock',
-    false,
-    /\.\/time-clock.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimeClock" allowedProps={allowedProps}>
+      <TypesTimeClock />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-field.js b/docs/pages/x/api/date-pickers/time-field.js
index 0652f9f4d8699..3e402fa0b8635 100644
--- a/docs/pages/x/api/date-pickers/time-field.js
+++ b/docs/pages/x/api/date-pickers/time-field.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-field.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimeField } from './types.time-field';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'areAllSectionsEmpty', 'autoFocus', 'clearButtonPosition', 'clearable', 'color', 'defaultValue', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disablePast', 'disabled', 'endAdornment', 'error', 'fieldRef', 'focused', 'format', 'formatDensity', 'fullWidth', 'helperText', 'hiddenLabel', 'id', 'inputRef', 'label', 'margin', 'maxTime', 'minTime', 'minutesStep', 'name', 'onChange', 'onClear', 'onError', 'onSelectedSectionsChange', 'openPickerButtonPosition', 'readOnly', 'referenceDate', 'required', 'selectedSections', 'shouldDisableTime', 'shouldRespectLeadingZeros', 'size', 'slotProps', 'slots', 'startAdornment', 'sx', 'timezone', 'value', 'variant'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-field',
-    false,
-    /\.\/time-field.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimeField" allowedProps={allowedProps}>
+      <TypesTimeField />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.js b/docs/pages/x/api/date-pickers/time-picker-toolbar.js
index 3f36dd2e4062f..446c939bec096 100644
--- a/docs/pages/x/api/date-pickers/time-picker-toolbar.js
+++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-picker-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimePickerToolbar } from './types.time-picker-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'toolbarFormat', 'toolbarPlaceholder'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-picker-toolbar',
-    false,
-    /\.\/time-picker-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimePickerToolbar" allowedProps={allowedProps}>
+      <TypesTimePickerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-picker.js b/docs/pages/x/api/date-pickers/time-picker.js
index 24c60466f3047..62424c83fc472 100644
--- a/docs/pages/x/api/date-pickers/time-picker.js
+++ b/docs/pages/x/api/date-pickers/time-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimePicker } from './types.time-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'ampmInClock', 'autoFocus', 'closeOnSelect', 'defaultValue', 'desktopModeMediaQuery', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onOpen', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'orientation', 'readOnly', 'reduceAnimations', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-picker',
-    false,
-    /\.\/time-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimePicker" allowedProps={allowedProps}>
+      <TypesTimePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-range-picker-tabs.js b/docs/pages/x/api/date-pickers/time-range-picker-tabs.js
index 2d5d66b1002c7..35f855efc0e62 100644
--- a/docs/pages/x/api/date-pickers/time-range-picker-tabs.js
+++ b/docs/pages/x/api/date-pickers/time-range-picker-tabs.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-range-picker-tabs.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimeRangePickerTabs } from './types.time-range-picker-tabs';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'timeIcon'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-range-picker-tabs',
-    false,
-    /\.\/time-range-picker-tabs.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimeRangePickerTabs" allowedProps={allowedProps}>
+      <TypesTimeRangePickerTabs />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-range-picker-toolbar.js b/docs/pages/x/api/date-pickers/time-range-picker-toolbar.js
index ae42e790c1198..523a4b45d1dd1 100644
--- a/docs/pages/x/api/date-pickers/time-range-picker-toolbar.js
+++ b/docs/pages/x/api/date-pickers/time-range-picker-toolbar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-range-picker-toolbar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimeRangePickerToolbar } from './types.time-range-picker-toolbar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'hidden', 'sx', 'toolbarPlaceholder'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-range-picker-toolbar',
-    false,
-    /\.\/time-range-picker-toolbar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimeRangePickerToolbar" allowedProps={allowedProps}>
+      <TypesTimeRangePickerToolbar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/time-range-picker.js b/docs/pages/x/api/date-pickers/time-range-picker.js
index 2e3b89270904e..e6996dbfcff98 100644
--- a/docs/pages/x/api/date-pickers/time-range-picker.js
+++ b/docs/pages/x/api/date-pickers/time-range-picker.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './time-range-picker.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTimeRangePicker } from './types.time-range-picker';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['ampm', 'autoFocus', 'closeOnSelect', 'defaultRangePosition', 'defaultValue', 'desktopModeMediaQuery', 'disableFuture', 'disableIgnoringDatePartForTimeValidation', 'disableOpenPicker', 'disablePast', 'disabled', 'format', 'formatDensity', 'inputRef', 'keepOpenDuringFieldFocus', 'label', 'localeText', 'maxTime', 'minTime', 'minutesStep', 'name', 'onAccept', 'onChange', 'onClose', 'onError', 'onOpen', 'onRangePositionChange', 'onSelectedSectionsChange', 'onViewChange', 'open', 'openTo', 'rangePosition', 'readOnly', 'reduceAnimations', 'referenceDate', 'selectedSections', 'shouldDisableTime', 'skipDisabled', 'slotProps', 'slots', 'sx', 'thresholdToRenderTimeInASingleColumn', 'timeSteps', 'timezone', 'value', 'view', 'viewRenderers', 'views'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/time-range-picker',
-    false,
-    /\.\/time-range-picker.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TimeRangePicker" allowedProps={allowedProps}>
+      <TypesTimeRangePicker />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/date-pickers/types.date-calendar.md b/docs/pages/x/api/date-pickers/types.date-calendar.md
new file mode 100644
index 0000000000000..83a685dcd5cb0
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-calendar.md
@@ -0,0 +1,1018 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-calendar.md'
+
+## API Reference
+
+### DateCalendar
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
+
+**DateCalendar Props:**
+
+| Prop                        | Type                                                                                     | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                           |
+| :-------------------------- | :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                | `any \| null`                                                                            | -                                                                                                        | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                            |
+| value                       | `any \| null`                                                                            | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                        |
+| classes                     | `Partial<DateCalendarClasses>`                                                           | -                                                                                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                               |
+| dayOfWeekFormatter          | `((date: any) => string)`                                                                | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                             |
+| disableFuture               | `boolean`                                                                                | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                     |
+| disableHighlightToday       | `boolean`                                                                                | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                            |
+| disablePast                 | `boolean`                                                                                | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                    |
+| displayWeekNumber           | `boolean`                                                                                | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                           |
+| fixedWeekNumber             | `number`                                                                                 | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                         |
+| focusedView                 | `DateView \| null`                                                                       | -                                                                                                        | Controlled focused view.                                                                                                                                                                                                                                                                              |
+| loading                     | `boolean`                                                                                | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                               |
+| maxDate                     | `any`                                                                                    | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                              |
+| minDate                     | `any`                                                                                    | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                              |
+| monthsPerRow                | `3 \| 4`                                                                                 | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                              |
+| onChange                    | `((value: any, selectionState?: PickerSelectionState, selectedView?: DateView) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                |
+| onFocusedViewChange         | `((view: DateView, hasFocus: boolean) => void)`                                          | -                                                                                                        | Callback fired on focused view change.                                                                                                                                                                                                                                                                |
+| onMonthChange               | `((month: any) => void)`                                                                 | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                       |
+| onViewChange                | `((view: DateView) => void)`                                                             | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                        |
+| onYearChange                | `((year: any) => void)`                                                                  | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                        |
+| openTo                      | `DateView`                                                                               | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                           |
+| reduceAnimations            | `boolean`                                                                                | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                  |
+| referenceDate               | `any`                                                                                    | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.``     | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                               |
+| renderLoading               | `(() => React.ReactNode)`                                                                | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                      |
+| shouldDisableDate           | `((day: any) => boolean)`                                                                | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                         |
+| shouldDisableMonth          | `((month: any) => boolean)`                                                              | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                               |
+| shouldDisableYear           | `((year: any) => boolean)`                                                               | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                |
+| showDaysOutsideCurrentMonth | `boolean`                                                                                | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers. |
+| slotProps                   | `DateCalendarSlotProps`                                                                  | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                               |
+| slots                       | `DateCalendarSlots`                                                                      | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                          |
+| sx                          | `SxProps<Theme>`                                                                         | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                               |
+| timezone                    | `PickersTimezone`                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                        |
+| view                        | `DateView`                                                                               | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                       |
+| views                       | `DateView[]`                                                                             | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                      |
+| yearsOrder                  | `'asc' \| 'desc'`                                                                        | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                            |
+| yearsPerRow                 | `3 \| 4`                                                                                 | `3`                                                                                                      | Years rendered per row.                                                                                                                                                                                                                                                                               |
+| autoFocus                   | `boolean`                                                                                | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                    |
+| disabled                    | `boolean`                                                                                | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                  |
+| readOnly                    | `boolean`                                                                                | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                  |
+| className                   | `string`                                                                                 | -                                                                                                        | -                                                                                                                                                                                                                                                                                                     |
+
+### getDateCalendarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### dateCalendarClasses
+
+```typescript
+type dateCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the transition group element. */
+  viewTransitionContainer: string;
+};
+```
+
+### DateCalendarClasses
+
+```typescript
+type DateCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the transition group element. */
+  viewTransitionContainer: string;
+};
+```
+
+### DateCalendarClassKey
+
+```typescript
+type DateCalendarClassKey = 'root' | 'viewTransitionContainer';
+```
+
+### DateCalendarProps
+
+```typescript
+type DateCalendarProps = {
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate?: any;
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateCalendarClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateCalendarSlotProps;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Years rendered per row.
+   * @default 3
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The view type. Will be one of date or time views.
+   */
+  onChange?: (value: any, selectionState?: PickerSelectionState, selectedView?: DateView) => void;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateView;
+  /** Available views. */
+  views?: DateView[];
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  /** Controlled focused view. */
+  focusedView?: DateView | null;
+  /**
+   * Callback fired on focused view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onFocusedViewChange?: (view: DateView, hasFocus: boolean) => void;
+};
+```
+
+### DateCalendarSlotProps
+
+```typescript
+type DateCalendarSlotProps = {
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'className'
+            | 'children'
+            | 'sx'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'className'
+            | 'children'
+            | 'sx'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'className'
+            | 'children'
+            | 'sx'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+};
+```
+
+### DateCalendarSlots
+
+```typescript
+type DateCalendarSlots = {
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+};
+```
+
+### dayCalendarClasses
+
+```typescript
+type dayCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the header element. */
+  header: string;
+  /** Styles applied to the week day label element. */
+  weekDayLabel: string;
+  /** Styles applied to the loading container element. */
+  loadingContainer: string;
+  /** Styles applied to the slide transition element. */
+  slideTransition: string;
+  /** Styles applied to the month container element. */
+  monthContainer: string;
+  /** Styles applied to the week container element. */
+  weekContainer: string;
+  /** Styles applied to the week number header */
+  weekNumberLabel: string;
+  /** Styles applied to the week number element */
+  weekNumber: string;
+};
+```
+
+### DayCalendarClasses
+
+```typescript
+type DayCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the header element. */
+  header: string;
+  /** Styles applied to the week day label element. */
+  weekDayLabel: string;
+  /** Styles applied to the loading container element. */
+  loadingContainer: string;
+  /** Styles applied to the slide transition element. */
+  slideTransition: string;
+  /** Styles applied to the month container element. */
+  monthContainer: string;
+  /** Styles applied to the week container element. */
+  weekContainer: string;
+  /** Styles applied to the week number header */
+  weekNumberLabel: string;
+  /** Styles applied to the week number element */
+  weekNumber: string;
+};
+```
+
+### DayCalendarClassKey
+
+```typescript
+type DayCalendarClassKey =
+  | 'root'
+  | 'header'
+  | 'weekDayLabel'
+  | 'loadingContainer'
+  | 'slideTransition'
+  | 'monthContainer'
+  | 'weekContainer'
+  | 'weekNumberLabel'
+  | 'weekNumber';
+```
+
+### ExportedPickersFadeTransitionGroupProps
+
+```typescript
+type ExportedPickersFadeTransitionGroupProps = {
+  className?: string;
+  reduceAnimations: boolean;
+  transKey: React.Key;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersFadeTransitionGroupClasses>;
+};
+```
+
+### ExportedSlideTransitionProps
+
+```typescript
+type ExportedSlideTransitionProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersSlideTransitionClasses>;
+};
+```
+
+### pickersFadeTransitionGroupClasses
+
+```typescript
+type pickersFadeTransitionGroupClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### PickersFadeTransitionGroupClasses
+
+```typescript
+type PickersFadeTransitionGroupClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### PickersFadeTransitionGroupClassKey
+
+```typescript
+type PickersFadeTransitionGroupClassKey = 'root';
+```
+
+### PickersFadeTransitionGroupProps
+
+```typescript
+type PickersFadeTransitionGroupProps = {
+  children: ReactElement;
+  className?: string;
+  reduceAnimations: boolean;
+  transKey: React.Key;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersFadeTransitionGroupClasses>;
+};
+```
+
+### pickersSlideTransitionClasses
+
+```typescript
+type pickersSlideTransitionClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to content element sliding in from left. */
+  'slideEnter-left': string;
+  /** Styles applied to content element sliding in from right. */
+  'slideEnter-right': string;
+  /** Styles applied to the element entering (transitioning into) the container. */
+  slideEnterActive: string;
+  /** Styles applied to the element leaving (transitioning out of) the container. */
+  slideExit: string;
+  /** Styles applied to the element on the left leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-left': string;
+  /** Styles applied to the element on the right leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-right': string;
+};
+```
+
+### PickersSlideTransitionClasses
+
+```typescript
+type PickersSlideTransitionClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to content element sliding in from left. */
+  'slideEnter-left': string;
+  /** Styles applied to content element sliding in from right. */
+  'slideEnter-right': string;
+  /** Styles applied to the element entering (transitioning into) the container. */
+  slideEnterActive: string;
+  /** Styles applied to the element leaving (transitioning out of) the container. */
+  slideExit: string;
+  /** Styles applied to the element on the left leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-left': string;
+  /** Styles applied to the element on the right leaving (transitioning out of) the container. */
+  'slideExitActiveLeft-right': string;
+};
+```
+
+### PickersSlideTransitionClassKey
+
+```typescript
+type PickersSlideTransitionClassKey =
+  | 'root'
+  | 'slideEnter-left'
+  | 'slideEnter-right'
+  | 'slideEnterActive'
+  | 'slideExit'
+  | 'slideExitActiveLeft-left'
+  | 'slideExitActiveLeft-right';
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-calendar.ts b/docs/pages/x/api/date-pickers/types.date-calendar.ts
new file mode 100644
index 0000000000000..d03f2285f641f
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-calendar.ts
@@ -0,0 +1,4 @@
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateCalendar = createTypes(import.meta.url, DateCalendar);
diff --git a/docs/pages/x/api/date-pickers/types.date-field.md b/docs/pages/x/api/date-pickers/types.date-field.md
new file mode 100644
index 0000000000000..43cc0ed2c70af
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-field.md
@@ -0,0 +1,684 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-field.md'
+
+## API Reference
+
+### DateField
+
+Demos:
+
+- [DateField](http://mui.com/x/react-date-pickers/date-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [DateField API](https://mui.com/x/api/date-pickers/date-field/)
+
+**DateField Props:**
+
+| Prop                      | Type                                                 | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :------------------------ | :--------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                      | `string`                                             | -                                                                                                                                                        | Name attribute of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| label                     | `React.ReactNode`                                    | -                                                                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| defaultValue              | `any`                                                | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                     | `any`                                                | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onClick                   | `React.MouseEventHandler<HTMLDivElement>`            | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| areAllSectionsEmpty       | `boolean`                                            | -                                                                                                                                                        | Is `true` if the current values equals the empty value.&#xA;For a single item value, it means that `value === null`&#xA;For a range value, it means that `value === [null, null]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| clearButtonPosition       | `'start' \| 'end'`                                   | `'end'`                                                                                                                                                  | The position at which the clear button is placed.&#xA;If the field is not clearable, the button is not rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| clearable                 | `boolean`                                            | `false`                                                                                                                                                  | If `true`, a clear button will be shown in the field allowing value clearing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| disableFuture             | `boolean`                                            | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disablePast               | `boolean`                                            | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endAdornment              | `React.ReactNode`                                    | -                                                                                                                                                        | End `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| error                     | `boolean`                                            | `false`                                                                                                                                                  | If `true`, the `input` will indicate an error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| fieldRef                  | `React.Ref<FieldRef<any>>`                           | -                                                                                                                                                        | The ref object used to imperatively interact with the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| focused                   | `boolean`                                            | -                                                                                                                                                        | If `true`, the component is displayed in focused state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| formatDensity             | `'dense' \| 'spacious'`                              | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| fullWidth                 | `boolean`                                            | `false`                                                                                                                                                  | If `true`, the input will take up the full width of its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| helperText                | `React.ReactNode`                                    | -                                                                                                                                                        | The helper text content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxDate                   | `any`                                                | `2099-12-31`                                                                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| minDate                   | `any`                                                | `1900-01-01`                                                                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| onBlur                    | `React.FocusEventHandler<HTMLDivElement>`            | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onChange                  | `FieldChangeHandler<any, DateValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onClear                   | `React.MouseEventHandler`                            | -                                                                                                                                                        | Callback fired when the clear button is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onError                   | `((error: DateValidationError, value: any) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onFocus                   | `React.FocusEventHandler<HTMLDivElement>`            | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onInput                   | `React.FormEventHandler<HTMLDivElement>`             | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onKeyDown                 | `React.RefCallback`                                  | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onPaste                   | `React.ClipboardEventHandler<HTMLDivElement>`        | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange  | `((newValue: FieldSelectedSections) => void)`        | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| openPickerButtonPosition  | `'start' \| 'end'`                                   | `'end'`                                                                                                                                                  | The position at which the opening button is placed.&#xA;If there is no Picker to open, the button is not rendered                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate             | `any`                                                | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections          | `FieldSelectedSections`                              | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableDate         | `((day: any) => boolean)`                            | -                                                                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| shouldDisableMonth        | `((month: any) => boolean)`                          | -                                                                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| shouldDisableYear         | `((year: any) => boolean)`                           | -                                                                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldRespectLeadingZeros | `boolean`                                            | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                 | `DateFieldSlotProps`                                 | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                     | `DateFieldSlots`                                     | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startAdornment            | `React.ReactNode`                                    | -                                                                                                                                                        | Start `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| timezone                  | `PickersTimezone`                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| variant                   | `'filled' \| 'outlined' \| 'standard'`               | `'outlined'`                                                                                                                                             | The variant to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| format                    | `string`                                             | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                 | `boolean`                                            | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                  | `boolean`                                            | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                  | `boolean`                                            | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| inputRef                  | `React.Ref<HTMLInputElement>`                        | -                                                                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| id                        | `string`                                             | -                                                                                                                                                        | The id of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+
+### unstable_useDateField
+
+**Parameters:**
+
+| Parameter | Type                | Default | Description |
+| :-------- | :------------------ | :------ | :---------- |
+| props     | `UseDateFieldProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = UseFieldReturnValue<UseDateFieldProps>;
+```
+
+## Additional Types
+
+### DateFieldProps
+
+```typescript
+type DateFieldProps = {
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: any;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<any, DateValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateValidationError, value: any) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<any>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'filled' | 'outlined' | 'standard';
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  onInput?: React.FormEventHandler<HTMLDivElement>;
+  onKeyDown?: React.RefCallback;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty?: boolean;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** The helper text content. */
+  helperText?: React.ReactNode;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateFieldSlotProps;
+};
+```
+
+### DateFieldSlotProps
+
+```typescript
+type DateFieldSlotProps = {
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### DateFieldSlots
+
+```typescript
+type DateFieldSlots = {
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'style'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+};
+```
+
+### UseDateFieldProps
+
+```typescript
+type UseDateFieldProps = {
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: any;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<any, DateValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateValidationError, value: any) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<any>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (
+  value: any,
+  context: {
+    validationError:
+      | 'invalidDate'
+      | 'disableFuture'
+      | 'disablePast'
+      | null
+      | 'shouldDisableDate'
+      | 'shouldDisableMonth'
+      | 'shouldDisableYear'
+      | 'minDate'
+      | 'maxDate';
+  },
+) => void;
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-field.ts b/docs/pages/x/api/date-pickers/types.date-field.ts
new file mode 100644
index 0000000000000..817e0ad2a9336
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-field.ts
@@ -0,0 +1,4 @@
+import { DateField } from '@mui/x-date-pickers/DateField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateField = createTypes(import.meta.url, DateField);
diff --git a/docs/pages/x/api/date-pickers/types.date-picker-toolbar.md b/docs/pages/x/api/date-pickers/types.date-picker-toolbar.md
new file mode 100644
index 0000000000000..a7d6c55948df9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-picker-toolbar.md
@@ -0,0 +1,2050 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-picker-toolbar.md'
+
+## API Reference
+
+### DatePicker
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/)
+
+**DatePicker Props:**
+
+| Prop                        | Type                                                                               | Default                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------------- | :--------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                        | `string`                                                                           | -                                                                                                            | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                       | `React.ReactNode`                                                                  | -                                                                                                            | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                | `any`                                                                              | -                                                                                                            | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                       | `any`                                                                              | -                                                                                                            | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                        | `boolean`                                                                          | `false`                                                                                                      | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| closeOnSelect               | `boolean`                                                                          | `` `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). `` | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter          | `((date: any) => string)`                                                          | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                    | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| desktopModeMediaQuery       | `string`                                                                           | `'@media (pointer: fine)'`                                                                                   | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture               | `boolean`                                                                          | `false`                                                                                                      | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday       | `boolean`                                                                          | `false`                                                                                                      | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker           | `boolean`                                                                          | `false`                                                                                                      | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                 | `boolean`                                                                          | `false`                                                                                                      | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber           | `boolean`                                                                          | -                                                                                                            | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber             | `number`                                                                           | -                                                                                                            | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity               | `'dense' \| 'spacious'`                                                            | `"dense"`                                                                                                    | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus    | `boolean`                                                                          | `false`                                                                                                      | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                     | `boolean`                                                                          | `false`                                                                                                      | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                  | `PickersInputComponentLocaleText`                                                  | -                                                                                                            | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                     | `any`                                                                              | `2099-12-31`                                                                                                 | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                     | `any`                                                                              | `1900-01-01`                                                                                                 | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| monthsPerRow                | `3 \| 4`                                                                           | `3`                                                                                                          | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                            | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                            | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                     | `(() => void)`                                                                     | -                                                                                                            | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                     | `((error: DateValidationError, value: any) => void)`                               | -                                                                                                            | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange               | `((month: any) => void)`                                                           | -                                                                                                            | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                      | `(() => void)`                                                                     | -                                                                                                            | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange    | `((newValue: FieldSelectedSections) => void)`                                      | -                                                                                                            | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                | `((view: DateView) => void)`                                                       | -                                                                                                            | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                | `((year: any) => void)`                                                            | -                                                                                                            | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                      | `DateView`                                                                         | -                                                                                                            | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations            | `boolean`                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 ``     | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate               | `any`                                                                              | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``      | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading               | `(() => React.ReactNode)`                                                          | `() => <span>...</span>`                                                                                     | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections            | `FieldSelectedSections`                                                            | -                                                                                                            | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate           | `((day: any) => boolean)`                                                          | -                                                                                                            | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth          | `((month: any) => boolean)`                                                        | -                                                                                                            | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableYear           | `((year: any) => boolean)`                                                         | -                                                                                                            | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth | `boolean`                                                                          | `false`                                                                                                      | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                   | `DatePickerSlotProps`                                                              | `{}`                                                                                                         | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                       | `DatePickerSlots`                                                                  | `{}`                                                                                                         | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                          | `SxProps<Theme>`                                                                   | -                                                                                                            | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                    | `PickersTimezone`                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                      | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                        | `DateView`                                                                         | -                                                                                                            | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers               | `Partial<DatePickerViewRenderers<DateView>>`                                       | -                                                                                                            | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                       | `DateView[]`                                                                       | -                                                                                                            | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                  | `'asc' \| 'desc'`                                                                  | `'asc'`                                                                                                      | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                 | `3 \| 4`                                                                           | `4 on desktop, 3 on mobile`                                                                                  | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                      | `string`                                                                           | -                                                                                                            | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                   | `boolean`                                                                          | -                                                                                                            | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                    | `boolean`                                                                          | `false`                                                                                                      | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                    | `boolean`                                                                          | `false`                                                                                                      | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                 | `PickerOrientation`                                                                | -                                                                                                            | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                    | `React.Ref<HTMLInputElement>`                                                      | -                                                                                                            | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                   | `string`                                                                           | -                                                                                                            | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DatePickerToolbar
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
+
+**DatePickerToolbar Props:**
+
+| Prop               | Type                                | Default                                       | Description                                                                             |
+| :----------------- | :---------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                           | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| classes            | `Partial<DatePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                    | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                            | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                            | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                   | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                            | -                                             | -                                                                                       |
+
+## Additional Types
+
+### DatePickerFieldProps
+
+Props the field can receive when used inside a Date Picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
+
+```typescript
+type DatePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  id?: string;
+};
+```
+
+### DatePickerProps
+
+```typescript
+type DatePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DatePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateView;
+  /** Available views. */
+  views?: DateView[];
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DatePickerSlotProps
+
+```typescript
+type DatePickerSlotProps = {
+  toolbar?: ExportedDatePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DatePickerSlots
+
+```typescript
+type DatePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DatePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DatePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### datePickerToolbarClasses
+
+```typescript
+type datePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the title element. */
+  title: string;
+};
+```
+
+### DatePickerToolbarClasses
+
+```typescript
+type DatePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the title element. */
+  title: string;
+};
+```
+
+### DatePickerToolbarClassKey
+
+```typescript
+type DatePickerToolbarClassKey = 'root' | 'title';
+```
+
+### DatePickerToolbarProps
+
+```typescript
+type DatePickerToolbarProps = {
+  titleId?: string;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DatePickerToolbarClasses>;
+};
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-picker-toolbar.ts b/docs/pages/x/api/date-pickers/types.date-picker-toolbar.ts
new file mode 100644
index 0000000000000..29b09a697eddd
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-picker-toolbar.ts
@@ -0,0 +1,4 @@
+import { DatePickerToolbar } from '@mui/x-date-pickers/DatePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDatePickerToolbar = createTypes(import.meta.url, DatePickerToolbar);
diff --git a/docs/pages/x/api/date-pickers/types.date-picker.md b/docs/pages/x/api/date-pickers/types.date-picker.md
new file mode 100644
index 0000000000000..874b2801a6052
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-picker.md
@@ -0,0 +1,2050 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-picker.md'
+
+## API Reference
+
+### DatePicker
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/)
+
+**DatePicker Props:**
+
+| Prop                        | Type                                                                               | Default                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------------- | :--------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                        | `string`                                                                           | -                                                                                                            | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                       | `React.ReactNode`                                                                  | -                                                                                                            | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                | `any`                                                                              | -                                                                                                            | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                       | `any`                                                                              | -                                                                                                            | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                        | `boolean`                                                                          | `false`                                                                                                      | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| closeOnSelect               | `boolean`                                                                          | `` `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). `` | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter          | `((date: any) => string)`                                                          | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                    | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| desktopModeMediaQuery       | `string`                                                                           | `'@media (pointer: fine)'`                                                                                   | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture               | `boolean`                                                                          | `false`                                                                                                      | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday       | `boolean`                                                                          | `false`                                                                                                      | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker           | `boolean`                                                                          | `false`                                                                                                      | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                 | `boolean`                                                                          | `false`                                                                                                      | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber           | `boolean`                                                                          | -                                                                                                            | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber             | `number`                                                                           | -                                                                                                            | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity               | `'dense' \| 'spacious'`                                                            | `"dense"`                                                                                                    | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus    | `boolean`                                                                          | `false`                                                                                                      | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                     | `boolean`                                                                          | `false`                                                                                                      | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                  | `PickersInputComponentLocaleText`                                                  | -                                                                                                            | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                     | `any`                                                                              | `2099-12-31`                                                                                                 | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                     | `any`                                                                              | `1900-01-01`                                                                                                 | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| monthsPerRow                | `3 \| 4`                                                                           | `3`                                                                                                          | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                            | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                            | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                     | `(() => void)`                                                                     | -                                                                                                            | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                     | `((error: DateValidationError, value: any) => void)`                               | -                                                                                                            | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange               | `((month: any) => void)`                                                           | -                                                                                                            | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                      | `(() => void)`                                                                     | -                                                                                                            | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange    | `((newValue: FieldSelectedSections) => void)`                                      | -                                                                                                            | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                | `((view: DateView) => void)`                                                       | -                                                                                                            | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                | `((year: any) => void)`                                                            | -                                                                                                            | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                      | `DateView`                                                                         | -                                                                                                            | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations            | `boolean`                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 ``     | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate               | `any`                                                                              | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``      | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading               | `(() => React.ReactNode)`                                                          | `() => <span>...</span>`                                                                                     | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections            | `FieldSelectedSections`                                                            | -                                                                                                            | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate           | `((day: any) => boolean)`                                                          | -                                                                                                            | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth          | `((month: any) => boolean)`                                                        | -                                                                                                            | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableYear           | `((year: any) => boolean)`                                                         | -                                                                                                            | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth | `boolean`                                                                          | `false`                                                                                                      | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                   | `DatePickerSlotProps`                                                              | `{}`                                                                                                         | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                       | `DatePickerSlots`                                                                  | `{}`                                                                                                         | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                          | `SxProps<Theme>`                                                                   | -                                                                                                            | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                    | `PickersTimezone`                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                      | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                        | `DateView`                                                                         | -                                                                                                            | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers               | `Partial<DatePickerViewRenderers<DateView>>`                                       | -                                                                                                            | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                       | `DateView[]`                                                                       | -                                                                                                            | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                  | `'asc' \| 'desc'`                                                                  | `'asc'`                                                                                                      | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                 | `3 \| 4`                                                                           | `4 on desktop, 3 on mobile`                                                                                  | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                      | `string`                                                                           | -                                                                                                            | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                   | `boolean`                                                                          | -                                                                                                            | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                    | `boolean`                                                                          | `false`                                                                                                      | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                    | `boolean`                                                                          | `false`                                                                                                      | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                 | `PickerOrientation`                                                                | -                                                                                                            | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                    | `React.Ref<HTMLInputElement>`                                                      | -                                                                                                            | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                   | `string`                                                                           | -                                                                                                            | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DatePickerToolbar
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
+
+**DatePickerToolbar Props:**
+
+| Prop               | Type                                | Default                                       | Description                                                                             |
+| :----------------- | :---------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                           | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| classes            | `Partial<DatePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                    | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                            | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                            | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                   | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                            | -                                             | -                                                                                       |
+
+## Additional Types
+
+### DatePickerFieldProps
+
+Props the field can receive when used inside a Date Picker (<DatePicker />, <DesktopDatePicker /> or <MobileDatePicker /> component).
+
+```typescript
+type DatePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  id?: string;
+};
+```
+
+### DatePickerProps
+
+```typescript
+type DatePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DatePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateView;
+  /** Available views. */
+  views?: DateView[];
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DatePickerSlotProps
+
+```typescript
+type DatePickerSlotProps = {
+  toolbar?: ExportedDatePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DatePickerSlots
+
+```typescript
+type DatePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DatePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DatePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### datePickerToolbarClasses
+
+```typescript
+type datePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the title element. */
+  title: string;
+};
+```
+
+### DatePickerToolbarClasses
+
+```typescript
+type DatePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the title element. */
+  title: string;
+};
+```
+
+### DatePickerToolbarClassKey
+
+```typescript
+type DatePickerToolbarClassKey = 'root' | 'title';
+```
+
+### DatePickerToolbarProps
+
+```typescript
+type DatePickerToolbarProps = {
+  titleId?: string;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DatePickerToolbarClasses>;
+};
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-picker.ts b/docs/pages/x/api/date-pickers/types.date-picker.ts
new file mode 100644
index 0000000000000..9b5f25b113456
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-picker.ts
@@ -0,0 +1,4 @@
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDatePicker = createTypes(import.meta.url, DatePicker);
diff --git a/docs/pages/x/api/date-pickers/types.date-range-calendar.md b/docs/pages/x/api/date-pickers/types.date-range-calendar.md
new file mode 100644
index 0000000000000..975d52e4118d6
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-calendar.md
@@ -0,0 +1,963 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-range-calendar.md'
+
+## API Reference
+
+### DateRangeCalendar
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
+
+API:
+
+- [DateRangeCalendar API](https://mui.com/x/api/date-pickers/date-range-calendar/)
+
+**DateRangeCalendar Props:**
+
+| Prop                         | Type                                                                                               | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                           |
+| :--------------------------- | :------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                 | `PickerRangeValue`                                                                                 | -                                                                                                        | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                            |
+| value                        | `PickerRangeValue`                                                                                 | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                        |
+| availableRangePositions      | `RangePosition[]`                                                                                  | `['start', 'end']`                                                                                       | Range positions available for selection.&#xA;This list is checked against when checking if a next range position can be selected. Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.                                 |
+| calendars                    | `1 \| 2 \| 3`                                                                                      | `2`                                                                                                      | The number of calendars to render.                                                                                                                                                                                                                                                                    |
+| classes                      | `Partial<DateRangeCalendarClasses>`                                                                | -                                                                                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                               |
+| currentMonthCalendarPosition | `1 \| 2 \| 3`                                                                                      | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                            |
+| dayOfWeekFormatter           | `((date: any) => string)`                                                                          | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                             |
+| defaultRangePosition         | `RangePosition`                                                                                    | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                         |
+| disableAutoMonthSwitching    | `boolean`                                                                                          | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                            |
+| disableDragEditing           | `boolean`                                                                                          | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                     |
+| disableFuture                | `boolean`                                                                                          | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                     |
+| disableHighlightToday        | `boolean`                                                                                          | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                            |
+| disablePast                  | `boolean`                                                                                          | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                    |
+| displayWeekNumber            | `boolean`                                                                                          | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                           |
+| fixedWeekNumber              | `number`                                                                                           | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                         |
+| focusedView                  | `'day' \| null`                                                                                    | -                                                                                                        | Controlled focused view.                                                                                                                                                                                                                                                                              |
+| loading                      | `boolean`                                                                                          | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                               |
+| maxDate                      | `any`                                                                                              | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                              |
+| minDate                      | `any`                                                                                              | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                              |
+| onChange                     | `((value: PickerRangeValue, selectionState?: PickerSelectionState, selectedView?: 'day') => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                |
+| onFocusedViewChange          | `((view: 'day', hasFocus: boolean) => void)`                                                       | -                                                                                                        | Callback fired on focused view change.                                                                                                                                                                                                                                                                |
+| onMonthChange                | `((month: any) => void)`                                                                           | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                       |
+| onRangePositionChange        | `((rangePosition: RangePosition) => void)`                                                         | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                       |
+| onViewChange                 | `((view: 'day') => void)`                                                                          | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                        |
+| openTo                       | `'day'`                                                                                            | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                           |
+| rangePosition                | `RangePosition`                                                                                    | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                  |
+| reduceAnimations             | `boolean`                                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                  |
+| referenceDate                | `[any, any] \| any`                                                                                | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.``     | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                               |
+| renderLoading                | `(() => React.ReactNode)`                                                                          | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                    |
+| shouldDisableDate            | `((day: any, position: 'start' \| 'end') => boolean)`                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                         |
+| showDaysOutsideCurrentMonth  | `boolean`                                                                                          | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers. |
+| slotProps                    | `DateRangeCalendarSlotProps`                                                                       | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                               |
+| slots                        | `DateRangeCalendarSlots`                                                                           | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                          |
+| sx                           | `SxProps<Theme>`                                                                                   | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                               |
+| timezone                     | `PickersTimezone`                                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                        |
+| view                         | `'day'`                                                                                            | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                       |
+| views                        | `'day'[]`                                                                                          | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                      |
+| autoFocus                    | `boolean`                                                                                          | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                    |
+| disabled                     | `boolean`                                                                                          | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                  |
+| readOnly                     | `boolean`                                                                                          | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                  |
+| className                    | `string`                                                                                           | -                                                                                                        | -                                                                                                                                                                                                                                                                                                     |
+
+### getDateRangeCalendarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### dateRangeCalendarClasses
+
+```typescript
+type dateRangeCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container of a month. */
+  monthContainer: string;
+  /** Styles applied to the day calendar container when dragging */
+  dayDragging: string;
+};
+```
+
+### DateRangeCalendarClasses
+
+```typescript
+type DateRangeCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container of a month. */
+  monthContainer: string;
+  /** Styles applied to the day calendar container when dragging */
+  dayDragging: string;
+};
+```
+
+### DateRangeCalendarClassKey
+
+```typescript
+type DateRangeCalendarClassKey = 'root' | 'monthContainer' | 'dayDragging';
+```
+
+### DateRangeCalendarProps
+
+```typescript
+type DateRangeCalendarProps = {
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate?: [any, any] | any;
+  /**
+   * The number of calendars to render.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateRangeCalendarClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateRangeCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateRangeCalendarSlotProps;
+  /**
+   * Range positions available for selection.
+   * This list is checked against when checking if a next range position can be selected.
+   *
+   * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
+   * @default ['start', 'end']
+   */
+  availableRangePositions?: RangePosition[];
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The view type. Will be one of date or time views.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    selectionState?: PickerSelectionState,
+    selectedView?: 'day',
+  ) => void;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: 'day';
+  /** Available views. */
+  views?: 'day'[];
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: 'day') => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: 'day';
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  /** Controlled focused view. */
+  focusedView?: 'day' | null;
+  /**
+   * Callback fired on focused view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onFocusedViewChange?: (view: 'day', hasFocus: boolean) => void;
+};
+```
+
+### DateRangeCalendarSlotProps
+
+```typescript
+type DateRangeCalendarSlotProps = {
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'className'
+            | 'children'
+            | 'sx'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'className'
+            | 'children'
+            | 'sx'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'className'
+            | 'children'
+            | 'sx'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+};
+```
+
+### DateRangeCalendarSlots
+
+```typescript
+type DateRangeCalendarSlots = {
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+};
+```
+
+### ExportedDateRangeCalendarProps
+
+```typescript
+type ExportedDateRangeCalendarProps = {
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+## External Types
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-range-calendar.ts b/docs/pages/x/api/date-pickers/types.date-range-calendar.ts
new file mode 100644
index 0000000000000..dc29c377ee2a6
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-calendar.ts
@@ -0,0 +1,4 @@
+import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateRangeCalendar = createTypes(import.meta.url, DateRangeCalendar);
diff --git a/docs/pages/x/api/date-pickers/types.date-range-picker-day.md b/docs/pages/x/api/date-pickers/types.date-range-picker-day.md
new file mode 100644
index 0000000000000..f9427e771f39a
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-picker-day.md
@@ -0,0 +1,327 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-range-picker-day.md'
+
+## API Reference
+
+### DateRangePickerDay
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+
+API:
+
+- [DateRangePickerDay API](https://mui.com/x/api/date-pickers/date-range-picker-day/)
+
+**DateRangePickerDay Props:**
+
+| Prop                        | Type                                                                           | Default    | Description                                                                                                                                                                                                                                                                                           |
+| :-------------------------- | :----------------------------------------------------------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick                     | `((event: MuiEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void)` | `() => {}` | Callback fired when the component is clicked.                                                                                                                                                                                                                                                         |
+| classes                     | `Partial<DateRangePickerDayClasses>`                                           | -          | Override or extend the styles applied to the component.                                                                                                                                                                                                                                               |
+| day\*                       | `any`                                                                          | -          | The date to show.                                                                                                                                                                                                                                                                                     |
+| disableHighlightToday       | `boolean`                                                                      | `false`    | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                            |
+| draggable                   | `boolean`                                                                      | `false`    | If `true`, the day can be dragged to change the current date range.                                                                                                                                                                                                                                   |
+| isAnimating                 | `boolean`                                                                      | `false`    | If `true`, the day is being animated.                                                                                                                                                                                                                                                                 |
+| isDayFillerCell             | `boolean`                                                                      | `false`    | If `true`, the day is a filler day (its content is hidden).                                                                                                                                                                                                                                           |
+| isEndOfHighlighting         | `boolean`                                                                      | -          | Set to `true` if the `day` is the end of a highlighted date range.                                                                                                                                                                                                                                    |
+| isEndOfPreviewing           | `boolean`                                                                      | -          | Set to `true` if the `day` is the end of a previewing date range.                                                                                                                                                                                                                                     |
+| isFirstVisibleCell          | `boolean`                                                                      | `false`    | If `true`, the day is the first visible cell of the month.                                                                                                                                                                                                                                            |
+| isHighlighting              | `boolean`                                                                      | -          | Set to `true` if the `day` is in a highlighted date range.                                                                                                                                                                                                                                            |
+| isLastVisibleCell           | `boolean`                                                                      | `false`    | If `true`, the day is the last visible cell of the month.                                                                                                                                                                                                                                             |
+| isPreviewing                | `boolean`                                                                      | -          | Set to `true` if the `day` is in a preview date range.                                                                                                                                                                                                                                                |
+| isStartOfHighlighting       | `boolean`                                                                      | -          | Set to `true` if the `day` is the start of a highlighted date range.                                                                                                                                                                                                                                  |
+| isStartOfPreviewing         | `boolean`                                                                      | -          | Set to `true` if the `day` is the start of a previewing date range.                                                                                                                                                                                                                                   |
+| isVisuallySelected          | `boolean`                                                                      | -          | Indicates if the day should be visually selected.                                                                                                                                                                                                                                                     |
+| onBlur                      | `((event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void)`    | `() => {}` | Callback fired when the component is blurred.                                                                                                                                                                                                                                                         |
+| onDaySelect\*               | `((day: any) => void)`                                                         | -          | Callback fired when the day is selected.                                                                                                                                                                                                                                                              |
+| onFocus                     | `((event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void)`    | `() => {}` | Callback fired when the component is focused.                                                                                                                                                                                                                                                         |
+| onKeyDown                   | `((event: React.KeyboardEvent<HTMLButtonElement>, day: any) => void)`          | `() => {}` | Callback fired when a key is pressed.                                                                                                                                                                                                                                                                 |
+| onMouseDown                 | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)`           | `() => {}` | Callback fired when the mouse button is pressed.                                                                                                                                                                                                                                                      |
+| onMouseEnter                | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, day: any) => void)` | `() => {}` | Callback fired when the mouse enters the component.                                                                                                                                                                                                                                                   |
+| outsideCurrentMonth         | `boolean`                                                                      | `false`    | If `true`, the day is outside the current month.                                                                                                                                                                                                                                                      |
+| selected                    | `boolean`                                                                      | `false`    | If `true`, renders as selected.                                                                                                                                                                                                                                                                       |
+| showDaysOutsideCurrentMonth | `boolean`                                                                      | `false`    | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers. |
+| today                       | `boolean`                                                                      | `false`    | If `true`, today's day is highlighted.                                                                                                                                                                                                                                                                |
+| disabled                    | `boolean`                                                                      | `false`    | If `true`, the day is disabled.                                                                                                                                                                                                                                                                       |
+
+### getDateRangePickerDayUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### dateRangePickerDayClasses
+
+```typescript
+type dateRangePickerDayClasses = Record<
+  | 'disabled'
+  | 'draggable'
+  | 'selected'
+  | 'today'
+  | 'root'
+  | 'dayOutsideMonth'
+  | 'fillerCell'
+  | 'previewStart'
+  | 'previewEnd'
+  | 'insidePreviewing'
+  | 'selectionStart'
+  | 'selectionEnd'
+  | 'insideSelection'
+  | 'startOfWeek'
+  | 'endOfWeek'
+  | 'startOfMonth'
+  | 'endOfMonth'
+  | 'firstVisibleCell'
+  | 'lastVisibleCell'
+  | 'previewed',
+  string
+>;
+```
+
+### DateRangePickerDayClasses
+
+```typescript
+type DateRangePickerDayClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `isDayOutsideMonth=true` and `showDaysOutsideCurrentMonth=true`. */
+  dayOutsideMonth: string;
+  /** Styles applied to the root element if `isDayOutsideMonth=true` and `showDaysOutsideCurrentMonth=false`. */
+  fillerCell: string;
+  /** Styles applied to the root element if `disableHighlightToday=false` and `isDayCurrent=true`. */
+  today: string;
+  /** State class applied to the root element if `isDayDisabled=true`. */
+  disabled: string;
+  /** State class applied to the root element if `isDaySelected=true`. */
+  selected: string;
+  /** Styles applied to the root element if `isDayPreviewStart=true`. */
+  previewStart: string;
+  /** Styles applied to the root element if `isDayPreviewEnd=true`. */
+  previewEnd: string;
+  /** Styles applied to the root element if `isDayInsidePreview=true`. */
+  insidePreviewing: string;
+  /** Styles applied to the root element if `isDaySelectionStart=true`. */
+  selectionStart: string;
+  /** Styles applied to the root element if `isDaySelectionEnd=true`. */
+  selectionEnd: string;
+  /** Styles applied to the root element if `isDayInsideSelection=true`. */
+  insideSelection: string;
+  /** Styles applied to the root element if `isDayStartOfWeek=true`. */
+  startOfWeek: string;
+  /** Styles applied to the root element if `isDayEndOfWeek=true`. */
+  endOfWeek: string;
+  /** Styles applied to the root element if `isDayStartOfMonth=true`. */
+  startOfMonth: string;
+  /** Styles applied to the root element if `isDayEndOfMonth=true`. */
+  endOfMonth: string;
+  /** Styles applied to the root element if `isDayFirstVisibleCell=true`. */
+  firstVisibleCell: string;
+  /** Styles applied to the root element if `isDayLastVisibleCell=true`. */
+  lastVisibleCell: string;
+  /** Styles applied to the root element if `isDayPreviewed=true`. */
+  previewed: string;
+  /** Styles applied to the root element if `isDayDraggable=true`. */
+  draggable: string;
+};
+```
+
+### DateRangePickerDayClassKey
+
+```typescript
+type DateRangePickerDayClassKey =
+  | 'disabled'
+  | 'draggable'
+  | 'selected'
+  | 'today'
+  | 'root'
+  | 'dayOutsideMonth'
+  | 'fillerCell'
+  | 'previewStart'
+  | 'previewEnd'
+  | 'insidePreviewing'
+  | 'selectionStart'
+  | 'selectionEnd'
+  | 'insideSelection'
+  | 'startOfWeek'
+  | 'endOfWeek'
+  | 'startOfMonth'
+  | 'endOfMonth'
+  | 'firstVisibleCell'
+  | 'lastVisibleCell'
+  | 'previewed';
+```
+
+### DateRangePickerDayOwnerState
+
+```typescript
+type DateRangePickerDayOwnerState = {
+  /** Whether the day is the first day of the selected range. */
+  isDaySelectionStart?: boolean;
+  /** Whether the day is the last day of the selected range. */
+  isDaySelectionEnd?: boolean;
+  /** Whether the day is within the selected range and is not its first or last day. */
+  isDayInsideSelection?: boolean;
+  /** Whether the day is within the preview range. */
+  isDayPreviewed?: boolean;
+  /** Whether the day is the first day of the preview range. */
+  isDayPreviewStart?: boolean;
+  /** Whether the day is the last day of the preview range. */
+  isDayPreviewEnd?: boolean;
+  /** Whether the day is within the preview range and is not its first or last day. */
+  isDayInsidePreview?: boolean;
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  isDayDraggable?: boolean;
+  /** Whether the day is the first day of the month. */
+  isDayStartOfMonth?: boolean;
+  /** Whether the day is the last day of the month. */
+  isDayEndOfMonth?: boolean;
+  /** Whether the day is the first visible cell of the month it's being rendered in. */
+  isDayFirstVisibleCell?: boolean;
+  /** Whether the day is the last visible cell of the month it's being rendered in. */
+  isDayLastVisibleCell?: boolean;
+  /** Whether the day is a filler day (its content is hidden). */
+  isDayFillerCell?: boolean;
+  day: any;
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  isDayCurrent: boolean;
+  isDayOutsideMonth: boolean;
+  isDayStartOfWeek: boolean;
+  isDayEndOfWeek: boolean;
+  disableHighlightToday: boolean;
+  showDaysOutsideCurrentMonth: boolean;
+};
+```
+
+### DateRangePickerDayProps
+
+```typescript
+type DateRangePickerDayProps = {
+  /** Set to `true` if the `day` is in a highlighted date range. */
+  isHighlighting?: boolean;
+  /** Set to `true` if the `day` is the end of a highlighted date range. */
+  isEndOfHighlighting?: boolean;
+  /** Set to `true` if the `day` is the start of a highlighted date range. */
+  isStartOfHighlighting?: boolean;
+  /** Set to `true` if the `day` is in a preview date range. */
+  isPreviewing?: boolean;
+  /** Set to `true` if the `day` is the end of a previewing date range. */
+  isEndOfPreviewing?: boolean;
+  /** Set to `true` if the `day` is the start of a previewing date range. */
+  isStartOfPreviewing?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateRangePickerDayClasses>;
+  /** Indicates if the day should be visually selected. */
+  isVisuallySelected?: boolean;
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * If `true`, the day is a filler day (its content is hidden).
+   * @default false
+   */
+  isDayFillerCell?: boolean;
+  /**
+   * Callback fired when the mouse enters the component.
+   * @default () => {}
+   */
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, day: any) => void;
+  /**
+   * Callback fired when the component is focused.
+   * @default () => {}
+   */
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void;
+  /**
+   * Callback fired when the component is blurred.
+   * @default () => {}
+   */
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void;
+  /**
+   * Callback fired when a key is pressed.
+   * @default () => {}
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, day: any) => void;
+  /**
+   * Callback fired when the mouse button is pressed.
+   * @default () => {}
+   */
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Callback fired when the component is clicked.
+   * @default () => {}
+   */
+  onClick?: (event: MuiEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void;
+  /**
+   * If `true`, the day is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /** The date to show. */
+  day: any;
+  /**
+   * If `true`, renders as selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * If `true`, today's day is highlighted.
+   * @default false
+   */
+  today?: boolean;
+  /**
+   * If `true`, the day is outside the current month.
+   * @default false
+   */
+  outsideCurrentMonth?: boolean;
+  /**
+   * If `true`, the day is the first visible cell of the month.
+   * @default false
+   */
+  isFirstVisibleCell?: boolean;
+  /**
+   * If `true`, the day is the last visible cell of the month.
+   * @default false
+   */
+  isLastVisibleCell?: boolean;
+  /**
+   * If `true`, the day is being animated.
+   * @default false
+   */
+  isAnimating?: boolean;
+  /** Callback fired when the day is selected. */
+  onDaySelect: (day: any) => void;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-range-picker-day.ts b/docs/pages/x/api/date-pickers/types.date-range-picker-day.ts
new file mode 100644
index 0000000000000..c9ccbc0f1df16
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-picker-day.ts
@@ -0,0 +1,4 @@
+import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateRangePickerDay = createTypes(import.meta.url, DateRangePickerDay);
diff --git a/docs/pages/x/api/date-pickers/types.date-range-picker-toolbar.md b/docs/pages/x/api/date-pickers/types.date-range-picker-toolbar.md
new file mode 100644
index 0000000000000..5185a602070b6
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-picker-toolbar.md
@@ -0,0 +1,2026 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-range-picker-toolbar.md'
+
+## API Reference
+
+### DateRangePicker
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/)
+
+**DateRangePicker Props:**
+
+| Prop                         | Type                                                                                                 | Default                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------- | :--------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                         | `string`                                                                                             | -                                                                                                            | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                        | `React.ReactNode`                                                                                    | -                                                                                                            | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                 | `PickerRangeValue`                                                                                   | -                                                                                                            | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                        | `PickerRangeValue`                                                                                   | -                                                                                                            | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                         | `boolean`                                                                                            | `false`                                                                                                      | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| calendars                    | `1 \| 2 \| 3`                                                                                        | `2`                                                                                                          | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                | `boolean`                                                                                            | `` `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). `` | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition | `1 \| 2 \| 3`                                                                                        | `1`                                                                                                          | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter           | `((date: any) => string)`                                                                            | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                    | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition         | `RangePosition`                                                                                      | `'start'`                                                                                                    | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery        | `string`                                                                                             | `'@media (pointer: fine)'`                                                                                   | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableAutoMonthSwitching    | `boolean`                                                                                            | `false`                                                                                                      | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing           | `boolean`                                                                                            | `false`                                                                                                      | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                | `boolean`                                                                                            | `false`                                                                                                      | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday        | `boolean`                                                                                            | `false`                                                                                                      | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker            | `boolean`                                                                                            | `false`                                                                                                      | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                  | `boolean`                                                                                            | `false`                                                                                                      | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber            | `boolean`                                                                                            | -                                                                                                            | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber              | `number`                                                                                             | -                                                                                                            | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                    | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus     | `boolean`                                                                                            | `false`                                                                                                      | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                      | `boolean`                                                                                            | `false`                                                                                                      | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                   | `PickersInputComponentLocaleText`                                                                    | -                                                                                                            | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                      | `any`                                                                                                | `2099-12-31`                                                                                                 | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                      | `any`                                                                                                | `1900-01-01`                                                                                                 | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                            | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                            | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                      | `(() => void)`                                                                                       | -                                                                                                            | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                      | `((error: DateRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                            | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                | `((month: any) => void)`                                                                             | -                                                                                                            | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                       | `(() => void)`                                                                                       | -                                                                                                            | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange        | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                            | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange     | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                            | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| rangePosition                | `RangePosition`                                                                                      | -                                                                                                            | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations             | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 ``     | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``      | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                | `(() => React.ReactNode)`                                                                            | `() => "..."`                                                                                                | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections             | `FieldSelectedSections`                                                                              | -                                                                                                            | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate            | `((day: any, position: 'start' \| 'end') => boolean)`                                                | -                                                                                                            | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| showDaysOutsideCurrentMonth  | `boolean`                                                                                            | `false`                                                                                                      | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                    | `DateRangePickerSlotProps`                                                                           | `{}`                                                                                                         | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                        | `DateRangePickerSlots`                                                                               | `{}`                                                                                                         | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                           | `SxProps<Theme>`                                                                                     | -                                                                                                            | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                     | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                      | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| viewRenderers                | `Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>`      | -                                                                                                            | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| format                       | `string`                                                                                             | -                                                                                                            | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                    | `boolean`                                                                                            | -                                                                                                            | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                     | `boolean`                                                                                            | `false`                                                                                                      | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                     | `boolean`                                                                                            | `false`                                                                                                      | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                     | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                            | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                    | `string`                                                                                             | -                                                                                                            | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateRangePickerToolbar
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/)
+
+**DateRangePickerToolbar Props:**
+
+| Prop               | Type                                     | Default                                       | Description                                                                             |
+| :----------------- | :--------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| classes            | `Partial<DateRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                         | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                 | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                 | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                        | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                 | -                                             | -                                                                                       |
+
+### getDateRangePickerToolbarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### DateRangePickerFieldProps
+
+Props the field can receive when used inside a Date Range Picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
+
+```typescript
+type DateRangePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  id?: string;
+};
+```
+
+### DateRangePickerProps
+
+```typescript
+type DateRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateRangePickerSlotProps;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<
+    PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>
+  >;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DateRangePickerSlotProps
+
+```typescript
+type DateRangePickerSlotProps = {
+  toolbar?: ExportedDateRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateRangePickerSlots
+
+```typescript
+type DateRangePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateRangePickerToolbarClasses
+
+```typescript
+type dateRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+};
+```
+
+### DateRangePickerToolbarClasses
+
+```typescript
+type DateRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+};
+```
+
+### DateRangePickerToolbarClassKey
+
+```typescript
+type DateRangePickerToolbarClassKey = 'root' | 'container';
+```
+
+### DateRangePickerToolbarProps
+
+```typescript
+type DateRangePickerToolbarProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateRangePickerToolbarClasses>;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  titleId?: string;
+};
+```
+
+## External Types
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-range-picker-toolbar.ts b/docs/pages/x/api/date-pickers/types.date-range-picker-toolbar.ts
new file mode 100644
index 0000000000000..77ac24134fb1a
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-picker-toolbar.ts
@@ -0,0 +1,4 @@
+import { DateRangePickerToolbar } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateRangePickerToolbar = createTypes(import.meta.url, DateRangePickerToolbar);
diff --git a/docs/pages/x/api/date-pickers/types.date-range-picker.md b/docs/pages/x/api/date-pickers/types.date-range-picker.md
new file mode 100644
index 0000000000000..78074be110e50
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-picker.md
@@ -0,0 +1,2026 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-range-picker.md'
+
+## API Reference
+
+### DateRangePicker
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/)
+
+**DateRangePicker Props:**
+
+| Prop                         | Type                                                                                                 | Default                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------- | :--------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                         | `string`                                                                                             | -                                                                                                            | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                        | `React.ReactNode`                                                                                    | -                                                                                                            | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                 | `PickerRangeValue`                                                                                   | -                                                                                                            | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                        | `PickerRangeValue`                                                                                   | -                                                                                                            | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                         | `boolean`                                                                                            | `false`                                                                                                      | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| calendars                    | `1 \| 2 \| 3`                                                                                        | `2`                                                                                                          | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                | `boolean`                                                                                            | `` `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). `` | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition | `1 \| 2 \| 3`                                                                                        | `1`                                                                                                          | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter           | `((date: any) => string)`                                                                            | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                    | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition         | `RangePosition`                                                                                      | `'start'`                                                                                                    | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery        | `string`                                                                                             | `'@media (pointer: fine)'`                                                                                   | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableAutoMonthSwitching    | `boolean`                                                                                            | `false`                                                                                                      | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing           | `boolean`                                                                                            | `false`                                                                                                      | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                | `boolean`                                                                                            | `false`                                                                                                      | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday        | `boolean`                                                                                            | `false`                                                                                                      | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker            | `boolean`                                                                                            | `false`                                                                                                      | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                  | `boolean`                                                                                            | `false`                                                                                                      | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber            | `boolean`                                                                                            | -                                                                                                            | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber              | `number`                                                                                             | -                                                                                                            | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                    | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus     | `boolean`                                                                                            | `false`                                                                                                      | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                      | `boolean`                                                                                            | `false`                                                                                                      | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                   | `PickersInputComponentLocaleText`                                                                    | -                                                                                                            | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                      | `any`                                                                                                | `2099-12-31`                                                                                                 | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                      | `any`                                                                                                | `1900-01-01`                                                                                                 | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                            | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                            | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                      | `(() => void)`                                                                                       | -                                                                                                            | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                      | `((error: DateRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                            | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                | `((month: any) => void)`                                                                             | -                                                                                                            | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                       | `(() => void)`                                                                                       | -                                                                                                            | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange        | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                            | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange     | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                            | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| rangePosition                | `RangePosition`                                                                                      | -                                                                                                            | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations             | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 ``     | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``      | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                | `(() => React.ReactNode)`                                                                            | `() => "..."`                                                                                                | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections             | `FieldSelectedSections`                                                                              | -                                                                                                            | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate            | `((day: any, position: 'start' \| 'end') => boolean)`                                                | -                                                                                                            | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| showDaysOutsideCurrentMonth  | `boolean`                                                                                            | `false`                                                                                                      | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                    | `DateRangePickerSlotProps`                                                                           | `{}`                                                                                                         | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                        | `DateRangePickerSlots`                                                                               | `{}`                                                                                                         | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                           | `SxProps<Theme>`                                                                                     | -                                                                                                            | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                     | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                      | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| viewRenderers                | `Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>`      | -                                                                                                            | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| format                       | `string`                                                                                             | -                                                                                                            | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                    | `boolean`                                                                                            | -                                                                                                            | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                     | `boolean`                                                                                            | `false`                                                                                                      | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                     | `boolean`                                                                                            | `false`                                                                                                      | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                     | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                            | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                    | `string`                                                                                             | -                                                                                                            | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateRangePickerToolbar
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateRangePickerToolbar API](https://mui.com/x/api/date-pickers/date-range-picker-toolbar/)
+
+**DateRangePickerToolbar Props:**
+
+| Prop               | Type                                     | Default                                       | Description                                                                             |
+| :----------------- | :--------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| classes            | `Partial<DateRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                         | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                 | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                 | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                        | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                 | -                                             | -                                                                                       |
+
+### getDateRangePickerToolbarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### DateRangePickerFieldProps
+
+Props the field can receive when used inside a Date Range Picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
+
+```typescript
+type DateRangePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  id?: string;
+};
+```
+
+### DateRangePickerProps
+
+```typescript
+type DateRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateRangePickerSlotProps;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   */
+  closeOnSelect?: boolean;
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<
+    PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>
+  >;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DateRangePickerSlotProps
+
+```typescript
+type DateRangePickerSlotProps = {
+  toolbar?: ExportedDateRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateRangePickerSlots
+
+```typescript
+type DateRangePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateRangePickerToolbarClasses
+
+```typescript
+type dateRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+};
+```
+
+### DateRangePickerToolbarClasses
+
+```typescript
+type DateRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+};
+```
+
+### DateRangePickerToolbarClassKey
+
+```typescript
+type DateRangePickerToolbarClassKey = 'root' | 'container';
+```
+
+### DateRangePickerToolbarProps
+
+```typescript
+type DateRangePickerToolbarProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateRangePickerToolbarClasses>;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  titleId?: string;
+};
+```
+
+## External Types
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-range-picker.ts b/docs/pages/x/api/date-pickers/types.date-range-picker.ts
new file mode 100644
index 0000000000000..2377872010f3b
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-range-picker.ts
@@ -0,0 +1,4 @@
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateRangePicker = createTypes(import.meta.url, DateRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-field.md b/docs/pages/x/api/date-pickers/types.date-time-field.md
new file mode 100644
index 0000000000000..311e7eca4da4a
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-field.md
@@ -0,0 +1,772 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-field.md'
+
+## API Reference
+
+### DateTimeField
+
+Demos:
+
+- [DateTimeField](http://mui.com/x/react-date-pickers/date-time-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/)
+
+**DateTimeField Props:**
+
+| Prop                                     | Type                                                     | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :--------------------------------------- | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                 | -                                                                                                                                                        | Name attribute of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| label                                    | `React.ReactNode`                                        | -                                                                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| defaultValue                             | `any`                                                    | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                                    | `any`                                                    | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onClick                                  | `React.MouseEventHandler<HTMLDivElement>`                | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ampm                                     | `boolean`                                                | `adapter.is12HourCycleInCurrentLocale()`                                                                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| areAllSectionsEmpty                      | `boolean`                                                | -                                                                                                                                                        | Is `true` if the current values equals the empty value.&#xA;For a single item value, it means that `value === null`&#xA;For a range value, it means that `value === [null, null]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| clearButtonPosition                      | `'start' \| 'end'`                                       | `'end'`                                                                                                                                                  | The position at which the clear button is placed.&#xA;If the field is not clearable, the button is not rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| clearable                                | `boolean`                                                | `false`                                                                                                                                                  | If `true`, a clear button will be shown in the field allowing value clearing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| disableFuture                            | `boolean`                                                | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                | `false`                                                                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disablePast                              | `boolean`                                                | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endAdornment                             | `React.ReactNode`                                        | -                                                                                                                                                        | End `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| error                                    | `boolean`                                                | `false`                                                                                                                                                  | If `true`, the `input` will indicate an error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| fieldRef                                 | `React.Ref<FieldRef<any>>`                               | -                                                                                                                                                        | The ref object used to imperatively interact with the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| focused                                  | `boolean`                                                | -                                                                                                                                                        | If `true`, the component is displayed in focused state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| formatDensity                            | `'dense' \| 'spacious'`                                  | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| fullWidth                                | `boolean`                                                | `false`                                                                                                                                                  | If `true`, the input will take up the full width of its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| helperText                               | `React.ReactNode`                                        | -                                                                                                                                                        | The helper text content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxDate                                  | `any`                                                    | `2099-12-31`                                                                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxDateTime                              | `any`                                                    | -                                                                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| maxTime                                  | `any`                                                    | -                                                                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minDate                                  | `any`                                                    | `1900-01-01`                                                                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| minDateTime                              | `any`                                                    | -                                                                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| minTime                                  | `any`                                                    | -                                                                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minutesStep                              | `number`                                                 | `1`                                                                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onBlur                                   | `React.FocusEventHandler<HTMLDivElement>`                | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onChange                                 | `FieldChangeHandler<any, DateTimeValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onClear                                  | `React.MouseEventHandler`                                | -                                                                                                                                                        | Callback fired when the clear button is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onFocus                                  | `React.FocusEventHandler<HTMLDivElement>`                | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onInput                                  | `React.FormEventHandler<HTMLDivElement>`                 | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onKeyDown                                | `React.RefCallback`                                      | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onPaste                                  | `React.ClipboardEventHandler<HTMLDivElement>`            | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`            | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| openPickerButtonPosition                 | `'start' \| 'end'`                                       | `'end'`                                                                                                                                                  | The position at which the opening button is placed.&#xA;If there is no Picker to open, the button is not rendered                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate                            | `any`                                                    | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections                         | `FieldSelectedSections`                                  | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableDate                        | `((day: any) => boolean)`                                | -                                                                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| shouldDisableMonth                       | `((month: any) => boolean)`                              | -                                                                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`              | -                                                                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldDisableYear                        | `((year: any) => boolean)`                               | -                                                                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldRespectLeadingZeros                | `boolean`                                                | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                                | `DateTimeFieldSlotProps`                                 | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                                    | `DateTimeFieldSlots`                                     | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startAdornment                           | `React.ReactNode`                                        | -                                                                                                                                                        | Start `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| timezone                                 | `PickersTimezone`                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| variant                                  | `'filled' \| 'outlined' \| 'standard'`                   | `'outlined'`                                                                                                                                             | The variant to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| format                                   | `string`                                                 | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                                 | `boolean`                                                | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                                 | `boolean`                                                | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                            | -                                                                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| id                                       | `string`                                                 | -                                                                                                                                                        | The id of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+
+### unstable_useDateTimeField
+
+**Parameters:**
+
+| Parameter | Type                    | Default | Description |
+| :-------- | :---------------------- | :------ | :---------- |
+| props     | `UseDateTimeFieldProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = UseFieldReturnValue<UseDateTimeFieldProps>;
+```
+
+## Additional Types
+
+### DateTimeFieldProps
+
+```typescript
+type DateTimeFieldProps = {
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: any;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<any, DateTimeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<any>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'filled' | 'outlined' | 'standard';
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  onInput?: React.FormEventHandler<HTMLDivElement>;
+  onKeyDown?: React.RefCallback;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty?: boolean;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** The helper text content. */
+  helperText?: React.ReactNode;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimeFieldSlotProps;
+};
+```
+
+### DateTimeFieldSlotProps
+
+```typescript
+type DateTimeFieldSlotProps = {
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### DateTimeFieldSlots
+
+```typescript
+type DateTimeFieldSlots = {
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'style'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+};
+```
+
+### UseDateTimeFieldProps
+
+```typescript
+type UseDateTimeFieldProps = {
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: any;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<any, DateTimeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<any>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (
+  value: any,
+  context: {
+    validationError:
+      | 'invalidDate'
+      | 'disableFuture'
+      | 'disablePast'
+      | 'shouldDisableDate'
+      | 'shouldDisableMonth'
+      | 'shouldDisableYear'
+      | 'minDate'
+      | 'maxDate'
+      | 'minutesStep'
+      | 'minTime'
+      | 'maxTime'
+      | 'shouldDisableTime-hours'
+      | 'shouldDisableTime-minutes'
+      | 'shouldDisableTime-seconds'
+      | null;
+  },
+) => void;
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-field.ts b/docs/pages/x/api/date-pickers/types.date-time-field.ts
new file mode 100644
index 0000000000000..956a7fc5b95ce
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-field.ts
@@ -0,0 +1,4 @@
+import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimeField = createTypes(import.meta.url, DateTimeField);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-picker-tabs.md b/docs/pages/x/api/date-pickers/types.date-time-picker-tabs.md
new file mode 100644
index 0000000000000..6050afd083301
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-picker-tabs.md
@@ -0,0 +1,2468 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-picker-tabs.md'
+
+## API Reference
+
+### DateTimePicker
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/)
+
+**DateTimePicker Props:**
+
+| Prop                                     | Type                                                                                   | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                               | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                      | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `any`                                                                                  | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `any`                                                                                  | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                              | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| ampmInClock                              | `boolean`                                                                              | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                                                                                                                                                  |
+| closeOnSelect                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                              | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| desktopModeMediaQuery                    | `string`                                                                               | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                              | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                              | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                              | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                              | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                               | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                              | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                      | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                  | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                  | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                  | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                  | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                  | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                  | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                               | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| monthsPerRow                             | `3 \| 4`                                                                               | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                               | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                          | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateOrTimeViewWithMeridiem) => void)`                                         | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                             | `((year: any) => void)`                                                                | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations                         | `boolean`                                                                              | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                  | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                              | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections                         | `FieldSelectedSections`                                                                | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any) => boolean)`                                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth                       | `((month: any) => boolean)`                                                            | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                            | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| shouldDisableYear                        | `((year: any) => boolean)`                                                             | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                              | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                              | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DateTimePickerSlotProps`                                                              | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DateTimePickerSlots`                                                                  | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                       | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                               | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                      | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>`                     | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateOrTimeView[]`                                                                     | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                               | `'asc' \| 'desc'`                                                                      | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                              | `3 \| 4`                                                                               | `4 on desktop, 3 on mobile`                                                                              | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                                   | `string`                                                                               | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                              | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                              | `PickerOrientation`                                                                    | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                          | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                               | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateTimePickerTabs
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
+
+**DateTimePickerTabs Props:**
+
+| Prop      | Type                                 | Default                                                                                                                                                    | Description                                                                             |
+| :-------- | :----------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                            | `` `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<DateTimePickerTabsClasses>` | -                                                                                                                                                          | Override or extend the styles applied to the component.                                 |
+| dateIcon  | `React.ReactNode`                    | `DateRange`                                                                                                                                                | Date tab icon.                                                                          |
+| sx        | `SxProps<Theme>`                     | -                                                                                                                                                          | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `React.ReactNode`                    | `Time`                                                                                                                                                     | Time tab icon.                                                                          |
+| className | `string`                             | -                                                                                                                                                          | -                                                                                       |
+
+### DateTimePickerToolbar
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
+
+**DateTimePickerToolbar Props:**
+
+| Prop               | Type                                    | Default                                       | Description                                                                             |
+| :----------------- | :-------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                               | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm               | `boolean`                               | -                                             | -                                                                                       |
+| ampmInClock        | `boolean`                               | -                                             | -                                                                                       |
+| classes            | `Partial<DateTimePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                        | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                       | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| toolbarTitle       | `React.ReactNode`                       | -                                             | If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. |
+| className          | `string`                                | -                                             | -                                                                                       |
+
+## Additional Types
+
+### DateTimePickerFieldProps
+
+Props the field can receive when used inside a Date Time Picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
+
+```typescript
+type DateTimePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  id?: string;
+};
+```
+
+### DateTimePickerProps
+
+```typescript
+type DateTimePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /** Available views. */
+  views?: DateOrTimeView[];
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateOrTimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateOrTimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DateTimePickerSlotProps
+
+```typescript
+type DateTimePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: DateTimePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateTimePickerSlots
+
+```typescript
+type DateTimePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateTimePickerTabsClasses
+
+```typescript
+type dateTimePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### DateTimePickerTabsClasses
+
+```typescript
+type DateTimePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### DateTimePickerTabsClassKey
+
+```typescript
+type DateTimePickerTabsClassKey = 'root';
+```
+
+### DateTimePickerTabsProps
+
+```typescript
+type DateTimePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRange
+   */
+  dateIcon?: React.ReactNode;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### dateTimePickerToolbarClasses
+
+```typescript
+type dateTimePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+};
+```
+
+### DateTimePickerToolbarClasses
+
+```typescript
+type DateTimePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+};
+```
+
+### DateTimePickerToolbarClassKey
+
+```typescript
+type DateTimePickerToolbarClassKey =
+  | 'root'
+  | 'dateContainer'
+  | 'timeContainer'
+  | 'timeDigitsContainer'
+  | 'timeLabelReverse'
+  | 'separator'
+  | 'ampmSelection'
+  | 'ampmLandscape'
+  | 'ampmLabel';
+```
+
+### DateTimePickerToolbarProps
+
+```typescript
+type DateTimePickerToolbarProps = {
+  /** If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. */
+  toolbarTitle?: React.ReactNode;
+  ampm?: boolean;
+  ampmInClock?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimePickerToolbarClasses>;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  titleId?: string;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-picker-tabs.ts b/docs/pages/x/api/date-pickers/types.date-time-picker-tabs.ts
new file mode 100644
index 0000000000000..222d9b7352715
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-picker-tabs.ts
@@ -0,0 +1,4 @@
+import { DateTimePickerTabs } from '@mui/x-date-pickers/DateTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimePickerTabs = createTypes(import.meta.url, DateTimePickerTabs);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-picker-toolbar.md b/docs/pages/x/api/date-pickers/types.date-time-picker-toolbar.md
new file mode 100644
index 0000000000000..8a896d0df81e9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-picker-toolbar.md
@@ -0,0 +1,2468 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-picker-toolbar.md'
+
+## API Reference
+
+### DateTimePicker
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/)
+
+**DateTimePicker Props:**
+
+| Prop                                     | Type                                                                                   | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                               | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                      | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `any`                                                                                  | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `any`                                                                                  | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                              | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| ampmInClock                              | `boolean`                                                                              | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                                                                                                                                                  |
+| closeOnSelect                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                              | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| desktopModeMediaQuery                    | `string`                                                                               | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                              | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                              | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                              | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                              | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                               | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                              | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                      | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                  | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                  | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                  | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                  | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                  | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                  | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                               | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| monthsPerRow                             | `3 \| 4`                                                                               | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                               | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                          | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateOrTimeViewWithMeridiem) => void)`                                         | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                             | `((year: any) => void)`                                                                | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations                         | `boolean`                                                                              | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                  | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                              | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections                         | `FieldSelectedSections`                                                                | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any) => boolean)`                                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth                       | `((month: any) => boolean)`                                                            | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                            | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| shouldDisableYear                        | `((year: any) => boolean)`                                                             | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                              | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                              | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DateTimePickerSlotProps`                                                              | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DateTimePickerSlots`                                                                  | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                       | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                               | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                      | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>`                     | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateOrTimeView[]`                                                                     | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                               | `'asc' \| 'desc'`                                                                      | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                              | `3 \| 4`                                                                               | `4 on desktop, 3 on mobile`                                                                              | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                                   | `string`                                                                               | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                              | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                              | `PickerOrientation`                                                                    | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                          | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                               | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateTimePickerTabs
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
+
+**DateTimePickerTabs Props:**
+
+| Prop      | Type                                 | Default                                                                                                                                                    | Description                                                                             |
+| :-------- | :----------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                            | `` `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<DateTimePickerTabsClasses>` | -                                                                                                                                                          | Override or extend the styles applied to the component.                                 |
+| dateIcon  | `React.ReactNode`                    | `DateRange`                                                                                                                                                | Date tab icon.                                                                          |
+| sx        | `SxProps<Theme>`                     | -                                                                                                                                                          | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `React.ReactNode`                    | `Time`                                                                                                                                                     | Time tab icon.                                                                          |
+| className | `string`                             | -                                                                                                                                                          | -                                                                                       |
+
+### DateTimePickerToolbar
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
+
+**DateTimePickerToolbar Props:**
+
+| Prop               | Type                                    | Default                                       | Description                                                                             |
+| :----------------- | :-------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                               | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm               | `boolean`                               | -                                             | -                                                                                       |
+| ampmInClock        | `boolean`                               | -                                             | -                                                                                       |
+| classes            | `Partial<DateTimePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                        | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                       | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| toolbarTitle       | `React.ReactNode`                       | -                                             | If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. |
+| className          | `string`                                | -                                             | -                                                                                       |
+
+## Additional Types
+
+### DateTimePickerFieldProps
+
+Props the field can receive when used inside a Date Time Picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
+
+```typescript
+type DateTimePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  id?: string;
+};
+```
+
+### DateTimePickerProps
+
+```typescript
+type DateTimePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /** Available views. */
+  views?: DateOrTimeView[];
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateOrTimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateOrTimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DateTimePickerSlotProps
+
+```typescript
+type DateTimePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: DateTimePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateTimePickerSlots
+
+```typescript
+type DateTimePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateTimePickerTabsClasses
+
+```typescript
+type dateTimePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### DateTimePickerTabsClasses
+
+```typescript
+type DateTimePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### DateTimePickerTabsClassKey
+
+```typescript
+type DateTimePickerTabsClassKey = 'root';
+```
+
+### DateTimePickerTabsProps
+
+```typescript
+type DateTimePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRange
+   */
+  dateIcon?: React.ReactNode;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### dateTimePickerToolbarClasses
+
+```typescript
+type dateTimePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+};
+```
+
+### DateTimePickerToolbarClasses
+
+```typescript
+type DateTimePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+};
+```
+
+### DateTimePickerToolbarClassKey
+
+```typescript
+type DateTimePickerToolbarClassKey =
+  | 'root'
+  | 'dateContainer'
+  | 'timeContainer'
+  | 'timeDigitsContainer'
+  | 'timeLabelReverse'
+  | 'separator'
+  | 'ampmSelection'
+  | 'ampmLandscape'
+  | 'ampmLabel';
+```
+
+### DateTimePickerToolbarProps
+
+```typescript
+type DateTimePickerToolbarProps = {
+  /** If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. */
+  toolbarTitle?: React.ReactNode;
+  ampm?: boolean;
+  ampmInClock?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimePickerToolbarClasses>;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  titleId?: string;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-picker-toolbar.ts b/docs/pages/x/api/date-pickers/types.date-time-picker-toolbar.ts
new file mode 100644
index 0000000000000..c61326de1a300
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-picker-toolbar.ts
@@ -0,0 +1,4 @@
+import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimePickerToolbar = createTypes(import.meta.url, DateTimePickerToolbar);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-picker.md b/docs/pages/x/api/date-pickers/types.date-time-picker.md
new file mode 100644
index 0000000000000..a4232876d8008
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-picker.md
@@ -0,0 +1,2468 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-picker.md'
+
+## API Reference
+
+### DateTimePicker
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/)
+
+**DateTimePicker Props:**
+
+| Prop                                     | Type                                                                                   | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                               | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                      | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `any`                                                                                  | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `any`                                                                                  | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                              | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| ampmInClock                              | `boolean`                                                                              | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                                                                                                                                                  |
+| closeOnSelect                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                              | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| desktopModeMediaQuery                    | `string`                                                                               | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                              | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                              | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                              | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                              | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                               | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                              | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                      | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                  | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                  | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                  | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                  | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                  | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                  | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                               | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| monthsPerRow                             | `3 \| 4`                                                                               | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                               | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                          | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateOrTimeViewWithMeridiem) => void)`                                         | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                             | `((year: any) => void)`                                                                | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations                         | `boolean`                                                                              | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                  | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                              | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections                         | `FieldSelectedSections`                                                                | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any) => boolean)`                                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth                       | `((month: any) => boolean)`                                                            | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                            | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| shouldDisableYear                        | `((year: any) => boolean)`                                                             | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                              | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                              | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DateTimePickerSlotProps`                                                              | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DateTimePickerSlots`                                                                  | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                       | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                               | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                      | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>`                     | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateOrTimeView[]`                                                                     | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                               | `'asc' \| 'desc'`                                                                      | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                              | `3 \| 4`                                                                               | `4 on desktop, 3 on mobile`                                                                              | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                                   | `string`                                                                               | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                              | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                              | `PickerOrientation`                                                                    | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                          | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                               | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateTimePickerTabs
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
+
+**DateTimePickerTabs Props:**
+
+| Prop      | Type                                 | Default                                                                                                                                                    | Description                                                                             |
+| :-------- | :----------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                            | `` `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<DateTimePickerTabsClasses>` | -                                                                                                                                                          | Override or extend the styles applied to the component.                                 |
+| dateIcon  | `React.ReactNode`                    | `DateRange`                                                                                                                                                | Date tab icon.                                                                          |
+| sx        | `SxProps<Theme>`                     | -                                                                                                                                                          | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `React.ReactNode`                    | `Time`                                                                                                                                                     | Time tab icon.                                                                          |
+| className | `string`                             | -                                                                                                                                                          | -                                                                                       |
+
+### DateTimePickerToolbar
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
+
+**DateTimePickerToolbar Props:**
+
+| Prop               | Type                                    | Default                                       | Description                                                                             |
+| :----------------- | :-------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                               | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm               | `boolean`                               | -                                             | -                                                                                       |
+| ampmInClock        | `boolean`                               | -                                             | -                                                                                       |
+| classes            | `Partial<DateTimePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                        | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                       | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| toolbarTitle       | `React.ReactNode`                       | -                                             | If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. |
+| className          | `string`                                | -                                             | -                                                                                       |
+
+## Additional Types
+
+### DateTimePickerFieldProps
+
+Props the field can receive when used inside a Date Time Picker (<DateTimePicker />, <DesktopDateTimePicker /> or <MobileDateTimePicker /> component).
+
+```typescript
+type DateTimePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  id?: string;
+};
+```
+
+### DateTimePickerProps
+
+```typescript
+type DateTimePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 4 on desktop, 3 on mobile
+   */
+  yearsPerRow?: 3 | 4;
+  /** Available views. */
+  views?: DateOrTimeView[];
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateOrTimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateOrTimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DateTimePickerSlotProps
+
+```typescript
+type DateTimePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: DateTimePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateTimePickerSlots
+
+```typescript
+type DateTimePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateTimePickerTabsClasses
+
+```typescript
+type dateTimePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### DateTimePickerTabsClasses
+
+```typescript
+type DateTimePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### DateTimePickerTabsClassKey
+
+```typescript
+type DateTimePickerTabsClassKey = 'root';
+```
+
+### DateTimePickerTabsProps
+
+```typescript
+type DateTimePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRange
+   */
+  dateIcon?: React.ReactNode;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### dateTimePickerToolbarClasses
+
+```typescript
+type dateTimePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+};
+```
+
+### DateTimePickerToolbarClasses
+
+```typescript
+type DateTimePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the date container element. */
+  dateContainer: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+  /** Styles applied to the time (except am/pm) container element. */
+  timeDigitsContainer: string;
+  /** Styles applied to the time container if rtl. */
+  timeLabelReverse: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the am/pm section. */
+  ampmSelection: string;
+  /** Styles applied to am/pm section in landscape mode. */
+  ampmLandscape: string;
+  /** Styles applied to am/pm labels. */
+  ampmLabel: string;
+};
+```
+
+### DateTimePickerToolbarClassKey
+
+```typescript
+type DateTimePickerToolbarClassKey =
+  | 'root'
+  | 'dateContainer'
+  | 'timeContainer'
+  | 'timeDigitsContainer'
+  | 'timeLabelReverse'
+  | 'separator'
+  | 'ampmSelection'
+  | 'ampmLandscape'
+  | 'ampmLabel';
+```
+
+### DateTimePickerToolbarProps
+
+```typescript
+type DateTimePickerToolbarProps = {
+  /** If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization. */
+  toolbarTitle?: React.ReactNode;
+  ampm?: boolean;
+  ampmInClock?: boolean;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimePickerToolbarClasses>;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  titleId?: string;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-picker.ts b/docs/pages/x/api/date-pickers/types.date-time-picker.ts
new file mode 100644
index 0000000000000..731e9599b33b0
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-picker.ts
@@ -0,0 +1,4 @@
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimePicker = createTypes(import.meta.url, DateTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-range-picker-tabs.md b/docs/pages/x/api/date-pickers/types.date-time-range-picker-tabs.md
new file mode 100644
index 0000000000000..5b1840b0b8339
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-range-picker-tabs.md
@@ -0,0 +1,2447 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-range-picker-tabs.md'
+
+## API Reference
+
+### DateTimeRangePicker
+
+Demos:
+
+- [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+
+**DateTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                     | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                                 | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                        | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                       | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                       | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                                | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                                | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| calendars                                | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition             | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                                                | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition                     | `RangePosition`                                                                                          | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery                    | `string`                                                                                                 | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableAutoMonthSwitching                | `boolean`                                                                                                | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing                       | `boolean`                                                                                                | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                                                | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                                | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                                                | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                                                 | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                                  | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                                                | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                                        | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                                    | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                                    | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                                    | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                                    | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                                    | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                                    | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                                 | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                                                 | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                               | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                            | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateTimeRangePickerView) => void)`                                                              | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateTimeRangePickerViewExternal`                                                                        | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                          | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                                | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                    | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                                                | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections                         | `FieldSelectedSections`                                                                                  | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                                                    | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                              | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DateTimeRangePickerSlotProps`                                                                           | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DateTimeRangePickerSlots`                                                                               | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                         | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                                 | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                        | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateTimeRangePickerView`                                                                                | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>`                                         | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateTimeRangePickerViewExternal[]`                                                                      | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                                 | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                                | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                            | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                                 | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateTimeRangePickerTabs
+
+**DateTimeRangePickerTabs Props:**
+
+| Prop      | Type                                      | Default                                                                                           | Description                                                                             |
+| :-------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                                 | `` `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<DateTimeRangePickerTabsClasses>` | -                                                                                                 | Override or extend the styles applied to the component.                                 |
+| dateIcon  | `ReactElement`                            | `DateRangeIcon`                                                                                   | Date tab icon.                                                                          |
+| sx        | `SxProps<Theme>`                          | -                                                                                                 | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `ReactElement`                            | `TimeIcon`                                                                                        | Time tab icon.                                                                          |
+| className | `string`                                  | -                                                                                                 | -                                                                                       |
+
+### DateTimeRangePickerToolbar
+
+**DateTimeRangePickerToolbar Props:**
+
+| Prop               | Type                                         | Default                                       | Description                                                                             |
+| :----------------- | :------------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                    | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm               | `boolean`                                    | -                                             | -                                                                                       |
+| classes            | `Partial<DateTimeRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                             | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                     | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                     | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                            | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                     | -                                             | -                                                                                       |
+
+### getDateTimeRangePickerTabsUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getDateTimeRangePickerToolbarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### DateTimeRangePickerFieldProps
+
+Props the field can receive when used inside a Date Time Range Picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
+
+```typescript
+type DateTimeRangePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  id?: string;
+};
+```
+
+### DateTimeRangePickerProps
+
+```typescript
+type DateTimeRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimeRangePickerSlotProps;
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 1
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateTimeRangePickerView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateTimeRangePickerView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Available views. */
+  views?: DateTimeRangePickerViewExternal[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateTimeRangePickerViewExternal;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DateTimeRangePickerSlotProps
+
+```typescript
+type DateTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateTimeRangePickerSlots
+
+```typescript
+type DateTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateTimeRangePickerTabsClasses
+
+```typescript
+type dateTimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+};
+```
+
+### DateTimeRangePickerTabsClasses
+
+```typescript
+type DateTimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+};
+```
+
+### DateTimeRangePickerTabsClassKey
+
+```typescript
+type DateTimeRangePickerTabsClassKey = 'root' | 'tabButton' | 'navigationButton' | 'filler';
+```
+
+### dateTimeRangePickerToolbarClasses
+
+```typescript
+type dateTimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+};
+```
+
+### DateTimeRangePickerToolbarClasses
+
+```typescript
+type DateTimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+};
+```
+
+### DateTimeRangePickerToolbarClassKey
+
+```typescript
+type DateTimeRangePickerToolbarClassKey = 'root' | 'startToolbar' | 'endToolbar';
+```
+
+### DateTimeRangePickerToolbarProps
+
+```typescript
+type DateTimeRangePickerToolbarProps = {
+  ampm?: boolean;
+  titleId?: string;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimeRangePickerToolbarClasses>;
+};
+```
+
+### ExportedDateTimeRangePickerTabsProps
+
+```typescript
+type ExportedDateTimeRangePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRangeIcon
+   */
+  dateIcon?: ReactElement;
+  /**
+   * Time tab icon.
+   * @default TimeIcon
+   */
+  timeIcon?: ReactElement;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimeRangePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+## External Types
+
+### DateTimeRangePickerView
+
+```typescript
+type DateTimeRangePickerView = 'day' | 'hours' | 'minutes' | 'seconds' | 'meridiem';
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### DateTimeRangePickerViewExternal
+
+```typescript
+type DateTimeRangePickerViewExternal = 'day' | 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-range-picker-tabs.ts b/docs/pages/x/api/date-pickers/types.date-time-range-picker-tabs.ts
new file mode 100644
index 0000000000000..faa81808373fb
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-range-picker-tabs.ts
@@ -0,0 +1,4 @@
+import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimeRangePickerTabs = createTypes(import.meta.url, DateTimeRangePickerTabs);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-range-picker-toolbar.md b/docs/pages/x/api/date-pickers/types.date-time-range-picker-toolbar.md
new file mode 100644
index 0000000000000..35fcf55e417a3
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-range-picker-toolbar.md
@@ -0,0 +1,2447 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-range-picker-toolbar.md'
+
+## API Reference
+
+### DateTimeRangePicker
+
+Demos:
+
+- [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+
+**DateTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                     | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                                 | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                        | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                       | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                       | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                                | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                                | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| calendars                                | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition             | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                                                | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition                     | `RangePosition`                                                                                          | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery                    | `string`                                                                                                 | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableAutoMonthSwitching                | `boolean`                                                                                                | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing                       | `boolean`                                                                                                | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                                                | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                                | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                                                | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                                                 | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                                  | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                                                | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                                        | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                                    | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                                    | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                                    | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                                    | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                                    | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                                    | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                                 | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                                                 | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                               | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                            | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateTimeRangePickerView) => void)`                                                              | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateTimeRangePickerViewExternal`                                                                        | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                          | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                                | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                    | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                                                | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections                         | `FieldSelectedSections`                                                                                  | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                                                    | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                              | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DateTimeRangePickerSlotProps`                                                                           | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DateTimeRangePickerSlots`                                                                               | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                         | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                                 | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                        | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateTimeRangePickerView`                                                                                | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>`                                         | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateTimeRangePickerViewExternal[]`                                                                      | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                                 | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                                | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                            | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                                 | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateTimeRangePickerTabs
+
+**DateTimeRangePickerTabs Props:**
+
+| Prop      | Type                                      | Default                                                                                           | Description                                                                             |
+| :-------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                                 | `` `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<DateTimeRangePickerTabsClasses>` | -                                                                                                 | Override or extend the styles applied to the component.                                 |
+| dateIcon  | `ReactElement`                            | `DateRangeIcon`                                                                                   | Date tab icon.                                                                          |
+| sx        | `SxProps<Theme>`                          | -                                                                                                 | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `ReactElement`                            | `TimeIcon`                                                                                        | Time tab icon.                                                                          |
+| className | `string`                                  | -                                                                                                 | -                                                                                       |
+
+### DateTimeRangePickerToolbar
+
+**DateTimeRangePickerToolbar Props:**
+
+| Prop               | Type                                         | Default                                       | Description                                                                             |
+| :----------------- | :------------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                    | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm               | `boolean`                                    | -                                             | -                                                                                       |
+| classes            | `Partial<DateTimeRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                             | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                     | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                     | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                            | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                     | -                                             | -                                                                                       |
+
+### getDateTimeRangePickerTabsUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getDateTimeRangePickerToolbarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### DateTimeRangePickerFieldProps
+
+Props the field can receive when used inside a Date Time Range Picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
+
+```typescript
+type DateTimeRangePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  id?: string;
+};
+```
+
+### DateTimeRangePickerProps
+
+```typescript
+type DateTimeRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimeRangePickerSlotProps;
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 1
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateTimeRangePickerView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateTimeRangePickerView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Available views. */
+  views?: DateTimeRangePickerViewExternal[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateTimeRangePickerViewExternal;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DateTimeRangePickerSlotProps
+
+```typescript
+type DateTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateTimeRangePickerSlots
+
+```typescript
+type DateTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateTimeRangePickerTabsClasses
+
+```typescript
+type dateTimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+};
+```
+
+### DateTimeRangePickerTabsClasses
+
+```typescript
+type DateTimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+};
+```
+
+### DateTimeRangePickerTabsClassKey
+
+```typescript
+type DateTimeRangePickerTabsClassKey = 'root' | 'tabButton' | 'navigationButton' | 'filler';
+```
+
+### dateTimeRangePickerToolbarClasses
+
+```typescript
+type dateTimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+};
+```
+
+### DateTimeRangePickerToolbarClasses
+
+```typescript
+type DateTimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+};
+```
+
+### DateTimeRangePickerToolbarClassKey
+
+```typescript
+type DateTimeRangePickerToolbarClassKey = 'root' | 'startToolbar' | 'endToolbar';
+```
+
+### DateTimeRangePickerToolbarProps
+
+```typescript
+type DateTimeRangePickerToolbarProps = {
+  ampm?: boolean;
+  titleId?: string;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimeRangePickerToolbarClasses>;
+};
+```
+
+### ExportedDateTimeRangePickerTabsProps
+
+```typescript
+type ExportedDateTimeRangePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRangeIcon
+   */
+  dateIcon?: ReactElement;
+  /**
+   * Time tab icon.
+   * @default TimeIcon
+   */
+  timeIcon?: ReactElement;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimeRangePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+## External Types
+
+### DateTimeRangePickerView
+
+```typescript
+type DateTimeRangePickerView = 'day' | 'hours' | 'minutes' | 'seconds' | 'meridiem';
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### DateTimeRangePickerViewExternal
+
+```typescript
+type DateTimeRangePickerViewExternal = 'day' | 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-range-picker-toolbar.ts b/docs/pages/x/api/date-pickers/types.date-time-range-picker-toolbar.ts
new file mode 100644
index 0000000000000..d7f46a5a17349
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-range-picker-toolbar.ts
@@ -0,0 +1,4 @@
+import { DateTimeRangePickerToolbar } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimeRangePickerToolbar = createTypes(import.meta.url, DateTimeRangePickerToolbar);
diff --git a/docs/pages/x/api/date-pickers/types.date-time-range-picker.md b/docs/pages/x/api/date-pickers/types.date-time-range-picker.md
new file mode 100644
index 0000000000000..56379bbc1a5d9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-range-picker.md
@@ -0,0 +1,2447 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.date-time-range-picker.md'
+
+## API Reference
+
+### DateTimeRangePicker
+
+Demos:
+
+- [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+
+**DateTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                     | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                                 | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                        | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                       | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                       | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                                | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                                | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| calendars                                | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition             | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                                                | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition                     | `RangePosition`                                                                                          | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery                    | `string`                                                                                                 | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableAutoMonthSwitching                | `boolean`                                                                                                | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing                       | `boolean`                                                                                                | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                                                | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                                | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                                                | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                                                 | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                                  | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                                                | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                                        | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                                    | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                                    | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                                    | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                                    | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                                    | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                                    | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                                 | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                                                 | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                               | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                            | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateTimeRangePickerView) => void)`                                                              | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateTimeRangePickerViewExternal`                                                                        | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                          | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                                | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                    | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                                                | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections                         | `FieldSelectedSections`                                                                                  | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                                                    | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                              | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DateTimeRangePickerSlotProps`                                                                           | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DateTimeRangePickerSlots`                                                                               | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                         | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                                 | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                        | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateTimeRangePickerView`                                                                                | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>`                                         | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateTimeRangePickerViewExternal[]`                                                                      | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                                 | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                                | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                            | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                                 | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### DateTimeRangePickerTabs
+
+**DateTimeRangePickerTabs Props:**
+
+| Prop      | Type                                      | Default                                                                                           | Description                                                                             |
+| :-------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                                 | `` `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<DateTimeRangePickerTabsClasses>` | -                                                                                                 | Override or extend the styles applied to the component.                                 |
+| dateIcon  | `ReactElement`                            | `DateRangeIcon`                                                                                   | Date tab icon.                                                                          |
+| sx        | `SxProps<Theme>`                          | -                                                                                                 | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `ReactElement`                            | `TimeIcon`                                                                                        | Time tab icon.                                                                          |
+| className | `string`                                  | -                                                                                                 | -                                                                                       |
+
+### DateTimeRangePickerToolbar
+
+**DateTimeRangePickerToolbar Props:**
+
+| Prop               | Type                                         | Default                                       | Description                                                                             |
+| :----------------- | :------------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                    | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm               | `boolean`                                    | -                                             | -                                                                                       |
+| classes            | `Partial<DateTimeRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                             | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                     | -                                             | -                                                                                       |
+| toolbarFormat      | `string`                                     | -                                             | Toolbar date format.                                                                    |
+| toolbarPlaceholder | `React.ReactNode`                            | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                     | -                                             | -                                                                                       |
+
+### getDateTimeRangePickerTabsUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getDateTimeRangePickerToolbarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### DateTimeRangePickerFieldProps
+
+Props the field can receive when used inside a Date Time Range Picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
+
+```typescript
+type DateTimeRangePickerFieldProps = {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  id?: string;
+};
+```
+
+### DateTimeRangePickerProps
+
+```typescript
+type DateTimeRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateTimeRangePickerSlotProps;
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 1
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateTimeRangePickerView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateTimeRangePickerView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Available views. */
+  views?: DateTimeRangePickerViewExternal[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateTimeRangePickerViewExternal;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DateTimeRangePickerSlotProps
+
+```typescript
+type DateTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### DateTimeRangePickerSlots
+
+```typescript
+type DateTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### dateTimeRangePickerTabsClasses
+
+```typescript
+type dateTimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+};
+```
+
+### DateTimeRangePickerTabsClasses
+
+```typescript
+type DateTimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab button element. */
+  tabButton: string;
+  /** Styles applied to the tab navigation button elements. */
+  navigationButton: string;
+  /** Styles applied to the filler element, shown instead of a navigation arrow. */
+  filler: string;
+};
+```
+
+### DateTimeRangePickerTabsClassKey
+
+```typescript
+type DateTimeRangePickerTabsClassKey = 'root' | 'tabButton' | 'navigationButton' | 'filler';
+```
+
+### dateTimeRangePickerToolbarClasses
+
+```typescript
+type dateTimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+};
+```
+
+### DateTimeRangePickerToolbarClasses
+
+```typescript
+type DateTimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the start toolbar element. */
+  startToolbar: string;
+  /** Styles applied to the end toolbar element. */
+  endToolbar: string;
+};
+```
+
+### DateTimeRangePickerToolbarClassKey
+
+```typescript
+type DateTimeRangePickerToolbarClassKey = 'root' | 'startToolbar' | 'endToolbar';
+```
+
+### DateTimeRangePickerToolbarProps
+
+```typescript
+type DateTimeRangePickerToolbarProps = {
+  ampm?: boolean;
+  titleId?: string;
+  /** Toolbar date format. */
+  toolbarFormat?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  className?: string;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimeRangePickerToolbarClasses>;
+};
+```
+
+### ExportedDateTimeRangePickerTabsProps
+
+```typescript
+type ExportedDateTimeRangePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Date tab icon.
+   * @default DateRangeIcon
+   */
+  dateIcon?: ReactElement;
+  /**
+   * Time tab icon.
+   * @default TimeIcon
+   */
+  timeIcon?: ReactElement;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DateTimeRangePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+## External Types
+
+### DateTimeRangePickerView
+
+```typescript
+type DateTimeRangePickerView = 'day' | 'hours' | 'minutes' | 'seconds' | 'meridiem';
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### DateTimeRangePickerViewExternal
+
+```typescript
+type DateTimeRangePickerViewExternal = 'day' | 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.date-time-range-picker.ts b/docs/pages/x/api/date-pickers/types.date-time-range-picker.ts
new file mode 100644
index 0000000000000..7619b5fae56e9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.date-time-range-picker.ts
@@ -0,0 +1,4 @@
+import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDateTimeRangePicker = createTypes(import.meta.url, DateTimeRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.day-calendar-skeleton.md b/docs/pages/x/api/date-pickers/types.day-calendar-skeleton.md
new file mode 100644
index 0000000000000..f766459098af8
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.day-calendar-skeleton.md
@@ -0,0 +1,82 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.day-calendar-skeleton.md'
+
+## API Reference
+
+### DayCalendarSkeleton
+
+Demos:
+
+- [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+
+API:
+
+- [CalendarPickerSkeleton API](https://mui.com/x/api/date-pickers/calendar-picker-skeleton/)
+
+**DayCalendarSkeleton Props:**
+
+| Prop    | Type                                  | Default | Description                                                                             |
+| :------ | :------------------------------------ | :------ | :-------------------------------------------------------------------------------------- |
+| classes | `Partial<DayCalendarSkeletonClasses>` | -       | Override or extend the styles applied to the component.                                 |
+| sx      | `SxProps<Theme>`                      | -       | The system prop that allows defining system overrides as well as additional CSS styles. |
+
+### getDayCalendarSkeletonUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### dayCalendarSkeletonClasses
+
+```typescript
+type dayCalendarSkeletonClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the week element. */
+  week: string;
+  /** Styles applied to the day element. */
+  daySkeleton: string;
+};
+```
+
+### DayCalendarSkeletonClasses
+
+```typescript
+type DayCalendarSkeletonClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the week element. */
+  week: string;
+  /** Styles applied to the day element. */
+  daySkeleton: string;
+};
+```
+
+### DayCalendarSkeletonClassKey
+
+```typescript
+type DayCalendarSkeletonClassKey = 'root' | 'week' | 'daySkeleton';
+```
+
+### DayCalendarSkeletonProps
+
+```typescript
+type DayCalendarSkeletonProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DayCalendarSkeletonClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  ref?: React.Ref<HTMLDivElement>;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.day-calendar-skeleton.ts b/docs/pages/x/api/date-pickers/types.day-calendar-skeleton.ts
new file mode 100644
index 0000000000000..a4d9a19978c52
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.day-calendar-skeleton.ts
@@ -0,0 +1,4 @@
+import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDayCalendarSkeleton = createTypes(import.meta.url, DayCalendarSkeleton);
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-picker.md b/docs/pages/x/api/date-pickers/types.desktop-date-picker.md
new file mode 100644
index 0000000000000..9b2388dc1ffe1
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-picker.md
@@ -0,0 +1,1713 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.desktop-date-picker.md'
+
+## API Reference
+
+### DesktopDatePicker
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/)
+
+**DesktopDatePicker Props:**
+
+| Prop                        | Type                                                                               | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                        | `string`                                                                           | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                       | `React.ReactNode`                                                                  | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                | `any`                                                                              | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                       | `any`                                                                              | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                        | `boolean`                                                                          | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| closeOnSelect               | `boolean`                                                                          | `true`                                                                                                   | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter          | `((date: any) => string)`                                                          | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| disableFuture               | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday       | `boolean`                                                                          | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker           | `boolean`                                                                          | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber           | `boolean`                                                                          | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber             | `number`                                                                           | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity               | `'dense' \| 'spacious'`                                                            | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus    | `boolean`                                                                          | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                     | `boolean`                                                                          | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                  | `PickersInputComponentLocaleText`                                                  | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                     | `any`                                                                              | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                     | `any`                                                                              | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| monthsPerRow                | `3 \| 4`                                                                           | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                     | `(() => void)`                                                                     | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                     | `((error: DateValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange               | `((month: any) => void)`                                                           | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                      | `(() => void)`                                                                     | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange    | `((newValue: FieldSelectedSections) => void)`                                      | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                | `((view: DateView) => void)`                                                       | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                | `((year: any) => void)`                                                            | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                      | `DateView`                                                                         | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations            | `boolean`                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate               | `any`                                                                              | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading               | `(() => React.ReactNode)`                                                          | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections            | `FieldSelectedSections`                                                            | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate           | `((day: any) => boolean)`                                                          | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth          | `((month: any) => boolean)`                                                        | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableYear           | `((year: any) => boolean)`                                                         | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth | `boolean`                                                                          | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                   | `DesktopDatePickerSlotProps`                                                       | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                       | `DesktopDatePickerSlots`                                                           | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                          | `SxProps<Theme>`                                                                   | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                    | `PickersTimezone`                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                        | `DateView`                                                                         | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers               | `Partial<DatePickerViewRenderers<DateView>>`                                       | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                       | `DateView[]`                                                                       | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                  | `'asc' \| 'desc'`                                                                  | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                 | `3 \| 4`                                                                           | `4`                                                                                                      | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                      | `string`                                                                           | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                   | `boolean`                                                                          | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                    | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                    | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                 | `PickerOrientation`                                                                | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                    | `React.Ref<HTMLInputElement>`                                                      | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                   | `string`                                                                           | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### DesktopDatePickerProps
+
+```typescript
+type DesktopDatePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDatePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 4
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateView;
+  /** Available views. */
+  views?: DateView[];
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DesktopDatePickerSlotProps
+
+```typescript
+type DesktopDatePickerSlotProps = {
+  toolbar?: ExportedDatePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### DesktopDatePickerSlots
+
+```typescript
+type DesktopDatePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DatePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DatePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+};
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-picker.ts b/docs/pages/x/api/date-pickers/types.desktop-date-picker.ts
new file mode 100644
index 0000000000000..420ab01c64ffb
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-picker.ts
@@ -0,0 +1,4 @@
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDesktopDatePicker = createTypes(import.meta.url, DesktopDatePicker);
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-range-picker.md b/docs/pages/x/api/date-pickers/types.desktop-date-range-picker.md
new file mode 100644
index 0000000000000..8252d3526e29b
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-range-picker.md
@@ -0,0 +1,1685 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.desktop-date-range-picker.md'
+
+## API Reference
+
+### DesktopDateRangePicker
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
+
+**DesktopDateRangePicker Props:**
+
+| Prop                         | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                         | `string`                                                                                             | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                        | `React.ReactNode`                                                                                    | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                 | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                        | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                         | `boolean`                                                                                            | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| calendars                    | `1 \| 2 \| 3`                                                                                        | `2`                                                                                                      | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                | `boolean`                                                                                            | `true`                                                                                                   | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition | `1 \| 2 \| 3`                                                                                        | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter           | `((date: any) => string)`                                                                            | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition         | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| disableAutoMonthSwitching    | `boolean`                                                                                            | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing           | `boolean`                                                                                            | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                  | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber            | `boolean`                                                                                            | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber              | `number`                                                                                             | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                      | `boolean`                                                                                            | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                   | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                      | `any`                                                                                                | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                      | `any`                                                                                                | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                      | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                      | `((error: DateRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                | `((month: any) => void)`                                                                             | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                       | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange        | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange     | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| rangePosition                | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations             | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                | `(() => React.ReactNode)`                                                                            | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections             | `FieldSelectedSections`                                                                              | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate            | `((day: any, position: 'start' \| 'end') => boolean)`                                                | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| showDaysOutsideCurrentMonth  | `boolean`                                                                                            | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                    | `DesktopDateRangePickerSlotProps`                                                                    | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                        | `DesktopDateRangePickerSlots`                                                                        | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                           | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                     | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| viewRenderers                | `Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>`      | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| format                       | `string`                                                                                             | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                    | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                     | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                    | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### DesktopDateRangePickerProps
+
+```typescript
+type DesktopDateRangePickerProps = {
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateRangePickerSlotProps;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<
+    PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>
+  >;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DesktopDateRangePickerSlotProps
+
+```typescript
+type DesktopDateRangePickerSlotProps = {
+  toolbar?: ExportedDateRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+};
+```
+
+### DesktopDateRangePickerSlots
+
+```typescript
+type DesktopDateRangePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-range-picker.ts b/docs/pages/x/api/date-pickers/types.desktop-date-range-picker.ts
new file mode 100644
index 0000000000000..651b29688a97a
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-range-picker.ts
@@ -0,0 +1,4 @@
+import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDesktopDateRangePicker = createTypes(import.meta.url, DesktopDateRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-time-picker.md b/docs/pages/x/api/date-pickers/types.desktop-date-time-picker.md
new file mode 100644
index 0000000000000..7fe44c150c7d4
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-time-picker.md
@@ -0,0 +1,1995 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.desktop-date-time-picker.md'
+
+## API Reference
+
+### DesktopDateTimePicker
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
+
+**DesktopDateTimePicker Props:**
+
+| Prop                                     | Type                                                                                   | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                               | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                      | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `any`                                                                                  | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `any`                                                                                  | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                              | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| ampmInClock                              | `boolean`                                                                              | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                                                                                                                                                  |
+| closeOnSelect                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                              | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| disableFuture                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                              | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                              | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                              | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                              | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                               | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                              | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                      | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                  | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                  | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                  | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                  | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                  | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                  | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                               | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| monthsPerRow                             | `3 \| 4`                                                                               | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                               | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                          | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateOrTimeViewWithMeridiem) => void)`                                         | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                             | `((year: any) => void)`                                                                | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations                         | `boolean`                                                                              | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                  | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                              | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections                         | `FieldSelectedSections`                                                                | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any) => boolean)`                                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth                       | `((month: any) => boolean)`                                                            | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                            | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| shouldDisableYear                        | `((year: any) => boolean)`                                                             | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                              | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                              | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DesktopDateTimePickerSlotProps`                                                       | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DesktopDateTimePickerSlots`                                                           | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                       | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                               | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                      | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>`                     | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateOrTimeView[]`                                                                     | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                               | `'asc' \| 'desc'`                                                                      | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                              | `3 \| 4`                                                                               | `4`                                                                                                      | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                                   | `string`                                                                               | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                              | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                              | `PickerOrientation`                                                                    | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                          | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                               | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### DesktopDateTimePickerLayout
+
+```typescript
+type DesktopDateTimePickerLayout = unknown;
+```
+
+### DesktopDateTimePickerProps
+
+```typescript
+type DesktopDateTimePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateTimePickerSlotProps;
+  /** Available views. */
+  views?: DateOrTimeView[];
+  /**
+   * Years rendered per row.
+   * @default 4
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateOrTimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateOrTimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### DesktopDateTimePickerSlotProps
+
+```typescript
+type DesktopDateTimePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: DateTimePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### DesktopDateTimePickerSlots
+
+```typescript
+type DesktopDateTimePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-time-picker.ts b/docs/pages/x/api/date-pickers/types.desktop-date-time-picker.ts
new file mode 100644
index 0000000000000..72f285817bbb3
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-time-picker.ts
@@ -0,0 +1,4 @@
+import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDesktopDateTimePicker = createTypes(import.meta.url, DesktopDateTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-time-range-picker.md b/docs/pages/x/api/date-pickers/types.desktop-date-time-range-picker.md
new file mode 100644
index 0000000000000..395ca904d2ebb
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-time-range-picker.md
@@ -0,0 +1,1994 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.desktop-date-time-range-picker.md'
+
+## API Reference
+
+### DesktopDateTimeRangePicker
+
+Demos:
+
+- [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
+
+**DesktopDateTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                     | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                                 | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                        | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                       | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                       | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                                | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                                | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| calendars                                | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | The number of calendars to render on **desktop**.                                                                                                                                                                                                                                                                                                                                                                                   |
+| closeOnSelect                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition             | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                                                | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition                     | `RangePosition`                                                                                          | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| disableAutoMonthSwitching                | `boolean`                                                                                                | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing                       | `boolean`                                                                                                | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                                                | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                                | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                                                | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                                                 | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                                  | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                                                | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                                        | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                                    | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                                    | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                                    | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                                    | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                                    | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                                    | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                                 | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                                                 | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                               | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                            | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateTimeRangePickerView) => void)`                                                              | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateTimeRangePickerViewExternal`                                                                        | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                          | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                                | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                    | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                                                | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections                         | `FieldSelectedSections`                                                                                  | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                                                    | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                              | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DesktopDateTimeRangePickerSlotProps`                                                                    | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DesktopDateTimeRangePickerSlots`                                                                        | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                         | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                                 | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                        | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateTimeRangePickerView`                                                                                | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>`                                         | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateTimeRangePickerViewExternal[]`                                                                      | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                                 | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                                | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                            | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                                 | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### DesktopDateTimeRangePickerProps
+
+```typescript
+type DesktopDateTimeRangePickerProps = {
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 1
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateTimeRangePickerView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateTimeRangePickerView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Available views. */
+  views?: DateTimeRangePickerViewExternal[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateTimeRangePickerViewExternal;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### DesktopDateTimeRangePickerSlotProps
+
+```typescript
+type DesktopDateTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+};
+```
+
+### DesktopDateTimeRangePickerSlots
+
+```typescript
+type DesktopDateTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### DateTimeRangePickerView
+
+```typescript
+type DateTimeRangePickerView = 'day' | 'hours' | 'minutes' | 'seconds' | 'meridiem';
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### DateTimeRangePickerViewExternal
+
+```typescript
+type DateTimeRangePickerViewExternal = 'day' | 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.desktop-date-time-range-picker.ts b/docs/pages/x/api/date-pickers/types.desktop-date-time-range-picker.ts
new file mode 100644
index 0000000000000..4c915709cf175
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-date-time-range-picker.ts
@@ -0,0 +1,4 @@
+import { DesktopDateTimeRangePicker } from '@mui/x-date-pickers-pro/DesktopDateTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDesktopDateTimeRangePicker = createTypes(import.meta.url, DesktopDateTimeRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.desktop-time-picker.md b/docs/pages/x/api/date-pickers/types.desktop-time-picker.md
new file mode 100644
index 0000000000000..65fef6f7c97d3
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-time-picker.md
@@ -0,0 +1,1256 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.desktop-time-picker.md'
+
+## API Reference
+
+### DesktopTimePicker
+
+Demos:
+
+- [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
+
+**DesktopTimePicker Props:**
+
+| Prop                                     | Type                                                                               | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                           | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                  | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `any`                                                                              | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `any`                                                                              | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                          | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                          | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| ampmInClock                              | `boolean`                                                                          | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                                                                                                                                                  |
+| closeOnSelect                            | `boolean`                                                                          | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture                            | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                          | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                          | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| formatDensity                            | `'dense' \| 'spacious'`                                                            | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| localeText                               | `PickersInputComponentLocaleText`                                                  | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxTime                                  | `any`                                                                              | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minTime                                  | `any`                                                                              | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                           | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                     | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: TimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onOpen                                   | `(() => void)`                                                                     | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                      | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: TimeViewWithMeridiem) => void)`                                           | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `TimeViewWithMeridiem`                                                             | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations                         | `boolean`                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                              | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| selectedSections                         | `FieldSelectedSections`                                                            | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                        | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| skipDisabled                             | `boolean`                                                                          | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DesktopTimePickerSlotProps`                                                       | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DesktopTimePickerSlots`                                                           | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                   | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                           | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                  | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `TimeViewWithMeridiem`                                                             | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<TimePickerViewRenderers<TimeViewWithMeridiem>>`                           | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `TimeView[]`                                                                       | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                           | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                          | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                              | `PickerOrientation`                                                                | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                      | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                           | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### DesktopTimePickerProps
+
+```typescript
+type DesktopTimePickerProps = {
+  /** Available views. */
+  views?: TimeView[];
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopTimePickerSlotProps;
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<TimePickerViewRenderers<TimeViewWithMeridiem>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+};
+```
+
+### DesktopTimePickerSlotProps
+
+```typescript
+type DesktopTimePickerSlotProps = {
+  toolbar?: ExportedTimePickerToolbarProps;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+};
+```
+
+### DesktopTimePickerSlots
+
+```typescript
+type DesktopTimePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<TimePickerToolbarProps>;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.desktop-time-picker.ts b/docs/pages/x/api/date-pickers/types.desktop-time-picker.ts
new file mode 100644
index 0000000000000..a06f19fa3237b
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-time-picker.ts
@@ -0,0 +1,4 @@
+import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDesktopTimePicker = createTypes(import.meta.url, DesktopTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.desktop-time-range-picker.md b/docs/pages/x/api/date-pickers/types.desktop-time-range-picker.md
new file mode 100644
index 0000000000000..5e903264486f9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-time-range-picker.md
@@ -0,0 +1,1454 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.desktop-time-range-picker.md'
+
+## API Reference
+
+### DesktopTimeRangePicker
+
+**DesktopTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                             | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                    | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                            | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                            | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| closeOnSelect                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| defaultRangePosition                     | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| disableFuture                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                            | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| localeText                               | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxTime                                  | `any`                                                                                                | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minTime                                  | `any`                                                                                                | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                             | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: TimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onOpen                                   | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: TimeViewWithMeridiem) => void)`                                                             | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `TimeView`                                                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| selectedSections                         | `FieldSelectedSections`                                                                              | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                          | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| skipDisabled                             | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `DesktopTimeRangePickerSlotProps`                                                                    | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `DesktopTimeRangePickerSlots`                                                                        | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                             | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                    | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `TimeViewWithMeridiem`                                                                               | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `TimeRangePickerRenderers`                                                                           | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be the used.                                                                                                                                                                                                                                                               |
+| views                                    | `TimeView[]`                                                                                         | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                             | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### DesktopTimeRangePickerProps
+
+```typescript
+type DesktopTimeRangePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers?: TimeRangePickerRenderers;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /** Available views. */
+  views?: TimeView[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeView;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+};
+```
+
+### DesktopTimeRangePickerSlotProps
+
+```typescript
+type DesktopTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedTimeRangePickerToolbarProps;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+};
+```
+
+### DesktopTimeRangePickerSlots
+
+```typescript
+type DesktopTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between start and end time.
+   * @default TimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    TimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimeRangePickerToolbar
+   */
+  Toolbar?: React.JSXElementConstructor<TimeRangePickerToolbarProps>;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.desktop-time-range-picker.ts b/docs/pages/x/api/date-pickers/types.desktop-time-range-picker.ts
new file mode 100644
index 0000000000000..8ff28fb33a2d2
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.desktop-time-range-picker.ts
@@ -0,0 +1,4 @@
+import { DesktopTimeRangePicker } from '@mui/x-date-pickers-pro/DesktopTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDesktopTimeRangePicker = createTypes(import.meta.url, DesktopTimeRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.digital-clock.md b/docs/pages/x/api/date-pickers/types.digital-clock.md
new file mode 100644
index 0000000000000..afe2ddcaf29e9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.digital-clock.md
@@ -0,0 +1,433 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.digital-clock.md'
+
+## API Reference
+
+### DigitalClock
+
+Demos:
+
+- [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+- [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/)
+
+API:
+
+- [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
+
+**DigitalClock Props:**
+
+| Prop                                     | Type                                                                                    | Default                                                                                              | Description                                                                                                                                                                                                                        |
+| :--------------------------------------- | :-------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `any \| null`                                                                           | -                                                                                                    | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                         |
+| value                                    | `any \| null`                                                                           | -                                                                                                    | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                     |
+| ampm                                     | `boolean`                                                                               | `adapter.is12HourCycleInCurrentLocale()`                                                             | 12h/24h view for hour selection clock.                                                                                                                                                                                             |
+| classes                                  | `Partial<DigitalClockClasses>`                                                          | -                                                                                                    | Override or extend the styles applied to the component.                                                                                                                                                                            |
+| disableFuture                            | `boolean`                                                                               | `false`                                                                                              | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                  |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                               | `false`                                                                                              | Do not ignore date part when validating min/max time.                                                                                                                                                                              |
+| disablePast                              | `boolean`                                                                               | `false`                                                                                              | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                 |
+| focusedView                              | `'hours' \| null`                                                                       | -                                                                                                    | Controlled focused view.                                                                                                                                                                                                           |
+| maxTime                                  | `any`                                                                                   | -                                                                                                    | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minTime                                  | `any`                                                                                   | -                                                                                                    | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minutesStep                              | `number`                                                                                | `1`                                                                                                  | Step over minutes.                                                                                                                                                                                                                 |
+| onChange                                 | `((value: any, selectionState?: PickerSelectionState, selectedView?: 'hours') => void)` | -                                                                                                    | Callback fired when the value changes.                                                                                                                                                                                             |
+| onFocusedViewChange                      | `((view: 'hours', hasFocus: boolean) => void)`                                          | -                                                                                                    | Callback fired on focused view change.                                                                                                                                                                                             |
+| onViewChange                             | `((view: 'hours') => void)`                                                             | -                                                                                                    | Callback fired on view change.                                                                                                                                                                                                     |
+| openTo                                   | `'hours'`                                                                               | -                                                                                                    | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                        |
+| referenceDate                            | `any`                                                                                   | ``The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.`` | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                            |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                             | -                                                                                                    | Disable specific time.                                                                                                                                                                                                             |
+| skipDisabled                             | `boolean`                                                                               | `false`                                                                                              | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                      |
+| slotProps                                | `DigitalClockSlotProps`                                                                 | `{}`                                                                                                 | The props used for each component slot.                                                                                                                                                                                            |
+| slots                                    | `DigitalClockSlots`                                                                     | `{}`                                                                                                 | Overrideable component slots.                                                                                                                                                                                                      |
+| sx                                       | `SxProps<Theme>`                                                                        | -                                                                                                    | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                            |
+| timeStep                                 | `number`                                                                                | `30`                                                                                                 | The time steps between two time options.&#xA;For example, if `timeStep = 45`, then the available time options will be `[00:00, 00:45, 01:30, 02:15, 03:00, etc.]`.                                                                 |
+| timezone                                 | `PickersTimezone`                                                                       | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``              | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.     |
+| view                                     | `'hours'`                                                                               | -                                                                                                    | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                    |
+| views                                    | `'hours'[]`                                                                             | `['hours']`                                                                                          | Available views.                                                                                                                                                                                                                   |
+| autoFocus                                | `boolean`                                                                               | -                                                                                                    | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered. |
+| disabled                                 | `boolean`                                                                               | `false`                                                                                              | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                               |
+| readOnly                                 | `boolean`                                                                               | `false`                                                                                              | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                               |
+| className                                | `string`                                                                                | -                                                                                                    | -                                                                                                                                                                                                                                  |
+
+### getDigitalClockUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### digitalClockClasses
+
+```typescript
+type digitalClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list (by default: MenuList) element. */
+  list: string;
+  /** Styles applied to the list item (by default: MenuItem) element. */
+  item: string;
+};
+```
+
+### DigitalClockClasses
+
+```typescript
+type DigitalClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list (by default: MenuList) element. */
+  list: string;
+  /** Styles applied to the list item (by default: MenuItem) element. */
+  item: string;
+};
+```
+
+### DigitalClockClassKey
+
+```typescript
+type DigitalClockClassKey = 'root' | 'list' | 'item';
+```
+
+### DigitalClockItem
+
+```typescript
+type DigitalClockItem = StyledComponent<
+  MenuItemOwnProps &
+    Omit<
+      ButtonBaseOwnProps,
+      | 'autoFocus'
+      | 'classes'
+      | 'disabled'
+      | 'sx'
+      | 'dense'
+      | 'disableGutters'
+      | 'divider'
+      | 'selected'
+    > &
+    Omit<
+      ButtonBaseOwnProps,
+      | 'action'
+      | 'centerRipple'
+      | 'children'
+      | 'disableRipple'
+      | 'disableTouchRipple'
+      | 'focusRipple'
+      | 'focusVisibleClassName'
+      | 'LinkComponent'
+      | 'nativeButton'
+      | 'onFocusVisible'
+      | 'tabIndex'
+      | 'TouchRippleProps'
+      | 'touchRippleRef'
+      | 'autoFocus'
+      | 'classes'
+      | 'disabled'
+      | 'sx'
+      | 'dense'
+      | 'disableGutters'
+      | 'divider'
+      | 'selected'
+    > &
+    CommonProps &
+    Omit<
+      React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
+      | 'autoFocus'
+      | 'className'
+      | 'style'
+      | 'classes'
+      | 'action'
+      | 'centerRipple'
+      | 'children'
+      | 'disabled'
+      | 'disableRipple'
+      | 'disableTouchRipple'
+      | 'focusRipple'
+      | 'focusVisibleClassName'
+      | 'LinkComponent'
+      | 'nativeButton'
+      | 'onFocusVisible'
+      | 'sx'
+      | 'tabIndex'
+      | 'TouchRippleProps'
+      | 'touchRippleRef'
+      | 'dense'
+      | 'disableGutters'
+      | 'divider'
+      | 'selected'
+    > &
+    MUIStyledCommonProps<Theme>,
+  {},
+  {}
+>;
+```
+
+### DigitalClockItemProps
+
+```typescript
+type DigitalClockItemProps = {
+  itemValue: any;
+  formattedValue: string;
+  onClick: () => void;
+  selected: boolean;
+  disabled: boolean;
+  readOnly?: boolean;
+  tabIndex: number;
+};
+```
+
+### DigitalClockProps
+
+```typescript
+type DigitalClockProps = {
+  /**
+   * Available views.
+   * @default ['hours']
+   */
+  views?: 'hours'[];
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<DigitalClockClasses>;
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots?: DigitalClockSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DigitalClockSlotProps;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * The time steps between two time options.
+   * For example, if `timeStep = 45`, then the available time options will be `[00:00, 00:45, 01:30, 02:15, 03:00, etc.]`.
+   * @default 30
+   */
+  timeStep?: number;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
+   */
+  referenceDate?: any;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The view type. Will be one of date or time views.
+   */
+  onChange?: (value: any, selectionState?: PickerSelectionState, selectedView?: 'hours') => void;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: 'hours';
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: 'hours') => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: 'hours';
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  /** Controlled focused view. */
+  focusedView?: 'hours' | null;
+  /**
+   * Callback fired on focused view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onFocusedViewChange?: (view: 'hours', hasFocus: boolean) => void;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+### DigitalClockSlotProps
+
+```typescript
+type DigitalClockSlotProps = {
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+};
+```
+
+### DigitalClockSlots
+
+```typescript
+type DigitalClockSlots = {
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+};
+```
+
+### ExportedDigitalClockProps
+
+```typescript
+type ExportedDigitalClockProps = {
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * The time steps between two time options.
+   * For example, if `timeStep = 45`, then the available time options will be `[00:00, 00:45, 01:30, 02:15, 03:00, etc.]`.
+   * @default 30
+   */
+  timeStep?: number;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.digital-clock.ts b/docs/pages/x/api/date-pickers/types.digital-clock.ts
new file mode 100644
index 0000000000000..12ac8544c05d0
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.digital-clock.ts
@@ -0,0 +1,4 @@
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesDigitalClock = createTypes(import.meta.url, DigitalClock);
diff --git a/docs/pages/x/api/date-pickers/types.localization-provider.md b/docs/pages/x/api/date-pickers/types.localization-provider.md
new file mode 100644
index 0000000000000..14da45b4df6fe
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.localization-provider.md
@@ -0,0 +1,57 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.localization-provider.md'
+
+## API Reference
+
+### LocalizationProvider
+
+Demos:
+
+- [Date format and localization](https://mui.com/x/react-date-pickers/adapters-locale/)
+- [Calendar systems](https://mui.com/x/react-date-pickers/calendar-systems/)
+- [Translated components](https://mui.com/x/react-date-pickers/localization/)
+- [UTC and timezones](https://mui.com/x/react-date-pickers/timezone/)
+
+API:
+
+- [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/)
+
+**LocalizationProvider Props:**
+
+| Prop            | Type                         | Default | Description                                                          |
+| :-------------- | :--------------------------- | :------ | :------------------------------------------------------------------- |
+| adapterLocale   | `TLocale`                    | -       | Locale for the date library you are using                            |
+| dateAdapter     | `{}`                         | -       | Date library adapter class function.                                 |
+| dateFormats     | `Partial<AdapterFormats>`    | -       | Formats that are used for any child pickers                          |
+| dateLibInstance | `any`                        | -       | Date library instance you are using, if it has some global overrides |
+| localeText      | `Partial<PickersLocaleText>` | -       | Locale for components texts                                          |
+| children        | `React.ReactNode`            | -       | -                                                                    |
+
+## Additional Types
+
+### LocalizationProviderProps
+
+````typescript
+type LocalizationProviderProps<TLocale> = {
+  children?: React.ReactNode;
+  /**
+   * Date library adapter class function.
+   * @see
+   */
+  dateAdapter?: {};
+  /** Formats that are used for any child pickers */
+  dateFormats?: Partial<AdapterFormats>;
+  /**
+   * Date library instance you are using, if it has some global overrides
+   * ```jsx
+   * dateLibInstance={momentTimeZone}
+   * ```
+   */
+  dateLibInstance?: any;
+  /** Locale for the date library you are using */
+  adapterLocale?: TLocale;
+  /** Locale for components texts */
+  localeText?: Partial<PickersLocaleText>;
+};
+````
diff --git a/docs/pages/x/api/date-pickers/types.localization-provider.ts b/docs/pages/x/api/date-pickers/types.localization-provider.ts
new file mode 100644
index 0000000000000..139dcd9c2a8b0
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.localization-provider.ts
@@ -0,0 +1,4 @@
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesLocalizationProvider = createTypes(import.meta.url, LocalizationProvider);
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-picker.md b/docs/pages/x/api/date-pickers/types.mobile-date-picker.md
new file mode 100644
index 0000000000000..7f70a50c426cc
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-picker.md
@@ -0,0 +1,1706 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.mobile-date-picker.md'
+
+## API Reference
+
+### MobileDatePicker
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
+
+**MobileDatePicker Props:**
+
+| Prop                        | Type                                                                               | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                        | `string`                                                                           | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                       | `React.ReactNode`                                                                  | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                | `any`                                                                              | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                       | `any`                                                                              | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                        | `boolean`                                                                          | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| closeOnSelect               | `boolean`                                                                          | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter          | `((date: any) => string)`                                                          | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| disableFuture               | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday       | `boolean`                                                                          | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker           | `boolean`                                                                          | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber           | `boolean`                                                                          | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber             | `number`                                                                           | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity               | `'dense' \| 'spacious'`                                                            | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus    | `boolean`                                                                          | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                     | `boolean`                                                                          | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                  | `PickersInputComponentLocaleText`                                                  | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                     | `any`                                                                              | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                     | `any`                                                                              | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| monthsPerRow                | `3 \| 4`                                                                           | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                    | `((value: any, context: PickerChangeHandlerContext<DateValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                     | `(() => void)`                                                                     | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                     | `((error: DateValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange               | `((month: any) => void)`                                                           | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                      | `(() => void)`                                                                     | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange    | `((newValue: FieldSelectedSections) => void)`                                      | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                | `((view: DateView) => void)`                                                       | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                | `((year: any) => void)`                                                            | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                      | `DateView`                                                                         | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations            | `boolean`                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate               | `any`                                                                              | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading               | `(() => React.ReactNode)`                                                          | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections            | `FieldSelectedSections`                                                            | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate           | `((day: any) => boolean)`                                                          | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth          | `((month: any) => boolean)`                                                        | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableYear           | `((year: any) => boolean)`                                                         | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth | `boolean`                                                                          | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                   | `MobileDatePickerSlotProps`                                                        | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                       | `MobileDatePickerSlots`                                                            | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                          | `SxProps<Theme>`                                                                   | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                    | `PickersTimezone`                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                        | `DateView`                                                                         | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers               | `Partial<DatePickerViewRenderers<DateView>>`                                       | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                       | `DateView[]`                                                                       | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                  | `'asc' \| 'desc'`                                                                  | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                 | `3 \| 4`                                                                           | `3`                                                                                                      | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                      | `string`                                                                           | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                   | `boolean`                                                                          | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                    | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                    | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                 | `PickerOrientation`                                                                | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                    | `React.Ref<HTMLInputElement>`                                                      | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                   | `string`                                                                           | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### MobileDatePickerProps
+
+```typescript
+type MobileDatePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MobileDatePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileDatePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default 3
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DatePickerViewRenderers<DateView>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateView;
+  /** Available views. */
+  views?: DateView[];
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### MobileDatePickerSlotProps
+
+```typescript
+type MobileDatePickerSlotProps = {
+  toolbar?: ExportedDatePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### MobileDatePickerSlots
+
+```typescript
+type MobileDatePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DatePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DatePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'title'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-picker.ts b/docs/pages/x/api/date-pickers/types.mobile-date-picker.ts
new file mode 100644
index 0000000000000..4d523d94d99de
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-picker.ts
@@ -0,0 +1,4 @@
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMobileDatePicker = createTypes(import.meta.url, MobileDatePicker);
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-range-picker.md b/docs/pages/x/api/date-pickers/types.mobile-date-range-picker.md
new file mode 100644
index 0000000000000..ad3ad4fca8952
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-range-picker.md
@@ -0,0 +1,1672 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.mobile-date-range-picker.md'
+
+## API Reference
+
+### MobileDateRangePicker
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [MobileDateRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-range-picker/)
+
+**MobileDateRangePicker Props:**
+
+| Prop                         | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                         | `string`                                                                                             | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                        | `React.ReactNode`                                                                                    | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                 | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                        | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                         | `boolean`                                                                                            | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| closeOnSelect                | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition | `1 \| 2 \| 3`                                                                                        | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter           | `((date: any) => string)`                                                                            | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition         | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| disableAutoMonthSwitching    | `boolean`                                                                                            | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing           | `boolean`                                                                                            | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableOpenPicker            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                  | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber            | `boolean`                                                                                            | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber              | `number`                                                                                             | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                      | `boolean`                                                                                            | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                   | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                      | `any`                                                                                                | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDate                      | `any`                                                                                                | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                      | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                      | `((error: DateRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                | `((month: any) => void)`                                                                             | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                       | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange        | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange     | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| rangePosition                | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations             | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                | `(() => React.ReactNode)`                                                                            | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections             | `FieldSelectedSections`                                                                              | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate            | `((day: any, position: 'start' \| 'end') => boolean)`                                                | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| showDaysOutsideCurrentMonth  | `boolean`                                                                                            | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| slotProps                    | `MobileDateRangePickerSlotProps`                                                                     | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                        | `MobileDateRangePickerSlots`                                                                         | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                           | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| timezone                     | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| viewRenderers                | `Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>`      | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| format                       | `string`                                                                                             | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                    | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                     | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                    | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### MobileDateRangePickerProps
+
+```typescript
+type MobileDateRangePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MobileDateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileDateRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<
+    PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>
+  >;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### MobileDateRangePickerSlotProps
+
+```typescript
+type MobileDateRangePickerSlotProps = {
+  toolbar?: ExportedDateRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+};
+```
+
+### MobileDateRangePickerSlots
+
+```typescript
+type MobileDateRangePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-range-picker.ts b/docs/pages/x/api/date-pickers/types.mobile-date-range-picker.ts
new file mode 100644
index 0000000000000..c4d18242323d4
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-range-picker.ts
@@ -0,0 +1,4 @@
+import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMobileDateRangePicker = createTypes(import.meta.url, MobileDateRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-time-picker.md b/docs/pages/x/api/date-pickers/types.mobile-date-time-picker.md
new file mode 100644
index 0000000000000..4914a20ac9fa7
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-time-picker.md
@@ -0,0 +1,1982 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.mobile-date-time-picker.md'
+
+## API Reference
+
+### MobileDateTimePicker
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
+
+**MobileDateTimePicker Props:**
+
+| Prop                                     | Type                                                                                   | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                               | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                      | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `any`                                                                                  | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `any`                                                                                  | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                              | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| ampmInClock                              | `boolean`                                                                              | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                                                                                                                                                  |
+| closeOnSelect                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                              | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| disableFuture                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                              | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                              | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                              | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                              | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                               | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                              | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                      | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                  | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                  | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                  | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                  | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                  | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                  | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                               | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| monthsPerRow                             | `3 \| 4`                                                                               | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                               | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                         | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                          | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateOrTimeViewWithMeridiem) => void)`                                         | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onYearChange                             | `((year: any) => void)`                                                                | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| reduceAnimations                         | `boolean`                                                                              | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                  | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                              | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                                                                                                                                                    |
+| selectedSections                         | `FieldSelectedSections`                                                                | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any) => boolean)`                                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableMonth                       | `((month: any) => boolean)`                                                            | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                            | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| shouldDisableYear                        | `((year: any) => boolean)`                                                             | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                              | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                              | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `MobileDateTimePickerSlotProps`                                                        | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `MobileDateTimePickerSlots`                                                            | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                       | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                               | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                      | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>`                     | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateOrTimeView[]`                                                                     | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| yearsOrder                               | `'asc' \| 'desc'`                                                                      | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                                                                                                                                                          |
+| yearsPerRow                              | `3 \| 4`                                                                               | `3`                                                                                                      | Years rendered per row.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| format                                   | `string`                                                                               | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                              | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| orientation                              | `PickerOrientation`                                                                    | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                                                                                                                                                          |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                          | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                               | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### MobileDateTimePickerProps
+
+```typescript
+type MobileDateTimePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MobileDateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileDateTimePickerSlotProps;
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /** Available views. */
+  views?: DateOrTimeView[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateOrTimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateOrTimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Years rendered per row.
+   * @default 3
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+};
+```
+
+### MobileDateTimePickerSlotProps
+
+```typescript
+type MobileDateTimePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: DateTimePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<any>, {}, PickerOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### MobileDateTimePickerSlots
+
+```typescript
+type MobileDateTimePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-time-picker.ts b/docs/pages/x/api/date-pickers/types.mobile-date-time-picker.ts
new file mode 100644
index 0000000000000..fea48500b47c6
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-time-picker.ts
@@ -0,0 +1,4 @@
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMobileDateTimePicker = createTypes(import.meta.url, MobileDateTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-time-range-picker.md b/docs/pages/x/api/date-pickers/types.mobile-date-time-range-picker.md
new file mode 100644
index 0000000000000..c44f653999ac1
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-time-range-picker.md
@@ -0,0 +1,1981 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.mobile-date-time-range-picker.md'
+
+## API Reference
+
+### MobileDateTimeRangePicker
+
+Demos:
+
+- [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [MobileDateTimeRangePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-range-picker/)
+
+**MobileDateTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                     | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                                 | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                        | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                       | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                       | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                                | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                                | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| closeOnSelect                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition             | `1 \| 2 \| 3`                                                                                            | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                                                                                                                                                          |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                                                | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                                                                                                                                                           |
+| defaultRangePosition                     | `RangePosition`                                                                                          | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| disableAutoMonthSwitching                | `boolean`                                                                                                | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                                                                                                                                                          |
+| disableDragEditing                       | `boolean`                                                                                                | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableHighlightToday                    | `boolean`                                                                                                | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                                | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| displayWeekNumber                        | `boolean`                                                                                                | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                                                                                                                                                         |
+| fixedWeekNumber                          | `number`                                                                                                 | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                                                                                                                                                       |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                                  | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| loading                                  | `boolean`                                                                                                | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                                                                                                                                                             |
+| localeText                               | `PickersInputComponentLocaleText`                                                                        | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxDate                                  | `any`                                                                                                    | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| maxDateTime                              | `any`                                                                                                    | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                  |
+| maxTime                                  | `any`                                                                                                    | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minDate                                  | `any`                                                                                                    | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| minDateTime                              | `any`                                                                                                    | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                  |
+| minTime                                  | `any`                                                                                                    | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                                 | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateTimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onMonthChange                            | `((month: any) => void)`                                                                                 | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| onOpen                                   | `(() => void)`                                                                                           | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                               | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                            | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: DateTimeRangePickerView) => void)`                                                              | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `DateTimeRangePickerViewExternal`                                                                        | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                          | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                                | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                    | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| renderLoading                            | `(() => React.ReactNode)`                                                                                | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                                                                                                                                                  |
+| selectedSections                         | `FieldSelectedSections`                                                                                  | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                                                    | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                       |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                              | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                                                | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers.                                                                                                                               |
+| skipDisabled                             | `boolean`                                                                                                | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `MobileDateTimeRangePickerSlotProps`                                                                     | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `MobileDateTimeRangePickerSlots`                                                                         | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                         | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                                 | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                        | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `DateTimeRangePickerView`                                                                                | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>`                                         | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                                                                                                                                                   |
+| views                                    | `DateTimeRangePickerViewExternal[]`                                                                      | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                                 | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                                | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                                | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                            | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                                 | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### MobileDateTimeRangePickerProps
+
+```typescript
+type MobileDateTimeRangePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MobileDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileDateTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateTimeRangePickerView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateTimeRangePickerView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateTimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Available views. */
+  views?: DateTimeRangePickerViewExternal[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateTimeRangePickerViewExternal;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### MobileDateTimeRangePickerSlotProps
+
+```typescript
+type MobileDateTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+};
+```
+
+### MobileDateTimeRangePickerSlots
+
+```typescript
+type MobileDateTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### DateTimeRangePickerView
+
+```typescript
+type DateTimeRangePickerView = 'day' | 'hours' | 'minutes' | 'seconds' | 'meridiem';
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### DateTimeRangePickerViewExternal
+
+```typescript
+type DateTimeRangePickerViewExternal = 'day' | 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.mobile-date-time-range-picker.ts b/docs/pages/x/api/date-pickers/types.mobile-date-time-range-picker.ts
new file mode 100644
index 0000000000000..7de9c68be2ae2
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-date-time-range-picker.ts
@@ -0,0 +1,4 @@
+import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro/MobileDateTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMobileDateTimeRangePicker = createTypes(import.meta.url, MobileDateTimeRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.mobile-time-picker.ts b/docs/pages/x/api/date-pickers/types.mobile-time-picker.ts
new file mode 100644
index 0000000000000..610a16ed66d37
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-time-picker.ts
@@ -0,0 +1,4 @@
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMobileTimePicker = createTypes(import.meta.url, MobileTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.mobile-time-range-picker.md b/docs/pages/x/api/date-pickers/types.mobile-time-range-picker.md
new file mode 100644
index 0000000000000..ef0297778ddd9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-time-range-picker.md
@@ -0,0 +1,1441 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.mobile-time-range-picker.md'
+
+## API Reference
+
+### MobileTimeRangePicker
+
+**MobileTimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                             | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                    | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                            | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                            | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| closeOnSelect                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| defaultRangePosition                     | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| disableFuture                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                            | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| localeText                               | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxTime                                  | `any`                                                                                                | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minTime                                  | `any`                                                                                                | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                             | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: TimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onOpen                                   | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: TimeViewWithMeridiem) => void)`                                                             | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `TimeView`                                                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| selectedSections                         | `FieldSelectedSections`                                                                              | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                          | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| slotProps                                | `MobileTimeRangePickerSlotProps`                                                                     | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `MobileTimeRangePickerSlots`                                                                         | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                             | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                    | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `TimeViewWithMeridiem`                                                                               | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `TimeRangePickerRenderers`                                                                           | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be the used.                                                                                                                                                                                                                                                               |
+| views                                    | `TimeView[]`                                                                                         | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                             | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Additional Types
+
+### MobileTimeRangePickerProps
+
+```typescript
+type MobileTimeRangePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MobileTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MobileTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers?: TimeRangePickerRenderers;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /** Available views. */
+  views?: TimeView[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeView;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+};
+```
+
+### MobileTimeRangePickerSlotProps
+
+```typescript
+type MobileTimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedTimeRangePickerToolbarProps;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+};
+```
+
+### MobileTimeRangePickerSlots
+
+```typescript
+type MobileTimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between start and end time.
+   * @default TimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    TimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimeRangePickerToolbar
+   */
+  Toolbar?: React.JSXElementConstructor<TimeRangePickerToolbarProps>;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.mobile-time-range-picker.ts b/docs/pages/x/api/date-pickers/types.mobile-time-range-picker.ts
new file mode 100644
index 0000000000000..4d9f3b1b2e1fa
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.mobile-time-range-picker.ts
@@ -0,0 +1,4 @@
+import { MobileTimeRangePicker } from '@mui/x-date-pickers-pro/MobileTimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMobileTimeRangePicker = createTypes(import.meta.url, MobileTimeRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.month-calendar.md b/docs/pages/x/api/date-pickers/types.month-calendar.md
new file mode 100644
index 0000000000000..9133c89ffa33d
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.month-calendar.md
@@ -0,0 +1,212 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.month-calendar.md'
+
+## API Reference
+
+### getMonthCalendarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### MonthCalendar
+
+Demos:
+
+- [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+
+API:
+
+- [MonthCalendar API](https://mui.com/x/api/date-pickers/month-calendar/)
+
+**MonthCalendar Props:**
+
+| Prop                  | Type                            | Default                                                                                                | Description                                                                                                                                                                                                                    |
+| :-------------------- | :------------------------------ | :----------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue          | `any \| null`                   | -                                                                                                      | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                     |
+| value                 | `any \| null`                   | -                                                                                                      | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                 |
+| classes               | `Partial<MonthCalendarClasses>` | -                                                                                                      | Override or extend the styles applied to the component.                                                                                                                                                                        |
+| currentMonth          | `any`                           | -                                                                                                      | -                                                                                                                                                                                                                              |
+| disableFuture         | `boolean`                       | `false`                                                                                                | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                              |
+| disableHighlightToday | `boolean`                       | `false`                                                                                                | If `true`, today's date is rendering without highlighting with circle.                                                                                                                                                         |
+| disablePast           | `boolean`                       | `false`                                                                                                | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                             |
+| gridLabelId           | `string`                        | -                                                                                                      | -                                                                                                                                                                                                                              |
+| hasFocus              | `boolean`                       | -                                                                                                      | -                                                                                                                                                                                                                              |
+| maxDate               | `any`                           | `2099-12-31`                                                                                           | Maximal selectable date.                                                                                                                                                                                                       |
+| minDate               | `any`                           | `1900-01-01`                                                                                           | Minimal selectable date.                                                                                                                                                                                                       |
+| monthsPerRow          | `3 \| 4`                        | `3`                                                                                                    | Months rendered per row.                                                                                                                                                                                                       |
+| onChange              | `((value: any) => void)`        | -                                                                                                      | Callback fired when the value changes.                                                                                                                                                                                         |
+| onFocusedViewChange   | `((hasFocus: boolean) => void)` | -                                                                                                      | -                                                                                                                                                                                                                              |
+| onMonthFocus          | `((month: number) => void)`     | -                                                                                                      | -                                                                                                                                                                                                                              |
+| referenceDate         | `any`                           | ``The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`.`` | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                        |
+| shouldDisableMonth    | `((month: any) => boolean)`     | -                                                                                                      | Disable specific month.                                                                                                                                                                                                        |
+| slotProps             | `MonthCalendarSlotProps`        | `{}`                                                                                                   | The props used for each component slot.                                                                                                                                                                                        |
+| slots                 | `MonthCalendarSlots`            | `{}`                                                                                                   | Overridable component slots.                                                                                                                                                                                                   |
+| sx                    | `SxProps<Theme>`                | -                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                        |
+| timezone              | `PickersTimezone`               | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used. |
+| autoFocus             | `boolean`                       | -                                                                                                      | -                                                                                                                                                                                                                              |
+| disabled              | `boolean`                       | `false`                                                                                                | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                           |
+| readOnly              | `boolean`                       | `false`                                                                                                | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                           |
+| className             | `string`                        | -                                                                                                      | -                                                                                                                                                                                                                              |
+
+## Additional Types
+
+### monthCalendarClasses
+
+```typescript
+type monthCalendarClasses = Record<'root' | 'button' | 'disabled' | 'selected', string>;
+```
+
+### MonthCalendarClasses
+
+```typescript
+type MonthCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the button element that represents a single month */
+  button: string;
+  /** Styles applied to a disabled button element. */
+  disabled: string;
+  /** Styles applied to a selected button element. */
+  selected: string;
+};
+```
+
+### MonthCalendarClassKey
+
+```typescript
+type MonthCalendarClassKey = 'root' | 'button' | 'disabled' | 'selected';
+```
+
+### MonthCalendarProps
+
+```typescript
+type MonthCalendarProps = {
+  autoFocus?: boolean;
+  className?: string;
+  currentMonth?: any;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<MonthCalendarClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MonthCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MonthCalendarSlotProps;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`.
+   */
+  referenceDate?: any;
+  /** Callback fired when the value changes. */
+  onChange?: (value: any) => void;
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  onMonthFocus?: (month: number) => void;
+  hasFocus?: boolean;
+  onFocusedViewChange?: (hasFocus: boolean) => void;
+  gridLabelId?: string;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+### MonthCalendarSlotProps
+
+```typescript
+type MonthCalendarSlotProps = {
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+};
+```
+
+### MonthCalendarSlots
+
+```typescript
+type MonthCalendarSlots = {
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.month-calendar.ts b/docs/pages/x/api/date-pickers/types.month-calendar.ts
new file mode 100644
index 0000000000000..7a2eba4a0b1b2
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.month-calendar.ts
@@ -0,0 +1,4 @@
+import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMonthCalendar = createTypes(import.meta.url, MonthCalendar);
diff --git a/docs/pages/x/api/date-pickers/types.multi-input-date-range-field.md b/docs/pages/x/api/date-pickers/types.multi-input-date-range-field.md
new file mode 100644
index 0000000000000..e0d1a0e7931bd
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-input-date-range-field.md
@@ -0,0 +1,290 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.multi-input-date-range-field.md'
+
+## API Reference
+
+### getMultiInputDateRangeFieldUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### MultiInputDateRangeField
+
+Demos:
+
+- [DateRangeField](http://mui.com/x/react-date-pickers/date-range-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/)
+
+**MultiInputDateRangeField Props:**
+
+| Prop                      | Type                                                                   | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :------------------------ | :--------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue              | `PickerRangeValue`                                                     | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                     | `PickerRangeValue`                                                     | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| classes                   | `Partial<MultiInputDateRangeFieldClasses>`                             | -                                                                                                                                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| dateSeparator             | `string`                                                               | `"–"`                                                                                                                                                    | String displayed between the start and the end dates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture             | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disablePast               | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endFieldRef               | `React.Ref<FieldRef<any> \| null>`                                     | -                                                                                                                                                        | The ref object used to interact with the end field imperatively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| formatDensity             | `'dense' \| 'spacious'`                                                | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| maxDate                   | `any`                                                                  | `2099-12-31`                                                                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| minDate                   | `any`                                                                  | `1900-01-01`                                                                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| onChange                  | `FieldChangeHandler<PickerRangeValue, DateRangeValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                   | `((error: DateRangeValidationError, value: PickerRangeValue) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onSelectedSectionsChange  | `((newValue: FieldSelectedSections) => void)`                          | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate             | `any`                                                                  | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections          | `FieldSelectedSections`                                                | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableDate         | `((day: any, position: 'start' \| 'end') => boolean)`                  | -                                                                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| shouldRespectLeadingZeros | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                 | `MultiInputDateRangeFieldSlotProps`                                    | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                     | `MultiInputDateRangeFieldSlots`                                        | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startFieldRef             | `React.Ref<FieldRef<any> \| null>`                                     | -                                                                                                                                                        | The ref object used to interact with the start field imperatively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| timezone                  | `PickersTimezone`                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| format                    | `string`                                                               | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                 | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                  | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                  | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| className                 | `string`                                                               | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+## Additional Types
+
+### multiInputDateRangeFieldClasses
+
+```typescript
+type multiInputDateRangeFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+};
+```
+
+### MultiInputDateRangeFieldClasses
+
+```typescript
+type MultiInputDateRangeFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+};
+```
+
+### MultiInputDateRangeFieldClassKey
+
+```typescript
+type MultiInputDateRangeFieldClassKey = 'root' | 'separator';
+```
+
+### MultiInputDateRangeFieldProps
+
+```typescript
+type MultiInputDateRangeFieldProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<MultiInputDateRangeFieldClasses>;
+  /** The ref object used to interact with the start field imperatively. */
+  startFieldRef?: React.Ref<FieldRef<any> | null>;
+  /** The ref object used to interact with the end field imperatively. */
+  endFieldRef?: React.Ref<FieldRef<any> | null>;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, DateRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MultiInputRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiInputRangeFieldSlotProps;
+};
+```
+
+### MultiInputDateRangeFieldSlotProps
+
+```typescript
+type MultiInputDateRangeFieldSlotProps = {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<
+    PickersTextFieldProps,
+    {},
+    {
+      isFieldDisabled: boolean;
+      isFieldReadOnly: boolean;
+      isFieldRequired: boolean;
+      fieldDirection: 'ltr' | 'rtl';
+      isPickerValueEmpty: boolean;
+      isPickerOpen: boolean;
+      isPickerDisabled: boolean;
+      isPickerReadOnly: boolean;
+      pickerVariant: PickerVariant;
+      pickerOrientation: PickerOrientation;
+      position: RangePosition;
+    }
+  >;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
+};
+```
+
+### MultiInputDateRangeFieldSlots
+
+```typescript
+type MultiInputDateRangeFieldSlots = {
+  /**
+   * Element rendered at the root.
+   * @default MultiInputRangeFieldRoot
+   */
+  root?: React.ElementType;
+  /**
+   * Form control with an input to render a date.
+   * It is rendered twice: once for the start date and once for the end date.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Element rendered between the two inputs.
+   * @default MultiInputRangeFieldSeparator
+   */
+  separator?: React.ElementType;
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (value: unknown, context: { validationError: unknown }) => void;
+```
diff --git a/docs/pages/x/api/date-pickers/types.multi-input-date-range-field.ts b/docs/pages/x/api/date-pickers/types.multi-input-date-range-field.ts
new file mode 100644
index 0000000000000..c3d1ab663cb8b
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-input-date-range-field.ts
@@ -0,0 +1,4 @@
+import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMultiInputDateRangeField = createTypes(import.meta.url, MultiInputDateRangeField);
diff --git a/docs/pages/x/api/date-pickers/types.multi-input-date-time-range-field.md b/docs/pages/x/api/date-pickers/types.multi-input-date-time-range-field.md
new file mode 100644
index 0000000000000..02268e7014685
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-input-date-time-range-field.md
@@ -0,0 +1,338 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.multi-input-date-time-range-field.md'
+
+## API Reference
+
+### getMultiInputDateTimeRangeFieldUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### MultiInputDateTimeRangeField
+
+Demos:
+
+- [DateTimeRangeField](http://mui.com/x/react-date-pickers/date-time-range-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [MultiInputDateTimeRangeField API](https://mui.com/x/api/multi-input-date-time-range-field/)
+
+**MultiInputDateTimeRangeField Props:**
+
+| Prop                                     | Type                                                                       | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :--------------------------------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `PickerRangeValue`                                                         | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                                    | `PickerRangeValue`                                                         | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ampm                                     | `boolean`                                                                  | `adapter.is12HourCycleInCurrentLocale()`                                                                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| classes                                  | `Partial<MultiInputDateTimeRangeFieldClasses>`                             | -                                                                                                                                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| dateSeparator                            | `string`                                                                   | `"–"`                                                                                                                                                    | String displayed between the start and the end dates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                  | `false`                                                                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disablePast                              | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endFieldRef                              | `React.Ref<FieldRef<any> \| null>`                                         | -                                                                                                                                                        | The ref object used to interact with the end field imperatively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| formatDensity                            | `'dense' \| 'spacious'`                                                    | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| maxDate                                  | `any`                                                                      | `2099-12-31`                                                                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxDateTime                              | `any`                                                                      | -                                                                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| maxTime                                  | `any`                                                                      | -                                                                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minDate                                  | `any`                                                                      | `1900-01-01`                                                                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| minDateTime                              | `any`                                                                      | -                                                                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| minTime                                  | `any`                                                                      | -                                                                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minutesStep                              | `number`                                                                   | `1`                                                                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onChange                                 | `FieldChangeHandler<PickerRangeValue, DateTimeRangeValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                              | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate                            | `any`                                                                      | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections                         | `FieldSelectedSections`                                                    | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                      | -                                                                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                | -                                                                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldRespectLeadingZeros                | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                                | `MultiInputDateTimeRangeFieldSlotProps`                                    | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                                    | `MultiInputDateTimeRangeFieldSlots`                                        | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startFieldRef                            | `React.Ref<FieldRef<any> \| null>`                                         | -                                                                                                                                                        | The ref object used to interact with the start field imperatively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| timezone                                 | `PickersTimezone`                                                          | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| format                                   | `string`                                                                   | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                                 | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                                 | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| className                                | `string`                                                                   | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+## Additional Types
+
+### multiInputDateTimeRangeFieldClasses
+
+```typescript
+type multiInputDateTimeRangeFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+};
+```
+
+### MultiInputDateTimeRangeFieldClasses
+
+```typescript
+type MultiInputDateTimeRangeFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+};
+```
+
+### MultiInputDateTimeRangeFieldClassKey
+
+```typescript
+type MultiInputDateTimeRangeFieldClassKey = 'root' | 'separator';
+```
+
+### MultiInputDateTimeRangeFieldProps
+
+```typescript
+type MultiInputDateTimeRangeFieldProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<MultiInputDateTimeRangeFieldClasses>;
+  /** The ref object used to interact with the start field imperatively. */
+  startFieldRef?: React.Ref<FieldRef<any> | null>;
+  /** The ref object used to interact with the end field imperatively. */
+  endFieldRef?: React.Ref<FieldRef<any> | null>;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, DateTimeRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MultiInputRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiInputRangeFieldSlotProps;
+};
+```
+
+### MultiInputDateTimeRangeFieldSlotProps
+
+```typescript
+type MultiInputDateTimeRangeFieldSlotProps = {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<
+    PickersTextFieldProps,
+    {},
+    {
+      isFieldDisabled: boolean;
+      isFieldReadOnly: boolean;
+      isFieldRequired: boolean;
+      fieldDirection: 'ltr' | 'rtl';
+      isPickerValueEmpty: boolean;
+      isPickerOpen: boolean;
+      isPickerDisabled: boolean;
+      isPickerReadOnly: boolean;
+      pickerVariant: PickerVariant;
+      pickerOrientation: PickerOrientation;
+      position: RangePosition;
+    }
+  >;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
+};
+```
+
+### MultiInputDateTimeRangeFieldSlots
+
+```typescript
+type MultiInputDateTimeRangeFieldSlots = {
+  /**
+   * Element rendered at the root.
+   * @default MultiInputRangeFieldRoot
+   */
+  root?: React.ElementType;
+  /**
+   * Form control with an input to render a date.
+   * It is rendered twice: once for the start date and once for the end date.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Element rendered between the two inputs.
+   * @default MultiInputRangeFieldSeparator
+   */
+  separator?: React.ElementType;
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (value: unknown, context: { validationError: unknown }) => void;
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.multi-input-date-time-range-field.ts b/docs/pages/x/api/date-pickers/types.multi-input-date-time-range-field.ts
new file mode 100644
index 0000000000000..7df1b897ad695
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-input-date-time-range-field.ts
@@ -0,0 +1,4 @@
+import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMultiInputDateTimeRangeField = createTypes(import.meta.url, MultiInputDateTimeRangeField);
diff --git a/docs/pages/x/api/date-pickers/types.multi-input-time-range-field.md b/docs/pages/x/api/date-pickers/types.multi-input-time-range-field.md
new file mode 100644
index 0000000000000..a82eb5ec1e448
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-input-time-range-field.md
@@ -0,0 +1,312 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.multi-input-time-range-field.md'
+
+## API Reference
+
+### getMultiInputTimeRangeFieldUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### MultiInputTimeRangeField
+
+Demos:
+
+- [TimeRangeField](http://mui.com/x/react-date-pickers/time-range-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/)
+
+**MultiInputTimeRangeField Props:**
+
+| Prop                                     | Type                                                                   | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :--------------------------------------- | :--------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `PickerRangeValue`                                                     | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                                    | `PickerRangeValue`                                                     | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ampm                                     | `boolean`                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| classes                                  | `Partial<MultiInputTimeRangeFieldClasses>`                             | -                                                                                                                                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| dateSeparator                            | `string`                                                               | `"–"`                                                                                                                                                    | String displayed between the start and the end dates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                              | `false`                                                                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disablePast                              | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endFieldRef                              | `React.Ref<FieldRef<any> \| null>`                                     | -                                                                                                                                                        | The ref object used to interact with the end field imperatively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| formatDensity                            | `'dense' \| 'spacious'`                                                | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| maxTime                                  | `any`                                                                  | -                                                                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minTime                                  | `any`                                                                  | -                                                                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minutesStep                              | `number`                                                               | `1`                                                                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onChange                                 | `FieldChangeHandler<PickerRangeValue, TimeRangeValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onError                                  | `((error: TimeRangeValidationError, value: PickerRangeValue) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                          | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate                            | `any`                                                                  | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections                         | `FieldSelectedSections`                                                | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                            | -                                                                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldRespectLeadingZeros                | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                                | `MultiInputTimeRangeFieldSlotProps`                                    | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                                    | `MultiInputTimeRangeFieldSlots`                                        | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startFieldRef                            | `React.Ref<FieldRef<any> \| null>`                                     | -                                                                                                                                                        | The ref object used to interact with the start field imperatively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| timezone                                 | `PickersTimezone`                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| format                                   | `string`                                                               | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                                 | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                                 | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| className                                | `string`                                                               | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+## Additional Types
+
+### multiInputTimeRangeFieldClasses
+
+```typescript
+type multiInputTimeRangeFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+};
+```
+
+### MultiInputTimeRangeFieldClasses
+
+```typescript
+type MultiInputTimeRangeFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+};
+```
+
+### MultiInputTimeRangeFieldClassKey
+
+```typescript
+type MultiInputTimeRangeFieldClassKey = 'root' | 'separator';
+```
+
+### MultiInputTimeRangeFieldProps
+
+```typescript
+type MultiInputTimeRangeFieldProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<MultiInputTimeRangeFieldClasses>;
+  /** The ref object used to interact with the start field imperatively. */
+  startFieldRef?: React.Ref<FieldRef<any> | null>;
+  /** The ref object used to interact with the end field imperatively. */
+  endFieldRef?: React.Ref<FieldRef<any> | null>;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, TimeRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  className?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MultiInputRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiInputRangeFieldSlotProps;
+};
+```
+
+### MultiInputTimeRangeFieldSlotProps
+
+```typescript
+type MultiInputTimeRangeFieldSlotProps = {
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<
+    PickersTextFieldProps,
+    {},
+    {
+      isFieldDisabled: boolean;
+      isFieldReadOnly: boolean;
+      isFieldRequired: boolean;
+      fieldDirection: 'ltr' | 'rtl';
+      isPickerValueEmpty: boolean;
+      isPickerOpen: boolean;
+      isPickerDisabled: boolean;
+      isPickerReadOnly: boolean;
+      pickerVariant: PickerVariant;
+      pickerOrientation: PickerOrientation;
+      position: RangePosition;
+    }
+  >;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
+};
+```
+
+### MultiInputTimeRangeFieldSlots
+
+```typescript
+type MultiInputTimeRangeFieldSlots = {
+  /**
+   * Element rendered at the root.
+   * @default MultiInputRangeFieldRoot
+   */
+  root?: React.ElementType;
+  /**
+   * Form control with an input to render a date.
+   * It is rendered twice: once for the start date and once for the end date.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Element rendered between the two inputs.
+   * @default MultiInputRangeFieldSeparator
+   */
+  separator?: React.ElementType;
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (value: unknown, context: { validationError: unknown }) => void;
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.multi-input-time-range-field.ts b/docs/pages/x/api/date-pickers/types.multi-input-time-range-field.ts
new file mode 100644
index 0000000000000..dc96ed625af2e
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-input-time-range-field.ts
@@ -0,0 +1,4 @@
+import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMultiInputTimeRangeField = createTypes(import.meta.url, MultiInputTimeRangeField);
diff --git a/docs/pages/x/api/date-pickers/types.multi-section-digital-clock.md b/docs/pages/x/api/date-pickers/types.multi-section-digital-clock.md
new file mode 100644
index 0000000000000..cdf97825887cd
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-section-digital-clock.md
@@ -0,0 +1,315 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.multi-section-digital-clock.md'
+
+## API Reference
+
+### getMultiSectionDigitalClockUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### MultiSectionDigitalClock
+
+Demos:
+
+- [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+- [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/)
+
+API:
+
+- [MultiSectionDigitalClock API](https://mui.com/x/api/date-pickers/multi-section-digital-clock/)
+
+**MultiSectionDigitalClock Props:**
+
+| Prop                                     | Type                                                                                                 | Default                                                                                              | Description                                                                                                                                                                                                                        |
+| :--------------------------------------- | :--------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `any \| null`                                                                                        | -                                                                                                    | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                         |
+| value                                    | `any \| null`                                                                                        | -                                                                                                    | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                     |
+| ampm                                     | `boolean`                                                                                            | `adapter.is12HourCycleInCurrentLocale()`                                                             | 12h/24h view for hour selection clock.                                                                                                                                                                                             |
+| classes                                  | `Partial<MultiSectionDigitalClockClasses>`                                                           | -                                                                                                    | Override or extend the styles applied to the component.                                                                                                                                                                            |
+| disableFuture                            | `boolean`                                                                                            | `false`                                                                                              | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                  |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                            | `false`                                                                                              | Do not ignore date part when validating min/max time.                                                                                                                                                                              |
+| disablePast                              | `boolean`                                                                                            | `false`                                                                                              | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                 |
+| focusedView                              | `TimeViewWithMeridiem \| null`                                                                       | -                                                                                                    | Controlled focused view.                                                                                                                                                                                                           |
+| maxTime                                  | `any`                                                                                                | -                                                                                                    | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minTime                                  | `any`                                                                                                | -                                                                                                    | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minutesStep                              | `number`                                                                                             | `1`                                                                                                  | Step over minutes.                                                                                                                                                                                                                 |
+| onChange                                 | `((value: any, selectionState?: PickerSelectionState, selectedView?: TimeViewWithMeridiem) => void)` | -                                                                                                    | Callback fired when the value changes.                                                                                                                                                                                             |
+| onFocusedViewChange                      | `((view: TimeViewWithMeridiem, hasFocus: boolean) => void)`                                          | -                                                                                                    | Callback fired on focused view change.                                                                                                                                                                                             |
+| onViewChange                             | `((view: TimeViewWithMeridiem) => void)`                                                             | -                                                                                                    | Callback fired on view change.                                                                                                                                                                                                     |
+| openTo                                   | `TimeViewWithMeridiem`                                                                               | -                                                                                                    | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                        |
+| referenceDate                            | `any`                                                                                                | ``The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.`` | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                            |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                          | -                                                                                                    | Disable specific time.                                                                                                                                                                                                             |
+| skipDisabled                             | `boolean`                                                                                            | `false`                                                                                              | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                      |
+| slotProps                                | `MultiSectionDigitalClockSlotProps`                                                                  | `{}`                                                                                                 | The props used for each component slot.                                                                                                                                                                                            |
+| slots                                    | `MultiSectionDigitalClockSlots`                                                                      | `{}`                                                                                                 | Overrideable component slots.                                                                                                                                                                                                      |
+| sx                                       | `SxProps<Theme>`                                                                                     | -                                                                                                    | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                            |
+| timeSteps                                | `TimeStepOptions`                                                                                    | `{ hours: 1, minutes: 5, seconds: 5 }`                                                               | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.                                                             |
+| timezone                                 | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``              | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.     |
+| view                                     | `TimeViewWithMeridiem`                                                                               | -                                                                                                    | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                    |
+| views                                    | `TimeViewWithMeridiem[]`                                                                             | `['hours', 'minutes']`                                                                               | Available views.                                                                                                                                                                                                                   |
+| autoFocus                                | `boolean`                                                                                            | -                                                                                                    | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered. |
+| disabled                                 | `boolean`                                                                                            | `false`                                                                                              | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                               |
+| readOnly                                 | `boolean`                                                                                            | `false`                                                                                              | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                               |
+| className                                | `string`                                                                                             | -                                                                                                    | -                                                                                                                                                                                                                                  |
+
+## Additional Types
+
+### ExportedMultiSectionDigitalClockSectionProps
+
+```typescript
+type ExportedMultiSectionDigitalClockSectionProps = {
+  className?: string;
+  classes?: Partial<MultiSectionDigitalClockSectionClasses>;
+  slots?: MultiSectionDigitalClockSlots;
+  slotProps?: MultiSectionDigitalClockSlotProps;
+};
+```
+
+### multiSectionDigitalClockClasses
+
+```typescript
+type multiSectionDigitalClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### MultiSectionDigitalClockClasses
+
+```typescript
+type MultiSectionDigitalClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+};
+```
+
+### MultiSectionDigitalClockClassKey
+
+```typescript
+type MultiSectionDigitalClockClassKey = 'root';
+```
+
+### MultiSectionDigitalClockProps
+
+```typescript
+type MultiSectionDigitalClockProps = {
+  /**
+   * Available views.
+   * @default ['hours', 'minutes']
+   */
+  views?: TimeViewWithMeridiem[];
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<MultiSectionDigitalClockClasses>;
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots?: MultiSectionDigitalClockSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiSectionDigitalClockSlotProps;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
+   */
+  referenceDate?: any;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The view type. Will be one of date or time views.
+   */
+  onChange?: (
+    value: any,
+    selectionState?: PickerSelectionState,
+    selectedView?: TimeViewWithMeridiem,
+  ) => void;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeViewWithMeridiem;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  /** Controlled focused view. */
+  focusedView?: TimeViewWithMeridiem | null;
+  /**
+   * Callback fired on focused view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onFocusedViewChange?: (view: TimeViewWithMeridiem, hasFocus: boolean) => void;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+### multiSectionDigitalClockSectionClasses
+
+```typescript
+type multiSectionDigitalClockSectionClasses = {
+  /** Styles applied to the root (list) element. */
+  root: string;
+  /** Styles applied to the list item (by default: MenuItem) element. */
+  item: string;
+};
+```
+
+### MultiSectionDigitalClockSectionClasses
+
+```typescript
+type MultiSectionDigitalClockSectionClasses = {
+  /** Styles applied to the root (list) element. */
+  root: string;
+  /** Styles applied to the list item (by default: MenuItem) element. */
+  item: string;
+};
+```
+
+### MultiSectionDigitalClockSectionClassKey
+
+```typescript
+type MultiSectionDigitalClockSectionClassKey = 'root' | 'item';
+```
+
+### MultiSectionDigitalClockSlotProps
+
+```typescript
+type MultiSectionDigitalClockSlotProps = {
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+};
+```
+
+### MultiSectionDigitalClockSlots
+
+```typescript
+type MultiSectionDigitalClockSlots = {
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.multi-section-digital-clock.ts b/docs/pages/x/api/date-pickers/types.multi-section-digital-clock.ts
new file mode 100644
index 0000000000000..0f3cb7e6a09a2
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.multi-section-digital-clock.ts
@@ -0,0 +1,4 @@
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesMultiSectionDigitalClock = createTypes(import.meta.url, MultiSectionDigitalClock);
diff --git a/docs/pages/x/api/date-pickers/types.picker-day.md b/docs/pages/x/api/date-pickers/types.picker-day.md
new file mode 100644
index 0000000000000..8cf9b78d8b97f
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.picker-day.md
@@ -0,0 +1,216 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.picker-day.md'
+
+## API Reference
+
+### getPickerDayUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PickerDay
+
+Demos:
+
+- [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+
+API:
+
+- [PickerDay API](https://mui.com/x/api/date-pickers/picker-day/)
+
+**PickerDay Props:**
+
+| Prop                        | Type                                                                           | Default    | Description                                                                                                                                                                                                                                                                                           |
+| :-------------------------- | :----------------------------------------------------------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onClick                     | `((event: MuiEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void)` | `() => {}` | Callback fired when the component is clicked.                                                                                                                                                                                                                                                         |
+| classes                     | `Partial<PickerDayClasses>`                                                    | -          | Override or extend the styles applied to the component.                                                                                                                                                                                                                                               |
+| day\*                       | `any`                                                                          | -          | The date to show.                                                                                                                                                                                                                                                                                     |
+| disableHighlightToday       | `boolean`                                                                      | `false`    | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                            |
+| isAnimating                 | `boolean`                                                                      | `false`    | If `true`, the day is being animated.                                                                                                                                                                                                                                                                 |
+| isDayFillerCell             | `boolean`                                                                      | `false`    | If `true`, the day is a filler day (its content is hidden).                                                                                                                                                                                                                                           |
+| isFirstVisibleCell          | `boolean`                                                                      | `false`    | If `true`, the day is the first visible cell of the month.                                                                                                                                                                                                                                            |
+| isLastVisibleCell           | `boolean`                                                                      | `false`    | If `true`, the day is the last visible cell of the month.                                                                                                                                                                                                                                             |
+| isVisuallySelected          | `boolean`                                                                      | -          | Indicates if the day should be visually selected.                                                                                                                                                                                                                                                     |
+| onBlur                      | `((event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void)`    | `() => {}` | Callback fired when the component is blurred.                                                                                                                                                                                                                                                         |
+| onDaySelect\*               | `((day: any) => void)`                                                         | -          | Callback fired when the day is selected.                                                                                                                                                                                                                                                              |
+| onFocus                     | `((event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void)`    | `() => {}` | Callback fired when the component is focused.                                                                                                                                                                                                                                                         |
+| onKeyDown                   | `((event: React.KeyboardEvent<HTMLButtonElement>, day: any) => void)`          | `() => {}` | Callback fired when a key is pressed.                                                                                                                                                                                                                                                                 |
+| onMouseDown                 | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)`           | `() => {}` | Callback fired when the mouse button is pressed.                                                                                                                                                                                                                                                      |
+| onMouseEnter                | `((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, day: any) => void)` | `() => {}` | Callback fired when the mouse enters the component.                                                                                                                                                                                                                                                   |
+| outsideCurrentMonth         | `boolean`                                                                      | `false`    | If `true`, the day is outside the current month.                                                                                                                                                                                                                                                      |
+| selected                    | `boolean`                                                                      | `false`    | If `true`, renders as selected.                                                                                                                                                                                                                                                                       |
+| showDaysOutsideCurrentMonth | `boolean`                                                                      | `false`    | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers. |
+| today                       | `boolean`                                                                      | `false`    | If `true`, today's day is highlighted.                                                                                                                                                                                                                                                                |
+| disabled                    | `boolean`                                                                      | `false`    | If `true`, the day is disabled.                                                                                                                                                                                                                                                                       |
+
+## Additional Types
+
+### pickerDayClasses
+
+```typescript
+type pickerDayClasses = Record<
+  'disabled' | 'root' | 'dayOutsideMonth' | 'fillerCell' | 'today' | 'selected',
+  string
+>;
+```
+
+### PickerDayClassKey
+
+```typescript
+type PickerDayClassKey =
+  | 'disabled'
+  | 'root'
+  | 'dayOutsideMonth'
+  | 'fillerCell'
+  | 'today'
+  | 'selected';
+```
+
+### PickerDayOwnerState
+
+```typescript
+type PickerDayOwnerState = {
+  /** Whether the day is a filler day (its content is hidden). */
+  isDayFillerCell?: boolean;
+  /** Whether the day is the first visible cell of the month it's being rendered in. */
+  isDayFirstVisibleCell?: boolean;
+  /** Whether the day is the last visible cell of the month it's being rendered in. */
+  isDayLastVisibleCell?: boolean;
+  day: any;
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  isDayCurrent: boolean;
+  isDayOutsideMonth: boolean;
+  isDayStartOfWeek: boolean;
+  isDayEndOfWeek: boolean;
+  disableHighlightToday: boolean;
+  showDaysOutsideCurrentMonth: boolean;
+};
+```
+
+### PickerDayOwnerStateBase
+
+```typescript
+type PickerDayOwnerStateBase = {
+  day: any;
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  isDayCurrent: boolean;
+  isDayOutsideMonth: boolean;
+  isDayStartOfWeek: boolean;
+  isDayEndOfWeek: boolean;
+  disableHighlightToday: boolean;
+  showDaysOutsideCurrentMonth: boolean;
+};
+```
+
+### PickerDayProps
+
+```typescript
+type PickerDayProps = {
+  /** The date to show. */
+  day: any;
+  /**
+   * If `true`, renders as selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * If `true`, the day is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, today's day is highlighted.
+   * @default false
+   */
+  today?: boolean;
+  /**
+   * If `true`, the day is outside the current month.
+   * @default false
+   */
+  outsideCurrentMonth?: boolean;
+  /**
+   * If `true`, the day is the first visible cell of the month.
+   * @default false
+   */
+  isFirstVisibleCell?: boolean;
+  /**
+   * If `true`, the day is the last visible cell of the month.
+   * @default false
+   */
+  isLastVisibleCell?: boolean;
+  /**
+   * If `true`, the day is being animated.
+   * @default false
+   */
+  isAnimating?: boolean;
+  /** Callback fired when the day is selected. */
+  onDaySelect: (day: any) => void;
+  /**
+   * Callback fired when a key is pressed.
+   * @default () => {}
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, day: any) => void;
+  /**
+   * Callback fired when the component is focused.
+   * @default () => {}
+   */
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void;
+  /**
+   * Callback fired when the component is blurred.
+   * @default () => {}
+   */
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement, Element>, day: any) => void;
+  /**
+   * Callback fired when the mouse enters the component.
+   * @default () => {}
+   */
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, day: any) => void;
+  /**
+   * Callback fired when the component is clicked.
+   * @default () => {}
+   */
+  onClick?: (event: MuiEvent<React.MouseEvent<HTMLButtonElement, MouseEvent>>) => void;
+  /**
+   * Callback fired when the mouse button is pressed.
+   * @default () => {}
+   */
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickerDayClasses>;
+  /** Indicates if the day should be visually selected. */
+  isVisuallySelected?: boolean;
+  /**
+   * If `true`, the day is a filler day (its content is hidden).
+   * @default false
+   */
+  isDayFillerCell?: boolean;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.picker-day.ts b/docs/pages/x/api/date-pickers/types.picker-day.ts
new file mode 100644
index 0000000000000..f763ec3c48057
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.picker-day.ts
@@ -0,0 +1,4 @@
+import { PickerDay } from '@mui/x-date-pickers/PickerDay';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickerDay = createTypes(import.meta.url, PickerDay);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-action-bar.md b/docs/pages/x/api/date-pickers/types.pickers-action-bar.md
new file mode 100644
index 0000000000000..728688569a022
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-action-bar.md
@@ -0,0 +1,35 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-action-bar.md'
+
+## API Reference
+
+### PickersActionBar
+
+**PickersActionBar Props:**
+
+| Prop    | Type                       | Default                                                                                                                     | Description                                                                          |
+| :------ | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- |
+| actions | `PickersActionBarAction[]` | ``- `[]` for Pickers with one selection step which `closeOnSelect`. - `['cancel', 'nextOrAccept']` for all other Pickers.`` | Ordered array of actions to display.&#xA;If empty, does not display that action bar. |
+
+## Additional Types
+
+### PickersActionBarAction
+
+```typescript
+type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today' | 'next' | 'nextOrAccept';
+```
+
+### PickersActionBarProps
+
+```typescript
+type PickersActionBarProps = {
+  /**
+ * Ordered array of actions to display.
+ * If empty, does not display that action bar.
+ * @default - `[]` for Pickers with one selection step which `closeOnSelect`.
+- `['cancel', 'nextOrAccept']` for all other Pickers.
+ */
+  actions?: PickersActionBarAction[];
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-action-bar.ts b/docs/pages/x/api/date-pickers/types.pickers-action-bar.ts
new file mode 100644
index 0000000000000..623d5f26150dc
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-action-bar.ts
@@ -0,0 +1,4 @@
+import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersActionBar = createTypes(import.meta.url, PickersActionBar);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-calendar-header.md b/docs/pages/x/api/date-pickers/types.pickers-calendar-header.md
new file mode 100644
index 0000000000000..ab0004416ea7a
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-calendar-header.md
@@ -0,0 +1,293 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-calendar-header.md'
+
+## API Reference
+
+### PickersCalendarHeader
+
+Demos:
+
+- [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+- [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
+- [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
+
+**PickersCalendarHeader Props:**
+
+| Prop               | Type                                    | Default                                                  | Description                                                                                                                      |
+| :----------------- | :-------------------------------------- | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
+| classes            | `Partial<PickersCalendarHeaderClasses>` | -                                                        | Override or extend the styles applied to the component.                                                                          |
+| currentMonth\*     | `any`                                   | -                                                        | -                                                                                                                                |
+| disableFuture      | `boolean`                               | -                                                        | -                                                                                                                                |
+| disablePast        | `boolean`                               | -                                                        | -                                                                                                                                |
+| labelId            | `string`                                | -                                                        | Id of the calendar text element.&#xA;It is used to establish an `aria-labelledby` relationship with the calendar `grid` element. |
+| maxDate\*          | `any`                                   | -                                                        | -                                                                                                                                |
+| minDate\*          | `any`                                   | -                                                        | -                                                                                                                                |
+| onMonthChange\*    | `((date: any) => void)`                 | -                                                        | -                                                                                                                                |
+| onViewChange       | `((view: DateView) => void)`            | -                                                        | -                                                                                                                                |
+| reduceAnimations\* | `boolean`                               | -                                                        | -                                                                                                                                |
+| slotProps          | `PickersCalendarHeaderSlotProps`        | `{}`                                                     | The props used for each component slot.                                                                                          |
+| slots              | `PickersCalendarHeaderSlots`            | `{}`                                                     | Overridable component slots.                                                                                                     |
+| sx                 | `SxProps<Theme>`                        | -                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                          |
+| timezone\*         | `string`                                | -                                                        | -                                                                                                                                |
+| view\*             | `DateView`                              | -                                                        | -                                                                                                                                |
+| views\*            | `DateView[]`                            | -                                                        | -                                                                                                                                |
+| format             | `string`                                | `` `${adapter.formats.month} ${adapter.formats.year}` `` | Format used to display the date.                                                                                                 |
+| disabled           | `boolean`                               | -                                                        | -                                                                                                                                |
+| className          | `string`                                | -                                                        | -                                                                                                                                |
+
+## Additional Types
+
+### ExportedPickersCalendarHeaderProps
+
+```typescript
+type ExportedPickersCalendarHeaderProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersCalendarHeaderClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersCalendarHeaderSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersCalendarHeaderSlotProps;
+};
+```
+
+### pickersCalendarHeaderClasses
+
+```typescript
+type pickersCalendarHeaderClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label container element. */
+  labelContainer: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the switch view button element. */
+  switchViewButton: string;
+  /** Styles applied to the switch view icon element. */
+  switchViewIcon: string;
+};
+```
+
+### PickersCalendarHeaderClasses
+
+```typescript
+type PickersCalendarHeaderClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the label container element. */
+  labelContainer: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the switch view button element. */
+  switchViewButton: string;
+  /** Styles applied to the switch view icon element. */
+  switchViewIcon: string;
+};
+```
+
+### PickersCalendarHeaderClassKey
+
+```typescript
+type PickersCalendarHeaderClassKey =
+  | 'root'
+  | 'labelContainer'
+  | 'label'
+  | 'switchViewButton'
+  | 'switchViewIcon';
+```
+
+### PickersCalendarHeaderProps
+
+```typescript
+type PickersCalendarHeaderProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersCalendarHeaderSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersCalendarHeaderSlotProps;
+  currentMonth: any;
+  disabled?: boolean;
+  views: DateView[];
+  onMonthChange: (date: any) => void;
+  view: DateView;
+  reduceAnimations: boolean;
+  onViewChange?: (view: DateView) => void;
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
+  labelId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersCalendarHeaderClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format?: string;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  minDate: any;
+  maxDate: any;
+  timezone: string;
+};
+```
+
+### PickersCalendarHeaderSlotProps
+
+```typescript
+type PickersCalendarHeaderSlotProps = {
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+};
+```
+
+### PickersCalendarHeaderSlots
+
+```typescript
+type PickersCalendarHeaderSlots = {
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+};
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-calendar-header.ts b/docs/pages/x/api/date-pickers/types.pickers-calendar-header.ts
new file mode 100644
index 0000000000000..77ff5e0e9cc38
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-calendar-header.ts
@@ -0,0 +1,4 @@
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersCalendarHeader = createTypes(import.meta.url, PickersCalendarHeader);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-layout.md b/docs/pages/x/api/date-pickers/types.pickers-layout.md
new file mode 100644
index 0000000000000..48bb4ba92cb0f
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-layout.md
@@ -0,0 +1,1361 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-layout.md'
+
+## API Reference
+
+### PickersLayout
+
+Demos:
+
+- [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
+
+API:
+
+- [PickersLayout API](https://mui.com/x/api/date-pickers/pickers-layout/)
+
+**PickersLayout Props:**
+
+| Prop      | Type                              | Default | Description                                                                             |
+| :-------- | :-------------------------------- | :------ | :-------------------------------------------------------------------------------------- |
+| classes   | `Partial<PickersLayoutClasses>`   | -       | Override or extend the styles applied to the component.                                 |
+| slotProps | `PickersLayoutSlotProps<unknown>` | `{}`    | The props used for each component slot.                                                 |
+| slots     | `PickersLayoutSlots<unknown>`     | `{}`    | Overridable component slots.                                                            |
+| sx        | `SxProps<Theme>`                  | -       | The system prop that allows defining system overrides as well as additional CSS styles. |
+| children  | `React.ReactNode`                 | -       | -                                                                                       |
+| className | `string`                          | -       | -                                                                                       |
+
+### usePickerLayout
+
+**usePickerLayout Parameters:**
+
+| Parameter | Type                          | Default | Description |
+| :-------- | :---------------------------- | :------ | :---------- |
+| props     | `PickersLayoutProps<unknown>` | -       | -           |
+
+**usePickerLayout Return Value:**
+
+```tsx
+type ReturnValue = UsePickerLayoutResponse<unknown>;
+```
+
+## Additional Types
+
+### ExportedPickersLayoutSlotProps
+
+```typescript
+type ExportedPickersLayoutSlotProps<TValue extends unknown> = {
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<TValue>>;
+};
+```
+
+### ExportedPickersLayoutSlots
+
+```typescript
+type ExportedPickersLayoutSlots<TValue extends unknown> = {
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<TValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+### PickerLayoutOwnerState
+
+```typescript
+type PickerLayoutOwnerState = {
+  /**
+   * The direction of the layout.
+   * Is equal to "ltr" when the layout is in left-to-right direction.
+   * Is equal to "rtl" when the layout is in right-to-left direction.
+   */
+  layoutDirection: 'ltr' | 'rtl';
+  /**
+   * Whether the layout should display the shortcuts panel or not.
+   * This flag is used to adjust the layout accordingly.
+   */
+  hasShortcuts: boolean;
+  /**
+   * `true` if the value of the Picker is currently empty.
+   * Is always `false` if the component you are accessing the ownerState from is not wrapped with a Picker.
+   */
+  isPickerValueEmpty: boolean;
+  /**
+   * `true` if the Picker is open, `false` otherwise.
+   * Is always `false` if the component you are accessing the ownerState from is not wrapped with a Picker.
+   */
+  isPickerOpen: boolean;
+  /**
+   * `true` if the Picker is disabled, `false` otherwise.
+   * Is always `false` if the component you are accessing the ownerState from is not wrapped with a Picker.
+   */
+  isPickerDisabled: boolean;
+  /**
+   * `true` if the Picker is read-only, `false` otherwise.
+   * Is always `false` if the component you are accessing the ownerState from is not wrapped with a Picker.
+   */
+  isPickerReadOnly: boolean;
+  /**
+   * The responsive variant of the Picker.
+   * Is equal to "desktop" when using a desktop Picker (like <DesktopDatePicker />).
+   * Is equal to "mobile" when using a mobile Picker (like <MobileDatePicker />).
+   * Is equal to "mobile" or "desktop" when using a responsive Picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+   * Is equal to "mobile" or "desktop" when using a static Picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+   * Is always equal to "desktop" if the component you are accessing the ownerState from is not wrapped with a Picker.
+   */
+  pickerVariant: PickerVariant;
+  /**
+   * The orientation of the Picker.
+   * Is equal to "landscape" when the Picker is in landscape orientation.
+   * Is equal to "portrait" when the Picker is in portrait orientation.
+   * You can use the "orientation" on any Picker component to force the orientation.
+   * Is always equal to "portrait" if the component you are accessing the ownerState from is not wrapped with a Picker.
+   */
+  pickerOrientation: PickerOrientation;
+};
+```
+
+### pickersLayoutClasses
+
+```typescript
+type pickersLayoutClasses = Record<
+  'root' | 'landscape' | 'contentWrapper' | 'toolbar' | 'actionBar' | 'tabs' | 'shortcuts',
+  string
+>;
+```
+
+### PickersLayoutClassKey
+
+```typescript
+type PickersLayoutClassKey =
+  | 'root'
+  | 'landscape'
+  | 'contentWrapper'
+  | 'toolbar'
+  | 'actionBar'
+  | 'tabs'
+  | 'shortcuts';
+```
+
+### PickersLayoutContentWrapper
+
+```typescript
+type PickersLayoutContentWrapper = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: PickerLayoutOwnerState },
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'color'
+    | 'content'
+    | 'translate'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'ref'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### PickersLayoutProps
+
+```typescript
+type PickersLayoutProps<TValue extends unknown> = {
+  className?: string;
+  children?: React.ReactNode;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersLayoutClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersLayoutSlots<TValue>;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersLayoutSlotProps<TValue>;
+};
+```
+
+### PickersLayoutRoot
+
+```typescript
+type PickersLayoutRoot = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: PickerLayoutOwnerState },
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'color'
+    | 'content'
+    | 'translate'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'ref'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### PickersLayoutSlotProps
+
+```typescript
+type PickersLayoutSlotProps<TValue extends unknown> = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedBaseTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedBaseToolbarProps;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<TValue>>;
+};
+```
+
+### PickersLayoutSlots
+
+```typescript
+type PickersLayoutSlots<TValue extends unknown> = {
+  /** Tabs enabling toggling between views. */
+  tabs?: React.ElementType<
+    {},
+    | 'symbol'
+    | 'object'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the toolbar.
+   * It is placed above the Picker views.
+   */
+  toolbar?: React.JSXElementConstructor<BaseToolbarProps>;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<TValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<TValue> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-layout.ts b/docs/pages/x/api/date-pickers/types.pickers-layout.ts
new file mode 100644
index 0000000000000..95054a7068f9f
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-layout.ts
@@ -0,0 +1,4 @@
+import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersLayout = createTypes(import.meta.url, PickersLayout);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-range-calendar-header.md b/docs/pages/x/api/date-pickers/types.pickers-range-calendar-header.md
new file mode 100644
index 0000000000000..504f23ecd4b2a
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-range-calendar-header.md
@@ -0,0 +1,247 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-range-calendar-header.md'
+
+## API Reference
+
+### PickersRangeCalendarHeader
+
+**PickersRangeCalendarHeader Props:**
+
+| Prop               | Type                                    | Default                                                  | Description                                                                                                                      |
+| :----------------- | :-------------------------------------- | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
+| calendars\*        | `1 \| 2 \| 3`                           | -                                                        | The number of calendars rendered.                                                                                                |
+| classes            | `Partial<PickersCalendarHeaderClasses>` | -                                                        | Override or extend the styles applied to the component.                                                                          |
+| currentMonth\*     | `any`                                   | -                                                        | -                                                                                                                                |
+| disableFuture      | `boolean`                               | -                                                        | -                                                                                                                                |
+| disablePast        | `boolean`                               | -                                                        | -                                                                                                                                |
+| labelId            | `string`                                | -                                                        | Id of the calendar text element.&#xA;It is used to establish an `aria-labelledby` relationship with the calendar `grid` element. |
+| maxDate\*          | `any`                                   | -                                                        | -                                                                                                                                |
+| minDate\*          | `any`                                   | -                                                        | -                                                                                                                                |
+| month\*            | `any`                                   | -                                                        | Month used for this header.                                                                                                      |
+| monthIndex\*       | `number`                                | -                                                        | Index of the month used for this header.                                                                                         |
+| onMonthChange\*    | `((date: any) => void)`                 | -                                                        | -                                                                                                                                |
+| onViewChange       | `((view: DateView) => void)`            | -                                                        | -                                                                                                                                |
+| reduceAnimations\* | `boolean`                               | -                                                        | -                                                                                                                                |
+| slotProps          | `PickersCalendarHeaderSlotProps`        | `{}`                                                     | The props used for each component slot.                                                                                          |
+| slots              | `PickersCalendarHeaderSlots`            | `{}`                                                     | Overridable component slots.                                                                                                     |
+| sx                 | `SxProps<Theme>`                        | -                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                          |
+| timezone\*         | `string`                                | -                                                        | -                                                                                                                                |
+| view\*             | `DateView`                              | -                                                        | -                                                                                                                                |
+| views\*            | `DateView[]`                            | -                                                        | -                                                                                                                                |
+| format             | `string`                                | `` `${adapter.formats.month} ${adapter.formats.year}` `` | Format used to display the date.                                                                                                 |
+| disabled           | `boolean`                               | -                                                        | -                                                                                                                                |
+| className          | `string`                                | -                                                        | -                                                                                                                                |
+
+## Additional Types
+
+### ExportedPickersRangeCalendarHeaderProps
+
+```typescript
+type ExportedPickersRangeCalendarHeaderProps = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersCalendarHeaderClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersCalendarHeaderSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersCalendarHeaderSlotProps;
+};
+```
+
+### PickersRangeCalendarHeaderProps
+
+```typescript
+type PickersRangeCalendarHeaderProps = {
+  /** The number of calendars rendered. */
+  calendars: 1 | 2 | 3;
+  /** Month used for this header. */
+  month: any;
+  /** Index of the month used for this header. */
+  monthIndex: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersCalendarHeaderSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersCalendarHeaderSlotProps;
+  currentMonth: any;
+  disabled?: boolean;
+  views: DateView[];
+  onMonthChange: (date: any) => void;
+  view: DateView;
+  reduceAnimations: boolean;
+  onViewChange?: (view: DateView) => void;
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
+  labelId?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersCalendarHeaderClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format?: string;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  minDate: any;
+  maxDate: any;
+  timezone: string;
+};
+```
+
+### PickersRangeCalendarHeaderSlotProps
+
+```typescript
+type PickersRangeCalendarHeaderSlotProps = {
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+};
+```
+
+### PickersRangeCalendarHeaderSlots
+
+```typescript
+type PickersRangeCalendarHeaderSlots = {
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+};
+```
+
+## External Types
+
+### DateView
+
+```typescript
+type DateView = 'year' | 'month' | 'day';
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-range-calendar-header.ts b/docs/pages/x/api/date-pickers/types.pickers-range-calendar-header.ts
new file mode 100644
index 0000000000000..d78b38cf5d8ad
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-range-calendar-header.ts
@@ -0,0 +1,4 @@
+import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro/PickersRangeCalendarHeader';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersRangeCalendarHeader = createTypes(import.meta.url, PickersRangeCalendarHeader);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-section-list.md b/docs/pages/x/api/date-pickers/types.pickers-section-list.md
new file mode 100644
index 0000000000000..b89a57a41abdf
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-section-list.md
@@ -0,0 +1,1325 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-section-list.md'
+
+## API Reference
+
+### getPickersSectionListUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### Unstable_PickersSectionList
+
+Demos:
+
+- [Custom field](https://mui.com/x/react-date-pickers/custom-field/)
+
+API:
+
+- [Unstable_PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
+
+**Unstable_PickersSectionList Props:**
+
+| Prop              | Type                                 | Default | Description                                                                                |
+| :---------------- | :----------------------------------- | :------ | :----------------------------------------------------------------------------------------- |
+| classes           | `Partial<PickersSectionListClasses>` | -       | Override or extend the styles applied to the component.                                    |
+| contentEditable\* | `boolean`                            | -       | If true, the whole element is editable.&#xA;Useful when all the sections are selected.     |
+| elements\*        | `PickersSectionElement[]`            | -       | The elements to render.&#xA;Each element contains the prop to edit a section of the value. |
+| sectionListRef\*  | `React.Ref<PickersSectionListRef>`   | -       | -                                                                                          |
+| slotProps         | `PickersSectionListSlotProps`        | -       | The props used for each component slot.                                                    |
+| slots             | `PickersSectionListSlots`            | -       | Overridable component slots.                                                               |
+
+## Additional Types
+
+### ExportedPickersSectionListProps
+
+```typescript
+type ExportedPickersSectionListProps = {
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+};
+```
+
+### PickersSectionElement
+
+```typescript
+type PickersSectionElement = {
+  container: React.HTMLAttributes<HTMLSpanElement>;
+  content: React.HTMLAttributes<HTMLSpanElement> & { 'data-range-position': string | undefined };
+  before: React.HTMLAttributes<HTMLSpanElement>;
+  after: React.HTMLAttributes<HTMLSpanElement>;
+};
+```
+
+### pickersSectionListClasses
+
+```typescript
+type pickersSectionListClasses = Record<'section' | 'root' | 'sectionContent', string>;
+```
+
+### PickersSectionListClasses
+
+```typescript
+type PickersSectionListClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container of a section. */
+  section: string;
+  /** Styles applied to the content of a section. */
+  sectionContent: string;
+};
+```
+
+### PickersSectionListClassKey
+
+```typescript
+type PickersSectionListClassKey = 'section' | 'root' | 'sectionContent';
+```
+
+### PickersSectionListProps
+
+```typescript
+type PickersSectionListProps = {
+  /** Overridable component slots. */
+  slots?: PickersSectionListSlots;
+  /** The props used for each component slot. */
+  slotProps?: PickersSectionListSlotProps;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<PickersSectionListClasses>;
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+};
+```
+
+### PickersSectionListRef
+
+```typescript
+type PickersSectionListRef = {
+  getRoot: () => HTMLElement;
+  getSectionContainer: (sectionIndex: number) => HTMLElement;
+  getSectionContent: (sectionIndex: number) => HTMLElement;
+  getSectionIndexFromDOMElement: (element?: Element | null) => number | null;
+};
+```
+
+### PickersSectionListSlotProps
+
+```typescript
+type PickersSectionListSlotProps = {
+  root?: SlotComponentProps<'div', {}, PickerOwnerState>;
+  section?: SlotComponentProps<'span', {}, PickerOwnerState>;
+  sectionSeparator?: SlotComponentProps<'span', {}, PickerSectionSeparatorOwnerState>;
+  sectionContent?: SlotComponentProps<'span', {}, PickerOwnerState>;
+};
+```
+
+### PickersSectionListSlots
+
+```typescript
+type PickersSectionListSlots = {
+  root: React.ElementType;
+  section: React.ElementType;
+  sectionSeparator: React.ElementType;
+  sectionContent: React.ElementType;
+};
+```
+
+### Unstable_PickersSectionListRoot
+
+```typescript
+type Unstable_PickersSectionListRoot = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'contentEditable'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'ref'
+    | 'key'
+  >,
+  {}
+>;
+```
+
+### Unstable_PickersSectionListSection
+
+```typescript
+type Unstable_PickersSectionListSection = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+    | 'ref'
+    | 'key'
+    | 'contentEditable'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### Unstable_PickersSectionListSectionContent
+
+```typescript
+type Unstable_PickersSectionListSectionContent = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+    | 'ref'
+    | 'key'
+    | 'contentEditable'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### Unstable_PickersSectionListSectionSeparator
+
+```typescript
+type Unstable_PickersSectionListSectionSeparator = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
+    | 'ref'
+    | 'key'
+    | 'contentEditable'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'id'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-section-list.ts b/docs/pages/x/api/date-pickers/types.pickers-section-list.ts
new file mode 100644
index 0000000000000..629be49cdaafd
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-section-list.ts
@@ -0,0 +1,4 @@
+import { PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersSectionList = createTypes(import.meta.url, PickersSectionList);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-shortcuts.md b/docs/pages/x/api/date-pickers/types.pickers-shortcuts.md
new file mode 100644
index 0000000000000..bc7815340f844
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-shortcuts.md
@@ -0,0 +1,71 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-shortcuts.md'
+
+## API Reference
+
+### PickersShortcuts
+
+Demos:
+
+- [Shortcuts](https://mui.com/x/react-date-pickers/shortcuts/)
+
+API:
+
+- [PickersShortcuts API](https://mui.com/x/api/date-pickers/pickers-shortcuts/)
+
+**PickersShortcuts Props:**
+
+| Prop             | Type                              | Default    | Description                                                                                                                                                                                            |
+| :--------------- | :-------------------------------- | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| changeImportance | `PickerChangeImportance`          | `"accept"` | Importance of the change when picking a shortcut: "accept": fires `onChange`, fires `onAccept` and closes the Picker."set": fires `onChange` but do not fire `onAccept` and does not close the Picker. |
+| items            | `PickersShortcutsItem<unknown>[]` | `[]`       | Ordered array of shortcuts to display.&#xA;If empty, does not display the shortcuts.                                                                                                                   |
+
+## Additional Types
+
+### PickersShortcutsItem
+
+```typescript
+type PickersShortcutsItem<TValue extends unknown> = {
+  label: string;
+  getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
+  /**
+   * Identifier of the shortcut.
+   * If provided, it will be used as the key of the shortcut.
+   */
+  id?: string;
+};
+```
+
+### PickersShortcutsItemContext
+
+```typescript
+type PickersShortcutsItemContext = {
+  label: string;
+  /**
+   * Identifier of the shortcut.
+   * If provided, it will be used as the key of the shortcut.
+   */
+  id?: string;
+};
+```
+
+### PickersShortcutsProps
+
+```typescript
+type PickersShortcutsProps<TValue extends unknown> = {
+  /**
+   * Ordered array of shortcuts to display.
+   * If empty, does not display the shortcuts.
+   * @default []
+   */
+  items?: PickersShortcutsItem<TValue>[];
+  /**
+   * Importance of the change when picking a shortcut:
+   * - "accept": fires `onChange`, fires `onAccept` and closes the Picker.
+   * - "set": fires `onChange` but do not fire `onAccept` and does not close the Picker.
+   * @default "accept"
+   */
+  changeImportance?: PickerChangeImportance;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-shortcuts.ts b/docs/pages/x/api/date-pickers/types.pickers-shortcuts.ts
new file mode 100644
index 0000000000000..c9b54dca10561
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-shortcuts.ts
@@ -0,0 +1,4 @@
+import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersShortcuts = createTypes(import.meta.url, PickersShortcuts);
diff --git a/docs/pages/x/api/date-pickers/types.pickers-text-field.md b/docs/pages/x/api/date-pickers/types.pickers-text-field.md
new file mode 100644
index 0000000000000..11ef8a3bdc371
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-text-field.md
@@ -0,0 +1,870 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.pickers-text-field.md'
+
+## API Reference
+
+### getPickersFilledInputUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getPickersInputBaseUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getPickersInputUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getPickersOutlinedInputUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### getPickersTextFieldUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### PickersTextField
+
+**PickersTextField Props:**
+
+| Prop                  | Type                                                                                                                                                         | Default      | Description                                                                                                                                                                       |
+| :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                  | `string`                                                                                                                                                     | -            | Name attribute of the `input` element.                                                                                                                                            |
+| label                 | `React.ReactNode`                                                                                                                                            | -            | The label content.                                                                                                                                                                |
+| value\*               | `string`                                                                                                                                                     | -            | -                                                                                                                                                                                 |
+| onClick\*             | `React.MouseEventHandler<HTMLDivElement>`                                                                                                                    | -            | -                                                                                                                                                                                 |
+| areAllSectionsEmpty\* | `boolean`                                                                                                                                                    | -            | Is `true` if the current values equals the empty value.&#xA;For a single item value, it means that `value === null`&#xA;For a range value, it means that `value === [null, null]` |
+| contentEditable\*     | `boolean`                                                                                                                                                    | -            | If true, the whole element is editable.&#xA;Useful when all the sections are selected.                                                                                            |
+| elements\*            | `PickersSectionElement[]`                                                                                                                                    | -            | The elements to render.&#xA;Each element contains the prop to edit a section of the value.                                                                                        |
+| endAdornment          | `React.ReactNode`                                                                                                                                            | -            | End `InputAdornment` for this component.                                                                                                                                          |
+| error\*               | `boolean`                                                                                                                                                    | `false`      | If `true`, the `input` will indicate an error.                                                                                                                                    |
+| fullWidth             | `boolean`                                                                                                                                                    | `false`      | If `true`, the input will take up the full width of its container.                                                                                                                |
+| helperText            | `React.ReactNode`                                                                                                                                            | -            | The helper text content.                                                                                                                                                          |
+| onBlur\*              | `React.FocusEventHandler<HTMLDivElement>`                                                                                                                    | -            | -                                                                                                                                                                                 |
+| onChange\*            | `React.ChangeEventHandler<HTMLInputElement, Element>`                                                                                                        | -            | -                                                                                                                                                                                 |
+| onFocus\*             | `React.FocusEventHandler<HTMLDivElement>`                                                                                                                    | -            | -                                                                                                                                                                                 |
+| onInput\*             | `React.FormEventHandler<HTMLDivElement>`                                                                                                                     | -            | -                                                                                                                                                                                 |
+| onKeyDown\*           | `React.EventHandler`                                                                                                                                         | -            | -                                                                                                                                                                                 |
+| onPaste\*             | `React.ClipboardEventHandler<HTMLDivElement>`                                                                                                                | -            | -                                                                                                                                                                                 |
+| sectionListRef\*      | `React.Ref<PickersSectionListRef>`                                                                                                                           | -            | -                                                                                                                                                                                 |
+| slotProps             | `PickersTextFieldSlotProps<PickersFilledInputProps> \| PickersTextFieldSlotProps<PickersOutlinedInputProps> \| PickersTextFieldSlotProps<PickersInputProps>` | `{}`         | The props used for each component slot.                                                                                                                                           |
+| slots                 | `PickersTextFieldSlots`                                                                                                                                      | `{}`         | The components used for each slot inside.                                                                                                                                         |
+| startAdornment        | `React.ReactNode`                                                                                                                                            | -            | Start `InputAdornment` for this component.                                                                                                                                        |
+| variant               | `'filled' \| 'outlined' \| 'standard'`                                                                                                                       | `'outlined'` | The variant to use.                                                                                                                                                               |
+| disabled\*            | `boolean`                                                                                                                                                    | -            | -                                                                                                                                                                                 |
+| readOnly              | `boolean`                                                                                                                                                    | -            | -                                                                                                                                                                                 |
+| inputRef              | `React.Ref<HTMLInputElement>`                                                                                                                                | -            | Pass a ref to the `input` element.                                                                                                                                                |
+| id                    | `string`                                                                                                                                                     | -            | The id of the `input` element.                                                                                                                                                    |
+
+## Additional Types
+
+### PickersFilledInput
+
+```typescript
+type PickersFilledInput = unknown;
+```
+
+### pickersFilledInputClasses
+
+```typescript
+type pickersFilledInputClasses = {};
+```
+
+### PickersFilledInputClasses
+
+```typescript
+type PickersFilledInputClasses = {
+  /** Styles applied to the root element unless `disableUnderline={true}`. */
+  underline: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if focused. */
+  focused: string;
+  /** State class applied to the root element if `disabled=true`. */
+  disabled: string;
+  /** State class applied to the root element if `readOnly=true`. */
+  readOnly: string;
+  /** State class applied to the root element if `error=true`. */
+  error: string;
+  /** State class applied to the root element if `size=small`. */
+  inputSizeSmall: string;
+  /** Styles applied to the NotchedOutline element. */
+  notchedOutline: string;
+  /** Styles applied to the real hidden input element. */
+  input: string;
+  /** Styles applied to the container of the sections. */
+  sectionsContainer: string;
+  /** Styles applied to the content of a section. */
+  sectionContent: string;
+  /** Styles applied to the separator before a section. */
+  sectionBefore: string;
+  /** Styles applied to the separator after a section. */
+  sectionAfter: string;
+  /** Styles applied to the root if there is a startAdornment present. */
+  adornedStart: string;
+  /** Styles applied to the root if there is an endAdornment present. */
+  adornedEnd: string;
+  /** Styles applied to the active section bar. */
+  activeBar: string;
+};
+```
+
+### PickersFilledInputClassKey
+
+```typescript
+type PickersFilledInputClassKey =
+  | 'disabled'
+  | 'error'
+  | 'focused'
+  | 'input'
+  | 'readOnly'
+  | 'root'
+  | 'underline'
+  | 'inputSizeSmall'
+  | 'notchedOutline'
+  | 'sectionsContainer'
+  | 'sectionContent'
+  | 'sectionBefore'
+  | 'sectionAfter'
+  | 'adornedStart'
+  | 'adornedEnd'
+  | 'activeBar';
+```
+
+### PickersFilledInputProps
+
+```typescript
+type PickersFilledInputProps = {
+  disableUnderline?: boolean;
+  hiddenLabel?: boolean;
+  ownerState?: PickerTextFieldOwnerState;
+  className?: string;
+  classes?: Record<string, string>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  margin?: 'dense' | 'none' | 'normal';
+  renderSuffix?: (state: {
+    disabled?: boolean;
+    error?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    margin?: 'dense' | 'none' | 'normal';
+    required?: boolean;
+    adornedStart?: boolean;
+  }) => React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: PickersInputBaseSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersInputBaseSlotProps;
+  'data-multi-input'?: string;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement, Element>;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  readOnly?: boolean;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+};
+```
+
+### PickersInput
+
+```typescript
+type PickersInput = unknown;
+```
+
+### PickersInputBase
+
+```typescript
+type PickersInputBase = unknown;
+```
+
+### pickersInputBaseClasses
+
+```typescript
+type pickersInputBaseClasses = Record<
+  | 'disabled'
+  | 'error'
+  | 'focused'
+  | 'input'
+  | 'readOnly'
+  | 'root'
+  | 'inputSizeSmall'
+  | 'notchedOutline'
+  | 'sectionsContainer'
+  | 'sectionContent'
+  | 'sectionBefore'
+  | 'sectionAfter'
+  | 'adornedStart'
+  | 'adornedEnd'
+  | 'activeBar',
+  string
+>;
+```
+
+### PickersInputBaseClasses
+
+```typescript
+type PickersInputBaseClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if focused. */
+  focused: string;
+  /** State class applied to the root element if `disabled=true`. */
+  disabled: string;
+  /** State class applied to the root element if `readOnly=true`. */
+  readOnly: string;
+  /** State class applied to the root element if `error=true`. */
+  error: string;
+  /** State class applied to the root element if `size=small`. */
+  inputSizeSmall: string;
+  /** Styles applied to the NotchedOutline element. */
+  notchedOutline: string;
+  /** Styles applied to the real hidden input element. */
+  input: string;
+  /** Styles applied to the container of the sections. */
+  sectionsContainer: string;
+  /** Styles applied to the content of a section. */
+  sectionContent: string;
+  /** Styles applied to the separator before a section. */
+  sectionBefore: string;
+  /** Styles applied to the separator after a section. */
+  sectionAfter: string;
+  /** Styles applied to the root if there is a startAdornment present. */
+  adornedStart: string;
+  /** Styles applied to the root if there is an endAdornment present. */
+  adornedEnd: string;
+  /** Styles applied to the active section bar. */
+  activeBar: string;
+};
+```
+
+### PickersInputBaseClassKey
+
+```typescript
+type PickersInputBaseClassKey =
+  | 'disabled'
+  | 'error'
+  | 'focused'
+  | 'input'
+  | 'readOnly'
+  | 'root'
+  | 'inputSizeSmall'
+  | 'notchedOutline'
+  | 'sectionsContainer'
+  | 'sectionContent'
+  | 'sectionBefore'
+  | 'sectionAfter'
+  | 'adornedStart'
+  | 'adornedEnd'
+  | 'activeBar';
+```
+
+### PickersInputBaseProps
+
+```typescript
+type PickersInputBaseProps = {
+  ownerState?: PickerTextFieldOwnerState;
+  className?: string;
+  classes?: Record<string, string>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  margin?: 'dense' | 'none' | 'normal';
+  renderSuffix?: (state: {
+    disabled?: boolean;
+    error?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    margin?: 'dense' | 'none' | 'normal';
+    required?: boolean;
+    adornedStart?: boolean;
+  }) => React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: PickersInputBaseSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersInputBaseSlotProps;
+  'data-multi-input'?: string;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement, Element>;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  readOnly?: boolean;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+};
+```
+
+### pickersInputClasses
+
+```typescript
+type pickersInputClasses = {};
+```
+
+### PickersInputClasses
+
+```typescript
+type PickersInputClasses = {
+  /** Styles applied to the root element unless `disableUnderline={true}`. */
+  underline: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if focused. */
+  focused: string;
+  /** State class applied to the root element if `disabled=true`. */
+  disabled: string;
+  /** State class applied to the root element if `readOnly=true`. */
+  readOnly: string;
+  /** State class applied to the root element if `error=true`. */
+  error: string;
+  /** State class applied to the root element if `size=small`. */
+  inputSizeSmall: string;
+  /** Styles applied to the NotchedOutline element. */
+  notchedOutline: string;
+  /** Styles applied to the real hidden input element. */
+  input: string;
+  /** Styles applied to the container of the sections. */
+  sectionsContainer: string;
+  /** Styles applied to the content of a section. */
+  sectionContent: string;
+  /** Styles applied to the separator before a section. */
+  sectionBefore: string;
+  /** Styles applied to the separator after a section. */
+  sectionAfter: string;
+  /** Styles applied to the root if there is a startAdornment present. */
+  adornedStart: string;
+  /** Styles applied to the root if there is an endAdornment present. */
+  adornedEnd: string;
+  /** Styles applied to the active section bar. */
+  activeBar: string;
+};
+```
+
+### PickersInputClassKey
+
+```typescript
+type PickersInputClassKey =
+  | 'disabled'
+  | 'error'
+  | 'focused'
+  | 'input'
+  | 'readOnly'
+  | 'root'
+  | 'underline'
+  | 'inputSizeSmall'
+  | 'notchedOutline'
+  | 'sectionsContainer'
+  | 'sectionContent'
+  | 'sectionBefore'
+  | 'sectionAfter'
+  | 'adornedStart'
+  | 'adornedEnd'
+  | 'activeBar';
+```
+
+### PickersInputProps
+
+```typescript
+type PickersInputProps = {
+  disableUnderline?: boolean;
+  ownerState?: PickerTextFieldOwnerState;
+  className?: string;
+  classes?: Record<string, string>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  margin?: 'dense' | 'none' | 'normal';
+  renderSuffix?: (state: {
+    disabled?: boolean;
+    error?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    margin?: 'dense' | 'none' | 'normal';
+    required?: boolean;
+    adornedStart?: boolean;
+  }) => React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: PickersInputBaseSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersInputBaseSlotProps;
+  'data-multi-input'?: string;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement, Element>;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  readOnly?: boolean;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+};
+```
+
+### PickersOutlinedInput
+
+```typescript
+type PickersOutlinedInput = unknown;
+```
+
+### pickersOutlinedInputClasses
+
+```typescript
+type pickersOutlinedInputClasses = {};
+```
+
+### PickersOutlinedInputClasses
+
+```typescript
+type PickersOutlinedInputClasses = {
+  /** Styles applied to the NotchedOutline element. */
+  notchedOutline: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if focused. */
+  focused: string;
+  /** State class applied to the root element if `disabled=true`. */
+  disabled: string;
+  /** State class applied to the root element if `readOnly=true`. */
+  readOnly: string;
+  /** State class applied to the root element if `error=true`. */
+  error: string;
+  /** State class applied to the root element if `size=small`. */
+  inputSizeSmall: string;
+  /** Styles applied to the real hidden input element. */
+  input: string;
+  /** Styles applied to the container of the sections. */
+  sectionsContainer: string;
+  /** Styles applied to the content of a section. */
+  sectionContent: string;
+  /** Styles applied to the separator before a section. */
+  sectionBefore: string;
+  /** Styles applied to the separator after a section. */
+  sectionAfter: string;
+  /** Styles applied to the root if there is a startAdornment present. */
+  adornedStart: string;
+  /** Styles applied to the root if there is an endAdornment present. */
+  adornedEnd: string;
+  /** Styles applied to the active section bar. */
+  activeBar: string;
+};
+```
+
+### PickersOutlinedInputClassKey
+
+```typescript
+type PickersOutlinedInputClassKey =
+  | 'disabled'
+  | 'error'
+  | 'focused'
+  | 'input'
+  | 'readOnly'
+  | 'root'
+  | 'inputSizeSmall'
+  | 'notchedOutline'
+  | 'sectionsContainer'
+  | 'sectionContent'
+  | 'sectionBefore'
+  | 'sectionAfter'
+  | 'adornedStart'
+  | 'adornedEnd'
+  | 'activeBar';
+```
+
+### PickersOutlinedInputProps
+
+```typescript
+type PickersOutlinedInputProps = {
+  notched?: boolean;
+  ownerState?: PickerTextFieldOwnerState;
+  className?: string;
+  classes?: Record<string, string>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  margin?: 'dense' | 'none' | 'normal';
+  renderSuffix?: (state: {
+    disabled?: boolean;
+    error?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    margin?: 'dense' | 'none' | 'normal';
+    required?: boolean;
+    adornedStart?: boolean;
+  }) => React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: PickersInputBaseSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersInputBaseSlotProps;
+  'data-multi-input'?: string;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement, Element>;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  readOnly?: boolean;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+};
+```
+
+### pickersTextFieldClasses
+
+```typescript
+type pickersTextFieldClasses = Record<
+  'disabled' | 'error' | 'focused' | 'required' | 'root',
+  string
+>;
+```
+
+### PickersTextFieldClasses
+
+```typescript
+type PickersTextFieldClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if focused. */
+  focused: string;
+  /** State class applied to the root element if `disabled=true`. */
+  disabled: string;
+  /** State class applied to the root element if `error=true`. */
+  error: string;
+  /** State class applied to the root element id `required=true` */
+  required: string;
+};
+```
+
+### PickersTextFieldClassKey
+
+```typescript
+type PickersTextFieldClassKey = 'disabled' | 'error' | 'focused' | 'required' | 'root';
+```
+
+### PickersTextFieldProps
+
+```typescript
+type PickersTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = {
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'filled' | 'outlined' | 'standard';
+  /** The helper text content. */
+  helperText?: React.ReactNode;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onKeyDown: React.EventHandler;
+  onInput: React.FormEventHandler<HTMLDivElement>;
+  onPaste: React.ClipboardEventHandler<HTMLDivElement>;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement, Element>;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  readOnly?: boolean;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PickersSectionElement[];
+  sectionListRef: React.Ref<PickersSectionListRef>;
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: boolean;
+  onFocus: React.FocusEventHandler<HTMLDivElement>;
+  onBlur: React.FocusEventHandler<HTMLDivElement>;
+  disabled: boolean;
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error: boolean;
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots?: PickersTextFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?:
+    | PickersTextFieldSlotProps<PickersFilledInputProps>
+    | PickersTextFieldSlotProps<PickersOutlinedInputProps>
+    | PickersTextFieldSlotProps<PickersInputProps>;
+};
+```
+
+### PickersTextFieldSlotProps
+
+```typescript
+type PickersTextFieldSlotProps<InputPropsType extends PickersInputBaseProps> = {
+  root?: Partial<FormControlProps>;
+  input?: Partial<InputPropsType>;
+  inputLabel?: Partial<InputLabelProps>;
+  htmlInput?: React.ComponentPropsWithRef<'input'>;
+  formHelperText?: Partial<FormHelperTextProps>;
+};
+```
+
+### PickersTextFieldSlots
+
+```typescript
+type PickersTextFieldSlots = {
+  /**
+   * The component used for the root slot.
+   * @default FormControl
+   */
+  root?: React.ElementType;
+  /**
+   * The component used for the input slot.
+   * Defaults to one of `PickersInput`, `PickersFilledInput`, `PickersOutlinedInput` based on `variant`.
+   * @default PickersOutlinedInput
+   */
+  input?: React.ElementType;
+  /**
+   * The component used for the input label slot.
+   * @default InputLabel
+   */
+  inputLabel?: React.ElementType;
+  /**
+   * The component rendered as the underlying hidden `<input>` element.
+   * @default PickersInputBaseInput
+   */
+  htmlInput?: React.ElementType;
+  /**
+   * The component used for the form helper text slot.
+   * @default FormHelperText
+   */
+  formHelperText?: React.ElementType;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.pickers-text-field.ts b/docs/pages/x/api/date-pickers/types.pickers-text-field.ts
new file mode 100644
index 0000000000000..6c292d69e5a8f
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.pickers-text-field.ts
@@ -0,0 +1,4 @@
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesPickersTextField = createTypes(import.meta.url, PickersTextField);
diff --git a/docs/pages/x/api/date-pickers/types.single-input-date-range-field.ts b/docs/pages/x/api/date-pickers/types.single-input-date-range-field.ts
new file mode 100644
index 0000000000000..49a0b1b0ffed5
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.single-input-date-range-field.ts
@@ -0,0 +1,4 @@
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSingleInputDateRangeField = createTypes(import.meta.url, SingleInputDateRangeField);
diff --git a/docs/pages/x/api/date-pickers/types.single-input-date-time-range-field.md b/docs/pages/x/api/date-pickers/types.single-input-date-time-range-field.md
new file mode 100644
index 0000000000000..36c8c39a28a19
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.single-input-date-time-range-field.md
@@ -0,0 +1,741 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.single-input-date-time-range-field.md'
+
+## API Reference
+
+### SingleInputDateTimeRangeField
+
+Demos:
+
+- [DateTimeRangeField](http://mui.com/x/react-date-pickers/date-time-range-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/)
+
+**SingleInputDateTimeRangeField Props:**
+
+| Prop                                     | Type                                                                       | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :--------------------------------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                   | -                                                                                                                                                        | Name attribute of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| label                                    | `React.ReactNode`                                                          | -                                                                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| defaultValue                             | `PickerRangeValue`                                                         | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                                    | `PickerRangeValue`                                                         | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onClick                                  | `React.MouseEventHandler<HTMLDivElement>`                                  | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ampm                                     | `boolean`                                                                  | `adapter.is12HourCycleInCurrentLocale()`                                                                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| areAllSectionsEmpty                      | `boolean`                                                                  | -                                                                                                                                                        | Is `true` if the current values equals the empty value.&#xA;For a single item value, it means that `value === null`&#xA;For a range value, it means that `value === [null, null]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| clearButtonPosition                      | `'start' \| 'end'`                                                         | `'end'`                                                                                                                                                  | The position at which the clear button is placed.&#xA;If the field is not clearable, the button is not rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| clearable                                | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, a clear button will be shown in the field allowing value clearing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| dateSeparator                            | `string`                                                                   | `"–"`                                                                                                                                                    | String displayed between the start and the end dates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                  | `false`                                                                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disablePast                              | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endAdornment                             | `React.ReactNode`                                                          | -                                                                                                                                                        | End `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| error                                    | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the `input` will indicate an error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| fieldRef                                 | `React.Ref<FieldRef<PickerRangeValue>>`                                    | -                                                                                                                                                        | The ref object used to imperatively interact with the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| focused                                  | `boolean`                                                                  | -                                                                                                                                                        | If `true`, the component is displayed in focused state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| formatDensity                            | `'dense' \| 'spacious'`                                                    | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| fullWidth                                | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the input will take up the full width of its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| helperText                               | `React.ReactNode`                                                          | -                                                                                                                                                        | The helper text content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxDate                                  | `any`                                                                      | `2099-12-31`                                                                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxDateTime                              | `any`                                                                      | -                                                                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| maxTime                                  | `any`                                                                      | -                                                                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minDate                                  | `any`                                                                      | `1900-01-01`                                                                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| minDateTime                              | `any`                                                                      | -                                                                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| minTime                                  | `any`                                                                      | -                                                                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minutesStep                              | `number`                                                                   | `1`                                                                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onBlur                                   | `React.FocusEventHandler<HTMLDivElement>`                                  | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onChange                                 | `FieldChangeHandler<PickerRangeValue, DateTimeRangeValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onClear                                  | `React.MouseEventHandler`                                                  | -                                                                                                                                                        | Callback fired when the clear button is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onError                                  | `((error: DateTimeRangeValidationError, value: PickerRangeValue) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onFocus                                  | `React.FocusEventHandler<HTMLDivElement>`                                  | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onInput                                  | `React.FormEventHandler<HTMLDivElement>`                                   | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onKeyDown                                | `React.RefCallback`                                                        | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onPaste                                  | `React.ClipboardEventHandler<HTMLDivElement>`                              | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                              | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| openPickerButtonPosition                 | `'start' \| 'end'`                                                         | `'end'`                                                                                                                                                  | The position at which the opening button is placed.&#xA;If there is no Picker to open, the button is not rendered                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate                            | `any`                                                                      | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections                         | `FieldSelectedSections`                                                    | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableDate                        | `((day: any, position: 'start' \| 'end') => boolean)`                      | -                                                                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                | -                                                                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldRespectLeadingZeros                | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                                | `SingleInputDateTimeRangeFieldSlotProps`                                   | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                                    | `SingleInputDateTimeRangeFieldSlots`                                       | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startAdornment                           | `React.ReactNode`                                                          | -                                                                                                                                                        | Start `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| timezone                                 | `PickersTimezone`                                                          | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| variant                                  | `'filled' \| 'outlined' \| 'standard'`                                     | `'outlined'`                                                                                                                                             | The variant to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| format                                   | `string`                                                                   | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                                 | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                                 | `boolean`                                                                  | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                              | -                                                                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| id                                       | `string`                                                                   | -                                                                                                                                                        | The id of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+
+### unstable_useSingleInputDateTimeRangeField
+
+**Parameters:**
+
+| Parameter | Type                                    | Default | Description |
+| :-------- | :-------------------------------------- | :------ | :---------- |
+| props     | `UseSingleInputDateTimeRangeFieldProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = UseFieldReturnValue<UseSingleInputDateTimeRangeFieldProps>;
+```
+
+## Additional Types
+
+### SingleInputDateTimeRangeFieldProps
+
+```typescript
+type SingleInputDateTimeRangeFieldProps = {
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'filled' | 'outlined' | 'standard';
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  onInput?: React.FormEventHandler<HTMLDivElement>;
+  onKeyDown?: React.RefCallback;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty?: boolean;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** The helper text content. */
+  helperText?: React.ReactNode;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, DateTimeRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<PickerRangeValue>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SingleInputDateTimeRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SingleInputDateTimeRangeFieldSlotProps;
+};
+```
+
+### SingleInputDateTimeRangeFieldSlotProps
+
+```typescript
+type SingleInputDateTimeRangeFieldSlotProps = {
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### SingleInputDateTimeRangeFieldSlots
+
+```typescript
+type SingleInputDateTimeRangeFieldSlots = {
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'style'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+};
+```
+
+### UseSingleInputDateTimeRangeFieldProps
+
+```typescript
+type UseSingleInputDateTimeRangeFieldProps = {
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, DateTimeRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<PickerRangeValue>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (value: unknown, context: { validationError: unknown }) => void;
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.single-input-date-time-range-field.ts b/docs/pages/x/api/date-pickers/types.single-input-date-time-range-field.ts
new file mode 100644
index 0000000000000..f53767817fa76
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.single-input-date-time-range-field.ts
@@ -0,0 +1,4 @@
+import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSingleInputDateTimeRangeField = createTypes(import.meta.url, SingleInputDateTimeRangeField);
diff --git a/docs/pages/x/api/date-pickers/types.single-input-time-range-field.md b/docs/pages/x/api/date-pickers/types.single-input-time-range-field.md
new file mode 100644
index 0000000000000..d20c1cb27dee6
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.single-input-time-range-field.md
@@ -0,0 +1,694 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.single-input-time-range-field.md'
+
+## API Reference
+
+### SingleInputTimeRangeField
+
+Demos:
+
+- [TimeRangeField](http://mui.com/x/react-date-pickers/time-range-field/)
+- [Fields](https://mui.com/x/react-date-pickers/fields/)
+
+API:
+
+- [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/)
+
+**SingleInputTimeRangeField Props:**
+
+| Prop                                     | Type                                                                   | Default                                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| :--------------------------------------- | :--------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                               | -                                                                                                                                                        | Name attribute of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| label                                    | `React.ReactNode`                                                      | -                                                                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| defaultValue                             | `PickerRangeValue`                                                     | -                                                                                                                                                        | The default value. Use when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| value                                    | `PickerRangeValue`                                                     | -                                                                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| onClick                                  | `React.MouseEventHandler<HTMLDivElement>`                              | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ampm                                     | `boolean`                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| areAllSectionsEmpty                      | `boolean`                                                              | -                                                                                                                                                        | Is `true` if the current values equals the empty value.&#xA;For a single item value, it means that `value === null`&#xA;For a range value, it means that `value === [null, null]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| clearButtonPosition                      | `'start' \| 'end'`                                                     | `'end'`                                                                                                                                                  | The position at which the clear button is placed.&#xA;If the field is not clearable, the button is not rendered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| clearable                                | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, a clear button will be shown in the field allowing value clearing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| dateSeparator                            | `string`                                                               | `"–"`                                                                                                                                                    | String displayed between the start and the end dates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disableFuture                            | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                              | `false`                                                                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| disablePast                              | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| endAdornment                             | `React.ReactNode`                                                      | -                                                                                                                                                        | End `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| error                                    | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the `input` will indicate an error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| fieldRef                                 | `React.Ref<FieldRef<PickerRangeValue>>`                                | -                                                                                                                                                        | The ref object used to imperatively interact with the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| focused                                  | `boolean`                                                              | -                                                                                                                                                        | If `true`, the component is displayed in focused state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| formatDensity                            | `'dense' \| 'spacious'`                                                | `"dense"`                                                                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| fullWidth                                | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the input will take up the full width of its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| helperText                               | `React.ReactNode`                                                      | -                                                                                                                                                        | The helper text content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maxTime                                  | `any`                                                                  | -                                                                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minTime                                  | `any`                                                                  | -                                                                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| minutesStep                              | `number`                                                               | `1`                                                                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| onBlur                                   | `React.FocusEventHandler<HTMLDivElement>`                              | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onChange                                 | `FieldChangeHandler<PickerRangeValue, TimeRangeValidationError>`       | -                                                                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onClear                                  | `React.MouseEventHandler`                                              | -                                                                                                                                                        | Callback fired when the clear button is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| onError                                  | `((error: TimeRangeValidationError, value: PickerRangeValue) => void)` | -                                                                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onFocus                                  | `React.FocusEventHandler<HTMLDivElement>`                              | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onInput                                  | `React.FormEventHandler<HTMLDivElement>`                               | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onKeyDown                                | `React.RefCallback`                                                    | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onPaste                                  | `React.ClipboardEventHandler<HTMLDivElement>`                          | -                                                                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                          | -                                                                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| openPickerButtonPosition                 | `'start' \| 'end'`                                                     | `'end'`                                                                                                                                                  | The position at which the opening button is placed.&#xA;If there is no Picker to open, the button is not rendered                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| referenceDate                            | `any`                                                                  | ``The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.`` | The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.&#xA;For example, on time fields it will be used to determine the date to set.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| selectedSections                         | `FieldSelectedSections`                                                | -                                                                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                            | -                                                                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| shouldRespectLeadingZeros                | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)&#xA;If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`) Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`. Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.&#xA;If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`. Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.&#xA;This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library. |
+| slotProps                                | `SingleInputTimeRangeFieldSlotProps`                                   | `{}`                                                                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| slots                                    | `SingleInputTimeRangeFieldSlots`                                       | `{}`                                                                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| startAdornment                           | `React.ReactNode`                                                      | -                                                                                                                                                        | Start `InputAdornment` for this component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| timezone                                 | `PickersTimezone`                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                                                                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| variant                                  | `'filled' \| 'outlined' \| 'standard'`                                 | `'outlined'`                                                                                                                                             | The variant to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| format                                   | `string`                                                               | -                                                                                                                                                        | Format of the date when rendered in the input(s).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the `input` element is focused during the first mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabled                                 | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| readOnly                                 | `boolean`                                                              | `false`                                                                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                          | -                                                                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| id                                       | `string`                                                               | -                                                                                                                                                        | The id of the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+
+### unstable_useSingleInputTimeRangeField
+
+**Parameters:**
+
+| Parameter | Type                                | Default | Description |
+| :-------- | :---------------------------------- | :------ | :---------- |
+| props     | `UseSingleInputTimeRangeFieldProps` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = UseFieldReturnValue<UseSingleInputTimeRangeFieldProps>;
+```
+
+## Additional Types
+
+### SingleInputTimeRangeFieldProps
+
+```typescript
+type SingleInputTimeRangeFieldProps = {
+  /**
+   * If `true`, the `input` will indicate an error.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'filled' | 'outlined' | 'standard';
+  /** The label content. */
+  label?: React.ReactNode;
+  /** The id of the `input` element. */
+  id?: string;
+  onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  onInput?: React.FormEventHandler<HTMLDivElement>;
+  onKeyDown?: React.RefCallback;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty?: boolean;
+  /** End `InputAdornment` for this component. */
+  endAdornment?: React.ReactNode;
+  /** Start `InputAdornment` for this component. */
+  startAdornment?: React.ReactNode;
+  /** Name attribute of the `input` element. */
+  name?: string;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** The helper text content. */
+  helperText?: React.ReactNode;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, TimeRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<PickerRangeValue>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SingleInputTimeRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SingleInputTimeRangeFieldSlotProps;
+};
+```
+
+### SingleInputTimeRangeFieldSlotProps
+
+```typescript
+type SingleInputTimeRangeFieldSlotProps = {
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+};
+```
+
+### SingleInputTimeRangeFieldSlots
+
+```typescript
+type SingleInputTimeRangeFieldSlots = {
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'style'
+    | 'div'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+    | 'view'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+};
+```
+
+### UseSingleInputTimeRangeFieldProps
+
+```typescript
+type UseSingleInputTimeRangeFieldProps = {
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /** If `true`, the component is displayed in focused state. */
+  focused?: boolean;
+  /** The default value. Use when the component is not controlled. */
+  defaultValue?: PickerRangeValue;
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: FieldChangeHandler<PickerRangeValue, TimeRangeValidationError>;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate?: any;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   * @default false
+   */
+  shouldRespectLeadingZeros?: boolean;
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /** The ref object used to imperatively interact with the field. */
+  fieldRef?: React.Ref<FieldRef<PickerRangeValue>>;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /** Format of the date when rendered in the input(s). */
+  format?: string;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator?: string;
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked. */
+  onClear?: React.MouseEventHandler;
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition?: 'start' | 'end';
+  /**
+   * The position at which the opening button is placed.
+   * If there is no Picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition?: 'start' | 'end';
+};
+```
+
+## External Types
+
+### FieldChangeHandler
+
+```typescript
+type FieldChangeHandler = (value: unknown, context: { validationError: unknown }) => void;
+```
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.single-input-time-range-field.ts b/docs/pages/x/api/date-pickers/types.single-input-time-range-field.ts
new file mode 100644
index 0000000000000..d2cb75af95cb9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.single-input-time-range-field.ts
@@ -0,0 +1,4 @@
+import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSingleInputTimeRangeField = createTypes(import.meta.url, SingleInputTimeRangeField);
diff --git a/docs/pages/x/api/date-pickers/types.static-date-picker.ts b/docs/pages/x/api/date-pickers/types.static-date-picker.ts
new file mode 100644
index 0000000000000..2c2a887ed9182
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-date-picker.ts
@@ -0,0 +1,4 @@
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStaticDatePicker = createTypes(import.meta.url, StaticDatePicker);
diff --git a/docs/pages/x/api/date-pickers/types.static-date-range-picker.md b/docs/pages/x/api/date-pickers/types.static-date-range-picker.md
new file mode 100644
index 0000000000000..538b1419a8544
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-date-range-picker.md
@@ -0,0 +1,1015 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.static-date-range-picker.md'
+
+## API Reference
+
+### StaticDateRangePicker
+
+Demos:
+
+- [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/)
+
+**StaticDateRangePicker Props:**
+
+| Prop                         | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                           |
+| :--------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                 | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                     |
+| value                        | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                        |
+| calendars                    | `1 \| 2 \| 3`                                                                                        | ``1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise.``                                             | The number of calendars to render.                                                                                                                                                                                                                                                                    |
+| currentMonthCalendarPosition | `1 \| 2 \| 3`                                                                                        | `1`                                                                                                      | Position the current month is rendered in.                                                                                                                                                                                                                                                            |
+| dayOfWeekFormatter           | `((date: any) => string)`                                                                            | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                             |
+| defaultRangePosition         | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                         |
+| disableAutoMonthSwitching    | `boolean`                                                                                            | `false`                                                                                                  | If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.                                                                                                                                                                                            |
+| disableDragEditing           | `boolean`                                                                                            | `false`                                                                                                  | If `true`, editing dates by dragging is disabled.                                                                                                                                                                                                                                                     |
+| disableFuture                | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                     |
+| disableHighlightToday        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                            |
+| disablePast                  | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                    |
+| displayStaticWrapperAs       | `'desktop' \| 'mobile'`                                                                              | `"mobile"`                                                                                               | Force static wrapper inner components to be rendered in mobile or desktop mode.                                                                                                                                                                                                                       |
+| displayWeekNumber            | `boolean`                                                                                            | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                           |
+| fixedWeekNumber              | `number`                                                                                             | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                         |
+| loading                      | `boolean`                                                                                            | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                               |
+| localeText                   | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                              |
+| maxDate                      | `any`                                                                                                | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                              |
+| minDate                      | `any`                                                                                                | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                              |
+| onAccept                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                            |
+| onChange                     | `((value: PickerRangeValue, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                |
+| onClose                      | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when component requests to be closed.&#xA;Can be fired when selecting (by default on `desktop` mode) or clearing a value.                                                                                                                                                              |
+| onError                      | `((error: DateRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                          |
+| onMonthChange                | `((month: any) => void)`                                                                             | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                       |
+| onRangePositionChange        | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                       |
+| rangePosition                | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                  |
+| reduceAnimations             | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                  |
+| referenceDate                | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                               |
+| renderLoading                | `(() => React.ReactNode)`                                                                            | `() => "..."`                                                                                            | Component rendered on the "day" view when `props.loading` is true.                                                                                                                                                                                                                                    |
+| shouldDisableDate            | `((day: any, position: 'start' \| 'end') => boolean)`                                                | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                         |
+| showDaysOutsideCurrentMonth  | `boolean`                                                                                            | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers. |
+| slotProps                    | `StaticDateRangePickerSlotProps`                                                                     | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                               |
+| slots                        | `StaticDateRangePickerSlots`                                                                         | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                          |
+| sx                           | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                               |
+| timezone                     | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                        |
+| viewRenderers                | `Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>>`      | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                     |
+| autoFocus                    | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                    |
+| disabled                     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                  |
+| readOnly                     | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                  |
+| className                    | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                     |
+
+## Additional Types
+
+### StaticDateRangePickerProps
+
+```typescript
+type StaticDateRangePickerProps = {
+  /**
+   * The number of calendars to render.
+   * @default 1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise.
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: StaticDateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: StaticDateRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<
+    PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>>
+  >;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<DateRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component rendered on the "day" view when `props.loading` is true.
+   * @default () => "..."
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: any, position: 'start' | 'end') => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Callback fired when component requests to be closed.
+   * Can be fired when selecting (by default on `desktop` mode) or clearing a value.
+   * @deprecated Please avoid using as it will be removed in next major version.
+   */
+  onClose?: () => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+  /**
+   * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   * @default "mobile"
+   */
+  displayStaticWrapperAs?: 'desktop' | 'mobile';
+};
+```
+
+### StaticDateRangePickerSlotProps
+
+```typescript
+type StaticDateRangePickerSlotProps = {
+  toolbar?: ExportedDateRangePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<
+    PickersCalendarHeaderComponent,
+    {},
+    DateRangeCalendarOwnerState
+  >;
+  day?: SlotComponentProps<DateRangePickerDayComponent, {}, PickerDayOwnerState>;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+};
+```
+
+### StaticDateRangePickerSlots
+
+```typescript
+type StaticDateRangePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersRangeCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickerDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickerDay
+   */
+  day?: React.ElementType<
+    DateRangePickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+## External Types
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.static-date-range-picker.ts b/docs/pages/x/api/date-pickers/types.static-date-range-picker.ts
new file mode 100644
index 0000000000000..6ee46d2766744
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-date-range-picker.ts
@@ -0,0 +1,4 @@
+import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStaticDateRangePicker = createTypes(import.meta.url, StaticDateRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.static-date-time-picker.md b/docs/pages/x/api/date-pickers/types.static-date-time-picker.md
new file mode 100644
index 0000000000000..74eeef0170c21
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-date-time-picker.md
@@ -0,0 +1,1319 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.static-date-time-picker.md'
+
+## API Reference
+
+### StaticDateTimePicker
+
+Demos:
+
+- [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [StaticDateTimePicker API](https://mui.com/x/api/date-pickers/static-date-time-picker/)
+
+**StaticDateTimePicker Props:**
+
+| Prop                                     | Type                                                                                   | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                           |
+| :--------------------------------------- | :------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `any`                                                                                  | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                     |
+| value                                    | `any`                                                                                  | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                        |
+| ampm                                     | `boolean`                                                                              | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                |
+| ampmInClock                              | `boolean`                                                                              | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                                                                                    |
+| dayOfWeekFormatter                       | `((date: any) => string)`                                                              | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()`                | Formats the day of week displayed in the calendar header.                                                                                                                                                                                                                                             |
+| disableFuture                            | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                     |
+| disableHighlightToday                    | `boolean`                                                                              | `false`                                                                                                  | If `true`, today's day is not highlighted.                                                                                                                                                                                                                                                            |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                              | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                 |
+| disablePast                              | `boolean`                                                                              | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                    |
+| displayStaticWrapperAs                   | `'desktop' \| 'mobile'`                                                                | `"mobile"`                                                                                               | Force static wrapper inner components to be rendered in mobile or desktop mode.                                                                                                                                                                                                                       |
+| displayWeekNumber                        | `boolean`                                                                              | -                                                                                                        | If `true`, the week number will be display in the calendar.                                                                                                                                                                                                                                           |
+| fixedWeekNumber                          | `number`                                                                               | -                                                                                                        | The day view will show as many weeks as needed after the end of the current month to match this value.&#xA;Put it to 6 to have a fixed number of weeks in Gregorian calendars                                                                                                                         |
+| loading                                  | `boolean`                                                                              | `false`                                                                                                  | If `true`, calls `renderLoading` instead of rendering the day calendar.&#xA;Can be used to preload information and show it in calendar.                                                                                                                                                               |
+| localeText                               | `PickersInputComponentLocaleText`                                                      | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                              |
+| maxDate                                  | `any`                                                                                  | `2099-12-31`                                                                                             | Maximal selectable date.                                                                                                                                                                                                                                                                              |
+| maxDateTime                              | `any`                                                                                  | -                                                                                                        | Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.                                                                                                                                                                                                    |
+| maxTime                                  | `any`                                                                                  | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                            |
+| minDate                                  | `any`                                                                                  | `1900-01-01`                                                                                             | Minimal selectable date.                                                                                                                                                                                                                                                                              |
+| minDateTime                              | `any`                                                                                  | -                                                                                                        | Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.                                                                                                                                                                                                    |
+| minTime                                  | `any`                                                                                  | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                            |
+| minutesStep                              | `number`                                                                               | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                    |
+| monthsPerRow                             | `3 \| 4`                                                                               | `3`                                                                                                      | Months rendered per row.                                                                                                                                                                                                                                                                              |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                            |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                |
+| onClose                                  | `(() => void)`                                                                         | -                                                                                                        | Callback fired when component requests to be closed.&#xA;Can be fired when selecting (by default on `desktop` mode) or clearing a value.                                                                                                                                                              |
+| onError                                  | `((error: DateTimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                          |
+| onMonthChange                            | `((month: any) => void)`                                                               | -                                                                                                        | Callback fired on month change.                                                                                                                                                                                                                                                                       |
+| onViewChange                             | `((view: DateOrTimeViewWithMeridiem) => void)`                                         | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                        |
+| onYearChange                             | `((year: any) => void)`                                                                | -                                                                                                        | Callback fired on year change.                                                                                                                                                                                                                                                                        |
+| openTo                                   | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                           |
+| reduceAnimations                         | `boolean`                                                                              | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                  |
+| referenceDate                            | `any`                                                                                  | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                               |
+| renderLoading                            | `(() => React.ReactNode)`                                                              | `() => <span>...</span>`                                                                                 | Component displaying when passed `loading` true.                                                                                                                                                                                                                                                      |
+| shouldDisableDate                        | `((day: any) => boolean)`                                                              | -                                                                                                        | Disable specific date. Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.                                                                         |
+| shouldDisableMonth                       | `((month: any) => boolean)`                                                            | -                                                                                                        | Disable specific month.                                                                                                                                                                                                                                                                               |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                            | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                |
+| shouldDisableYear                        | `((year: any) => boolean)`                                                             | -                                                                                                        | Disable specific year.                                                                                                                                                                                                                                                                                |
+| showDaysOutsideCurrentMonth              | `boolean`                                                                              | `false`                                                                                                  | If `true`, days outside the current month are rendered: if `fixedWeekNumber` is defined, renders days to have the weeks requested.if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.ignored if `calendars` equals more than `1` on range pickers. |
+| skipDisabled                             | `boolean`                                                                              | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                         |
+| slotProps                                | `StaticDateTimePickerSlotProps`                                                        | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                               |
+| slots                                    | `StaticDateTimePickerSlots`                                                            | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                          |
+| sx                                       | `SxProps<Theme>`                                                                       | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                               |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                               | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                     |
+| timeSteps                                | `TimeStepOptions`                                                                      | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                           |
+| timezone                                 | `PickersTimezone`                                                                      | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                        |
+| view                                     | `DateOrTimeViewWithMeridiem`                                                           | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                       |
+| viewRenderers                            | `Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>`                     | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                                                                                     |
+| views                                    | `DateOrTimeView[]`                                                                     | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                      |
+| yearsOrder                               | `'asc' \| 'desc'`                                                                      | `'asc'`                                                                                                  | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                                                                                            |
+| yearsPerRow                              | `3 \| 4`                                                                               | `` `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise. ``                                    | Years rendered per row.                                                                                                                                                                                                                                                                               |
+| autoFocus                                | `boolean`                                                                              | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                    |
+| disabled                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                  |
+| readOnly                                 | `boolean`                                                                              | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                  |
+| orientation                              | `PickerOrientation`                                                                    | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                                                                                            |
+| className                                | `string`                                                                               | -                                                                                                        | -                                                                                                                                                                                                                                                                                                     |
+
+## Additional Types
+
+### StaticDateTimePickerProps
+
+```typescript
+type StaticDateTimePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: StaticDateTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: StaticDateTimePickerSlotProps;
+  /**
+   * Years rendered per row.
+   * @default `4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimePickerViewRenderers<DateOrTimeViewWithMeridiem>>;
+  /** Available views. */
+  views?: DateOrTimeView[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: DateOrTimeViewWithMeridiem;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: DateOrTimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<DateTimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: DateTimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * @returns If `true` the date will be disabled.
+   */
+  shouldDisableDate?: (day: any) => boolean;
+  /**
+   * Disable specific month.
+   * @returns If `true`, the month will be disabled.
+   */
+  shouldDisableMonth?: (month: any) => boolean;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Component displaying when passed `loading` true.
+   * @default () => <span>...</span>
+   * @returns The node to render when loading.
+   */
+  renderLoading?: () => React.ReactNode;
+  /** Callback fired on year change. */
+  onYearChange?: (year: any) => void;
+  /** Callback fired on month change. */
+  onMonthChange?: (month: any) => void;
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @returns The name to display.
+   */
+  dayOfWeekFormatter?: (date: any) => string;
+  /** If `true`, the week number will be display in the calendar. */
+  displayWeekNumber?: boolean;
+  /**
+   * The day view will show as many weeks as needed after the end of the current month to match this value.
+   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
+   */
+  fixedWeekNumber?: number;
+  /**
+   * If `true`, today's day is not highlighted.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+  /**
+   * Months rendered per row.
+   * @default 3
+   */
+  monthsPerRow?: 3 | 4;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+  /** Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */
+  minDateTime?: any;
+  /** Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */
+  maxDateTime?: any;
+  /**
+   * Callback fired when component requests to be closed.
+   * Can be fired when selecting (by default on `desktop` mode) or clearing a value.
+   * @deprecated Please avoid using as it will be removed in next major version.
+   */
+  onClose?: () => void;
+  /**
+   * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   * @default "mobile"
+   */
+  displayStaticWrapperAs?: 'desktop' | 'mobile';
+};
+```
+
+### StaticDateTimePickerSlotProps
+
+```typescript
+type StaticDateTimePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: DateTimePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedDateTimePickerToolbarProps;
+  calendarHeader?: SlotComponentProps<PickersCalendarHeaderComponent, {}, PickerOwnerState>;
+  switchViewButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  switchViewIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersCalendarHeaderSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  day?: SlotComponentPropsFromProps<PickerDayProps, {}, PickerDayOwnerStateBase>;
+  monthButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    MonthButtonOwnerState
+  >;
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+};
+```
+
+### StaticDateTimePickerSlots
+
+```typescript
+type StaticDateTimePickerSlots = {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimePickerTabs
+   */
+  tabs?: React.ElementType<
+    DateTimePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<
+    PickersCalendarHeaderProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for day.
+   * Check the [PickerDay](https://mui.com/x/api/date-pickers/picker-day/) component.
+   * @default PickerDay
+   */
+  day?: React.ElementType<
+    PickerDayProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button displayed to render a single month in the `month` view.
+   * @default MonthCalendarButton
+   */
+  monthButton?: React.ElementType;
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.static-date-time-picker.ts b/docs/pages/x/api/date-pickers/types.static-date-time-picker.ts
new file mode 100644
index 0000000000000..4b6fcfaada88e
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-date-time-picker.ts
@@ -0,0 +1,4 @@
+import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStaticDateTimePicker = createTypes(import.meta.url, StaticDateTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.static-time-picker.md b/docs/pages/x/api/date-pickers/types.static-time-picker.md
new file mode 100644
index 0000000000000..0d2c85d262915
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-time-picker.md
@@ -0,0 +1,546 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.static-time-picker.md'
+
+## API Reference
+
+### StaticTimePicker
+
+Demos:
+
+- [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/)
+
+**StaticTimePicker Props:**
+
+| Prop                                     | Type                                                                               | Default                                                                                                  | Description                                                                                                                                                                                                                        |
+| :--------------------------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `any`                                                                              | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                  |
+| value                                    | `any`                                                                              | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                     |
+| ampm                                     | `boolean`                                                                          | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                             |
+| ampmInClock                              | `boolean`                                                                          | `true on desktop, false on mobile`                                                                       | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                 |
+| disableFuture                            | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                  |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                          | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                              |
+| disablePast                              | `boolean`                                                                          | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                 |
+| displayStaticWrapperAs                   | `'desktop' \| 'mobile'`                                                            | `"mobile"`                                                                                               | Force static wrapper inner components to be rendered in mobile or desktop mode.                                                                                                                                                    |
+| localeText                               | `PickersInputComponentLocaleText`                                                  | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                           |
+| maxTime                                  | `any`                                                                              | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minTime                                  | `any`                                                                              | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minutesStep                              | `number`                                                                           | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                 |
+| onAccept                                 | `((value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                         |
+| onChange                                 | `((value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                             |
+| onClose                                  | `(() => void)`                                                                     | -                                                                                                        | Callback fired when component requests to be closed.&#xA;Can be fired when selecting (by default on `desktop` mode) or clearing a value.                                                                                           |
+| onError                                  | `((error: TimeValidationError, value: any) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.       |
+| onViewChange                             | `((view: TimeView) => void)`                                                       | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                     |
+| openTo                                   | `TimeView`                                                                         | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                        |
+| reduceAnimations                         | `boolean`                                                                          | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                               |
+| referenceDate                            | `any`                                                                              | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                            |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                        | -                                                                                                        | Disable specific time.                                                                                                                                                                                                             |
+| slotProps                                | `StaticTimePickerSlotProps`                                                        | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                            |
+| slots                                    | `StaticTimePickerSlots`                                                            | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                       |
+| sx                                       | `SxProps<Theme>`                                                                   | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                            |
+| timezone                                 | `PickersTimezone`                                                                  | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.     |
+| view                                     | `TimeView`                                                                         | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                    |
+| viewRenderers                            | `Partial<TimePickerViewRenderers<TimeView>>`                                       | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be used.                                                                  |
+| views                                    | `TimeView[]`                                                                       | -                                                                                                        | Available views.                                                                                                                                                                                                                   |
+| autoFocus                                | `boolean`                                                                          | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered. |
+| disabled                                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                               |
+| readOnly                                 | `boolean`                                                                          | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                               |
+| orientation                              | `PickerOrientation`                                                                | -                                                                                                        | Force rendering in particular orientation.                                                                                                                                                                                         |
+| className                                | `string`                                                                           | -                                                                                                        | -                                                                                                                                                                                                                                  |
+
+## Additional Types
+
+### StaticTimePickerProps
+
+```typescript
+type StaticTimePickerProps = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: StaticTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: StaticTimePickerSlotProps;
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<TimePickerViewRenderers<TimeView>>;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeView;
+  /** Available views. */
+  views?: TimeView[];
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeView;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (value: any, context: PickerChangeHandlerContext<TimeValidationError>) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /** Force rendering in particular orientation. */
+  orientation?: PickerOrientation;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeValidationError, value: any) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /**
+   * Callback fired when component requests to be closed.
+   * Can be fired when selecting (by default on `desktop` mode) or clearing a value.
+   * @deprecated Please avoid using as it will be removed in next major version.
+   */
+  onClose?: () => void;
+  /**
+   * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   * @default "mobile"
+   */
+  displayStaticWrapperAs?: 'desktop' | 'mobile';
+};
+```
+
+### StaticTimePickerSlotProps
+
+```typescript
+type StaticTimePickerSlotProps = {
+  toolbar?: ExportedTimePickerToolbarProps;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'style'
+            | 'classes'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<any>>;
+};
+```
+
+### StaticTimePickerSlots
+
+```typescript
+type StaticTimePickerSlots = {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<TimePickerToolbarProps>;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'clipPath'
+    | 'filter'
+    | 'marker'
+    | 'mask'
+    | 'p'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'dialog'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'label'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<any>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<any> & React.RefAttributes<HTMLDivElement>
+  >;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
diff --git a/docs/pages/x/api/date-pickers/types.static-time-picker.ts b/docs/pages/x/api/date-pickers/types.static-time-picker.ts
new file mode 100644
index 0000000000000..6fad56a507786
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.static-time-picker.ts
@@ -0,0 +1,4 @@
+import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStaticTimePicker = createTypes(import.meta.url, StaticTimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.time-clock.md b/docs/pages/x/api/date-pickers/types.time-clock.md
new file mode 100644
index 0000000000000..c748fe4edaecb
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-clock.md
@@ -0,0 +1,551 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.time-clock.md'
+
+## API Reference
+
+### getTimeClockUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### TimeClock
+
+Demos:
+
+- [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+- [TimeClock](https://mui.com/x/react-date-pickers/time-clock/)
+
+API:
+
+- [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
+
+**TimeClock Props:**
+
+| Prop                                     | Type                                                                                     | Default                                                                                              | Description                                                                                                                                                                                                                        |
+| :--------------------------------------- | :--------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                             | `any \| null`                                                                            | -                                                                                                    | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                         |
+| value                                    | `any \| null`                                                                            | -                                                                                                    | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                     |
+| ampm                                     | `boolean`                                                                                | `adapter.is12HourCycleInCurrentLocale()`                                                             | 12h/24h view for hour selection clock.                                                                                                                                                                                             |
+| ampmInClock                              | `boolean`                                                                                | `false`                                                                                              | Display ampm controls under the clock (instead of in the toolbar).                                                                                                                                                                 |
+| classes                                  | `Partial<TimeClockClasses>`                                                              | -                                                                                                    | Override or extend the styles applied to the component.                                                                                                                                                                            |
+| disableFuture                            | `boolean`                                                                                | `false`                                                                                              | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                  |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                | `false`                                                                                              | Do not ignore date part when validating min/max time.                                                                                                                                                                              |
+| disablePast                              | `boolean`                                                                                | `false`                                                                                              | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                 |
+| focusedView                              | `TimeView \| null`                                                                       | -                                                                                                    | Controlled focused view.                                                                                                                                                                                                           |
+| maxTime                                  | `any`                                                                                    | -                                                                                                    | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minTime                                  | `any`                                                                                    | -                                                                                                    | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                         |
+| minutesStep                              | `number`                                                                                 | `1`                                                                                                  | Step over minutes.                                                                                                                                                                                                                 |
+| onChange                                 | `((value: any, selectionState?: PickerSelectionState, selectedView?: TimeView) => void)` | -                                                                                                    | Callback fired when the value changes.                                                                                                                                                                                             |
+| onFocusedViewChange                      | `((view: TimeView, hasFocus: boolean) => void)`                                          | -                                                                                                    | Callback fired on focused view change.                                                                                                                                                                                             |
+| onViewChange                             | `((view: TimeView) => void)`                                                             | -                                                                                                    | Callback fired on view change.                                                                                                                                                                                                     |
+| openTo                                   | `TimeView`                                                                               | -                                                                                                    | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                        |
+| referenceDate                            | `any`                                                                                    | ``The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.`` | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                            |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                              | -                                                                                                    | Disable specific time.                                                                                                                                                                                                             |
+| showViewSwitcher                         | `boolean`                                                                                | -                                                                                                    | -                                                                                                                                                                                                                                  |
+| slotProps                                | `TimeClockSlotProps`                                                                     | `{}`                                                                                                 | The props used for each component slot.                                                                                                                                                                                            |
+| slots                                    | `TimeClockSlots`                                                                         | `{}`                                                                                                 | Overridable component slots.                                                                                                                                                                                                       |
+| sx                                       | `SxProps<Theme>`                                                                         | -                                                                                                    | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                            |
+| timezone                                 | `PickersTimezone`                                                                        | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``              | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.     |
+| view                                     | `TimeView`                                                                               | -                                                                                                    | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                    |
+| views                                    | `TimeView[]`                                                                             | `['hours', 'minutes']`                                                                               | Available views.                                                                                                                                                                                                                   |
+| autoFocus                                | `boolean`                                                                                | -                                                                                                    | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered. |
+| disabled                                 | `boolean`                                                                                | `false`                                                                                              | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                               |
+| readOnly                                 | `boolean`                                                                                | `false`                                                                                              | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                               |
+| className                                | `string`                                                                                 | -                                                                                                    | -                                                                                                                                                                                                                                  |
+
+## Additional Types
+
+### clockClasses
+
+```typescript
+type clockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the clock element. */
+  clock: string;
+  /** Styles applied to the wrapper element. */
+  wrapper: string;
+  /** Styles applied to the square mask element. */
+  squareMask: string;
+  /** Styles applied to the pin element. */
+  pin: string;
+  /** Styles applied to the am button element. */
+  amButton: string;
+  /** Styles applied to the pm button element. */
+  pmButton: string;
+  /** Styles applied to the meridiem typography element. */
+  meridiemText: string;
+  /** Styles applied to the selected meridiem button element */
+  selected: string;
+};
+```
+
+### ClockClasses
+
+```typescript
+type ClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the clock element. */
+  clock: string;
+  /** Styles applied to the wrapper element. */
+  wrapper: string;
+  /** Styles applied to the square mask element. */
+  squareMask: string;
+  /** Styles applied to the pin element. */
+  pin: string;
+  /** Styles applied to the am button element. */
+  amButton: string;
+  /** Styles applied to the pm button element. */
+  pmButton: string;
+  /** Styles applied to the meridiem typography element. */
+  meridiemText: string;
+  /** Styles applied to the selected meridiem button element */
+  selected: string;
+};
+```
+
+### ClockClassKey
+
+```typescript
+type ClockClassKey =
+  | 'root'
+  | 'clock'
+  | 'wrapper'
+  | 'squareMask'
+  | 'pin'
+  | 'amButton'
+  | 'pmButton'
+  | 'meridiemText'
+  | 'selected';
+```
+
+### clockNumberClasses
+
+```typescript
+type clockNumberClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to a selected root element. */
+  selected: string;
+  /** Styles applied to a disabled root element. */
+  disabled: string;
+};
+```
+
+### ClockNumberClasses
+
+```typescript
+type ClockNumberClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to a selected root element. */
+  selected: string;
+  /** Styles applied to a disabled root element. */
+  disabled: string;
+};
+```
+
+### ClockNumberClassKey
+
+```typescript
+type ClockNumberClassKey = 'root' | 'disabled' | 'selected';
+```
+
+### ClockNumberProps
+
+```typescript
+type ClockNumberProps = {
+  'aria-label': string;
+  disabled: boolean;
+  /** Make sure callers pass an id which. It should be defined if selected. */
+  id: string | undefined;
+  index: number;
+  inner: boolean;
+  label: string;
+  selected: boolean;
+  classes?: Partial<ClockNumberClasses>;
+};
+```
+
+### clockPointerClasses
+
+```typescript
+type clockPointerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the thumb element. */
+  thumb: string;
+};
+```
+
+### ClockPointerClasses
+
+```typescript
+type ClockPointerClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the thumb element. */
+  thumb: string;
+};
+```
+
+### ClockPointerClassKey
+
+```typescript
+type ClockPointerClassKey = 'root' | 'thumb';
+```
+
+### ClockPointerProps
+
+```typescript
+type ClockPointerProps = {
+  /**
+   * `true` if the pointer is between two clock values.
+   * On the `hours` view, it is always false.
+   * On the `minutes` view, it is true if the pointer is on a value that is not a multiple of 5.
+   */
+  isBetweenTwoClockValues: boolean;
+  isInner: boolean;
+  type: TimeView;
+  viewValue: number;
+  classes?: Partial<ClockPointerClasses>;
+};
+```
+
+### ClockProps
+
+```typescript
+type ClockProps = {
+  ampm: boolean;
+  ampmInClock: boolean;
+  autoFocus?: boolean;
+  children: React.ReactNode[];
+  isTimeDisabled: (timeValue: number, type: TimeView) => boolean;
+  minutesStep?: number;
+  onChange: (value: number, isFinish?: PickerSelectionState) => void;
+  /**
+   * DOM id that the selected option should have
+   * Should only be `undefined` on the server
+   */
+  selectedId: string | undefined;
+  type: TimeView;
+  /** The numeric value of the current view. */
+  viewValue: number;
+  /** The current full date value. */
+  value: any | null;
+  /** Minimum and maximum value of the clock. */
+  viewRange: [number, number];
+  className?: string;
+  classes?: Partial<ClockClasses>;
+  meridiemMode: Meridiem | null;
+  handleMeridiemChange: (mode: 'am' | 'pm') => void;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+### timeClockClasses
+
+```typescript
+type timeClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arrowSwitcher element. */
+  arrowSwitcher: string;
+};
+```
+
+### TimeClockClasses
+
+```typescript
+type TimeClockClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arrowSwitcher element. */
+  arrowSwitcher: string;
+};
+```
+
+### TimeClockClassKey
+
+```typescript
+type TimeClockClassKey = 'root' | 'arrowSwitcher';
+```
+
+### TimeClockProps
+
+```typescript
+type TimeClockProps<TView extends TimeViewWithMeridiem = TimeView> = {
+  /**
+   * Available views.
+   * @default ['hours', 'minutes']
+   */
+  views?: TView[];
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<TimeClockClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimeClockSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimeClockSlotProps;
+  showViewSwitcher?: boolean;
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default false
+   */
+  ampmInClock?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
+   */
+  referenceDate?: any;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The view type. Will be one of date or time views.
+   */
+  onChange?: (
+    value: any,
+    selectionState?: PickerSelectionState,
+    selectedView?: TimeView | 'meridiem',
+  ) => void;
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeView | 'meridiem';
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TView) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeView | 'meridiem';
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  /** Controlled focused view. */
+  focusedView?: TimeView | 'meridiem' | null;
+  /**
+   * Callback fired on focused view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+### TimeClockSlotProps
+
+```typescript
+type TimeClockSlotProps = {
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'style'
+            | 'className'
+            | 'classes'
+            | 'children'
+            | 'sx'
+            | 'color'
+            | 'fontSize'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'shapeRendering'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+};
+```
+
+### TimeClockSlots
+
+```typescript
+type TimeClockSlots = {
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### Meridiem
+
+```typescript
+type Meridiem = 'am' | 'pm';
+```
diff --git a/docs/pages/x/api/date-pickers/types.time-clock.ts b/docs/pages/x/api/date-pickers/types.time-clock.ts
new file mode 100644
index 0000000000000..e9225651a01aa
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-clock.ts
@@ -0,0 +1,4 @@
+import { TimeClock } from '@mui/x-date-pickers/TimeClock';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimeClock = createTypes(import.meta.url, TimeClock);
diff --git a/docs/pages/x/api/date-pickers/types.time-field.ts b/docs/pages/x/api/date-pickers/types.time-field.ts
new file mode 100644
index 0000000000000..0ea91e11f1e39
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-field.ts
@@ -0,0 +1,4 @@
+import { TimeField } from '@mui/x-date-pickers/TimeField';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimeField = createTypes(import.meta.url, TimeField);
diff --git a/docs/pages/x/api/date-pickers/types.time-picker-toolbar.ts b/docs/pages/x/api/date-pickers/types.time-picker-toolbar.ts
new file mode 100644
index 0000000000000..929c69a2cd958
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-picker-toolbar.ts
@@ -0,0 +1,4 @@
+import { TimePickerToolbar } from '@mui/x-date-pickers/TimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimePickerToolbar = createTypes(import.meta.url, TimePickerToolbar);
diff --git a/docs/pages/x/api/date-pickers/types.time-picker.ts b/docs/pages/x/api/date-pickers/types.time-picker.ts
new file mode 100644
index 0000000000000..fe5b23d670aa1
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-picker.ts
@@ -0,0 +1,4 @@
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimePicker = createTypes(import.meta.url, TimePicker);
diff --git a/docs/pages/x/api/date-pickers/types.time-range-picker-tabs.md b/docs/pages/x/api/date-pickers/types.time-range-picker-tabs.md
new file mode 100644
index 0000000000000..0be9d80c660f9
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-range-picker-tabs.md
@@ -0,0 +1,1836 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.time-range-picker-tabs.md'
+
+## API Reference
+
+### getTimeRangePickerTabsUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### TimeRangePicker
+
+Demos:
+
+- [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [TimeRangePicker API](https://mui.com/x/api/date-pickers/time-range-picker/)
+
+**TimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                             | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                    | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                            | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                            | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| closeOnSelect                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| defaultRangePosition                     | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery                    | `string`                                                                                             | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                            | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| localeText                               | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxTime                                  | `any`                                                                                                | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minTime                                  | `any`                                                                                                | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                             | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: TimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onOpen                                   | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: TimeViewWithMeridiem) => void)`                                                             | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `TimeView`                                                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| selectedSections                         | `FieldSelectedSections`                                                                              | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                          | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| skipDisabled                             | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `TimeRangePickerSlotProps`                                                                           | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `TimeRangePickerSlots`                                                                               | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                             | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                    | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `TimeViewWithMeridiem`                                                                               | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `TimeRangePickerRenderers`                                                                           | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be the used.                                                                                                                                                                                                                                                               |
+| views                                    | `TimeView[]`                                                                                         | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                             | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### TimeRangePickerTabs
+
+Demos:
+
+- [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
+- [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [TimeRangePickerTabs API](https://mui.com/x/api/date-pickers/time-range-picker-tabs/)
+
+**TimeRangePickerTabs Props:**
+
+| Prop      | Type                                  | Default                                                                                                                                                       | Description                                                                             |
+| :-------- | :------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                             | `` `window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<TimeRangePickerTabsClasses>` | -                                                                                                                                                             | Override or extend the styles applied to the component.                                 |
+| sx        | `SxProps<Theme>`                      | -                                                                                                                                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `ReactElement`                        | `Time`                                                                                                                                                        | Time tab icon.                                                                          |
+| className | `string`                              | -                                                                                                                                                             | -                                                                                       |
+
+### TimeRangePickerToolbar
+
+**TimeRangePickerToolbar Props:**
+
+| Prop               | Type                                     | Default                                       | Description                                                                             |
+| :----------------- | :--------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm\*             | `boolean`                                | -                                             | -                                                                                       |
+| classes            | `Partial<TimeRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                         | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                 | -                                             | -                                                                                       |
+| toolbarPlaceholder | `React.ReactNode`                        | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                 | -                                             | -                                                                                       |
+
+## Additional Types
+
+### ExportedTimeRangePickerTabsProps
+
+```typescript
+type ExportedTimeRangePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: ReactElement;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<TimeRangePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### TimeRangePickerProps
+
+```typescript
+type TimeRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers?: TimeRangePickerRenderers;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /** Available views. */
+  views?: TimeView[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeView;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+};
+```
+
+### TimeRangePickerSlotProps
+
+```typescript
+type TimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedTimeRangePickerToolbarProps;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### TimeRangePickerSlots
+
+```typescript
+type TimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between start and end time.
+   * @default TimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    TimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimeRangePickerToolbar
+   */
+  Toolbar?: React.JSXElementConstructor<TimeRangePickerToolbarProps>;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### timeRangePickerTabsClasses
+
+```typescript
+type timeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab element. */
+  tab: string;
+};
+```
+
+### TimeRangePickerTabsClasses
+
+```typescript
+type TimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab element. */
+  tab: string;
+};
+```
+
+### TimeRangePickerTabsClassKey
+
+```typescript
+type TimeRangePickerTabsClassKey = 'root' | 'tab';
+```
+
+### timeRangePickerToolbarClasses
+
+```typescript
+type timeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+};
+```
+
+### TimeRangePickerToolbarClasses
+
+```typescript
+type TimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+};
+```
+
+### TimeRangePickerToolbarClassKey
+
+```typescript
+type TimeRangePickerToolbarClassKey = 'root' | 'container' | 'separator' | 'timeContainer';
+```
+
+### TimeRangePickerToolbarProps
+
+```typescript
+type TimeRangePickerToolbarProps = {
+  ampm: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  titleId?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<TimeRangePickerToolbarClasses>;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.time-range-picker-tabs.ts b/docs/pages/x/api/date-pickers/types.time-range-picker-tabs.ts
new file mode 100644
index 0000000000000..a1ce056e84e52
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-range-picker-tabs.ts
@@ -0,0 +1,4 @@
+import { TimeRangePickerTabs } from '@mui/x-date-pickers-pro/TimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimeRangePickerTabs = createTypes(import.meta.url, TimeRangePickerTabs);
diff --git a/docs/pages/x/api/date-pickers/types.time-range-picker-toolbar.md b/docs/pages/x/api/date-pickers/types.time-range-picker-toolbar.md
new file mode 100644
index 0000000000000..f5285b3fd383e
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-range-picker-toolbar.md
@@ -0,0 +1,1836 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.time-range-picker-toolbar.md'
+
+## API Reference
+
+### getTimeRangePickerTabsUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### TimeRangePicker
+
+Demos:
+
+- [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
+- [Validation](https://mui.com/x/react-date-pickers/validation/)
+
+API:
+
+- [TimeRangePicker API](https://mui.com/x/api/date-pickers/time-range-picker/)
+
+**TimeRangePicker Props:**
+
+| Prop                                     | Type                                                                                                 | Default                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------------------------- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name                                     | `string`                                                                                             | -                                                                                                        | Name attribute used by the `input` element in the Field.                                                                                                                                                                                                                                                                                                                                                                            |
+| label                                    | `React.ReactNode`                                                                                    | -                                                                                                        | The label content.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| defaultValue                             | `PickerRangeValue`                                                                                   | -                                                                                                        | The default value.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                                                   |
+| value                                    | `PickerRangeValue`                                                                                   | -                                                                                                        | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                                                                                                                                                                                                                      |
+| open                                     | `boolean`                                                                                            | `false`                                                                                                  | Control the popup or dialog open state.                                                                                                                                                                                                                                                                                                                                                                                             |
+| ampm                                     | `boolean`                                                                                            | `adapter.is12HourCycleInCurrentLocale()`                                                                 | 12h/24h view for hour selection clock.                                                                                                                                                                                                                                                                                                                                                                                              |
+| closeOnSelect                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the Picker will close after submitting the full date.                                                                                                                                                                                                                                                                                                                                                                    |
+| defaultRangePosition                     | `RangePosition`                                                                                      | `'start'`                                                                                                | The initial position in the edited date range.&#xA;Used when the component is not controlled.                                                                                                                                                                                                                                                                                                                                       |
+| desktopModeMediaQuery                    | `string`                                                                                             | `'@media (pointer: fine)'`                                                                               | CSS media query when `Mobile` mode will be changed to `Desktop`.                                                                                                                                                                                                                                                                                                                                                                    |
+| disableFuture                            | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                   |
+| disableIgnoringDatePartForTimeValidation | `boolean`                                                                                            | `false`                                                                                                  | Do not ignore date part when validating min/max time.                                                                                                                                                                                                                                                                                                                                                                               |
+| disableOpenPicker                        | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the button to open the Picker will not be rendered (it will only render the field).                                                                                                                                                                                                                                                                                                                                      |
+| disablePast                              | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                                                                                                                                                                                                                                  |
+| formatDensity                            | `'dense' \| 'spacious'`                                                                              | `"dense"`                                                                                                | Density of the format when rendered in the input.&#xA;Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.                                                                                                                                                                                                                                                                    |
+| keepOpenDuringFieldFocus                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, keep the picker open when the value is edited from the field.&#xA;Useful to prevent the popper/dialog from closing while typing in the input.&#xA;This only affects changes with `source = "field"` and does not alter view interactions.                                                                                                                                                                                |
+| localeText                               | `PickersInputComponentLocaleText`                                                                    | -                                                                                                        | Locale for components texts.&#xA;Allows overriding texts coming from `LocalizationProvider` and `theme`.                                                                                                                                                                                                                                                                                                                            |
+| maxTime                                  | `any`                                                                                                | -                                                                                                        | Maximal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minTime                                  | `any`                                                                                                | -                                                                                                        | Minimal selectable time.&#xA;The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.                                                                                                                                                                                                                                                                                          |
+| minutesStep                              | `number`                                                                                             | `1`                                                                                                      | Step over minutes.                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| onAccept                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value is accepted.                                                                                                                                                                                                                                                                                                                                                                                          |
+| onChange                                 | `((value: PickerRangeValue, context: PickerChangeHandlerContext<TimeRangeValidationError>) => void)` | -                                                                                                        | Callback fired when the value changes.                                                                                                                                                                                                                                                                                                                                                                                              |
+| onClose                                  | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be closed.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onError                                  | `((error: TimeRangeValidationError, value: PickerRangeValue) => void)`                               | -                                                                                                        | Callback fired when the error associated with the current value changes.&#xA;When a validation error is detected, the `error` parameter contains a non-null value.&#xA;This can be used to render an appropriate form error.                                                                                                                                                                                                        |
+| onOpen                                   | `(() => void)`                                                                                       | -                                                                                                        | Callback fired when the popup requests to be opened.&#xA;Use in controlled mode (see `open`).                                                                                                                                                                                                                                                                                                                                       |
+| onRangePositionChange                    | `((rangePosition: RangePosition) => void)`                                                           | -                                                                                                        | Callback fired when the range position changes.                                                                                                                                                                                                                                                                                                                                                                                     |
+| onSelectedSectionsChange                 | `((newValue: FieldSelectedSections) => void)`                                                        | -                                                                                                        | Callback fired when the selected sections change.                                                                                                                                                                                                                                                                                                                                                                                   |
+| onViewChange                             | `((view: TimeViewWithMeridiem) => void)`                                                             | -                                                                                                        | Callback fired on view change.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| openTo                                   | `TimeView`                                                                                           | -                                                                                                        | The default visible view.&#xA;Used when the component view is not controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                         |
+| rangePosition                            | `RangePosition`                                                                                      | -                                                                                                        | The position in the currently edited date range.&#xA;Used when the component position is controlled.                                                                                                                                                                                                                                                                                                                                |
+| reduceAnimations                         | `boolean`                                                                                            | `` `@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13 `` | If `true`, disable heavy animations.                                                                                                                                                                                                                                                                                                                                                                                                |
+| referenceDate                            | `any`                                                                                                | ``The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.``  | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                                                                                                                                                                                                                             |
+| selectedSections                         | `FieldSelectedSections`                                                                              | -                                                                                                        | The currently selected sections.&#xA;This prop accepts four formats: If a number is provided, the section at this index will be selected.If a string of type `FieldSectionType` is provided, the first section with that name will be selected.If `"all"` is provided, all the sections will be selected.If `null` is provided, no section will be selected.&#xA;If not provided, the selected sections will be handled internally. |
+| shouldDisableTime                        | `((value: any, view: TimeView) => boolean)`                                                          | -                                                                                                        | Disable specific time.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| skipDisabled                             | `boolean`                                                                                            | `false`                                                                                                  | If `true`, disabled digital clock items will not be rendered.                                                                                                                                                                                                                                                                                                                                                                       |
+| slotProps                                | `TimeRangePickerSlotProps`                                                                           | `{}`                                                                                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                             |
+| slots                                    | `TimeRangePickerSlots`                                                                               | `{}`                                                                                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| sx                                       | `SxProps<Theme>`                                                                                     | -                                                                                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                             |
+| thresholdToRenderTimeInASingleColumn     | `number`                                                                                             | `24`                                                                                                     | Amount of time options below or at which the single column time renderer is used.                                                                                                                                                                                                                                                                                                                                                   |
+| timeSteps                                | `TimeStepOptions`                                                                                    | `{ hours: 1, minutes: 5, seconds: 5 }`                                                                   | The time steps between two time unit options.&#xA;For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.&#xA;When single column time renderer is used, only `timeSteps.minutes` will be used.                                                                                                                                                                         |
+| timezone                                 | `PickersTimezone`                                                                                    | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``                  | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used.                                                                                                                                                                                                      |
+| view                                     | `TimeViewWithMeridiem`                                                                               | -                                                                                                        | The visible view.&#xA;Used when the component view is controlled.&#xA;Must be a valid option from `views` list.                                                                                                                                                                                                                                                                                                                     |
+| viewRenderers                            | `TimeRangePickerRenderers`                                                                           | -                                                                                                        | Define custom view renderers for each section.&#xA;If `null`, the section will only have field editing.&#xA;If `undefined`, internally defined view will be the used.                                                                                                                                                                                                                                                               |
+| views                                    | `TimeView[]`                                                                                         | -                                                                                                        | Available views.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| format                                   | `string`                                                                                             | -                                                                                                        | Format of the date when rendered in the input(s).&#xA;Defaults to localized format based on the used `views`.                                                                                                                                                                                                                                                                                                                       |
+| autoFocus                                | `boolean`                                                                                            | -                                                                                                        | If `true`, the main element is focused during the first mount.&#xA;This main element is: the element chosen by the visible view if any (i.e: the selected day on the `day` view).the `input` element if there is a field rendered.                                                                                                                                                                                                  |
+| disabled                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                                                                                                                                                                                                                                |
+| readOnly                                 | `boolean`                                                                                            | `false`                                                                                                  | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                                                                                                                                                                                                                                |
+| inputRef                                 | `React.Ref<HTMLInputElement>`                                                                        | -                                                                                                        | Pass a ref to the `input` element.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| className                                | `string`                                                                                             | -                                                                                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+**`desktopModeMediaQuery` Prop Example:**
+
+```tsx
+'@media (min-width: 720px)' or theme.breakpoints.up("sm")
+```
+
+### TimeRangePickerTabs
+
+Demos:
+
+- [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
+- [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+
+API:
+
+- [TimeRangePickerTabs API](https://mui.com/x/api/date-pickers/time-range-picker-tabs/)
+
+**TimeRangePickerTabs Props:**
+
+| Prop      | Type                                  | Default                                                                                                                                                       | Description                                                                             |
+| :-------- | :------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- |
+| hidden    | `boolean`                             | `` `window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker` `` | Toggles visibility of the tabs allowing view switching.                                 |
+| classes   | `Partial<TimeRangePickerTabsClasses>` | -                                                                                                                                                             | Override or extend the styles applied to the component.                                 |
+| sx        | `SxProps<Theme>`                      | -                                                                                                                                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| timeIcon  | `ReactElement`                        | `Time`                                                                                                                                                        | Time tab icon.                                                                          |
+| className | `string`                              | -                                                                                                                                                             | -                                                                                       |
+
+### TimeRangePickerToolbar
+
+**TimeRangePickerToolbar Props:**
+
+| Prop               | Type                                     | Default                                       | Description                                                                             |
+| :----------------- | :--------------------------------------- | :-------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| hidden             | `boolean`                                | `` `true` for Desktop, `false` for Mobile. `` | If `true`, show the toolbar even in desktop mode.                                       |
+| ampm\*             | `boolean`                                | -                                             | -                                                                                       |
+| classes            | `Partial<TimeRangePickerToolbarClasses>` | -                                             | Override or extend the styles applied to the component.                                 |
+| sx                 | `SxProps<Theme>`                         | -                                             | The system prop that allows defining system overrides as well as additional CSS styles. |
+| titleId            | `string`                                 | -                                             | -                                                                                       |
+| toolbarPlaceholder | `React.ReactNode`                        | `"––"`                                        | Toolbar value placeholder—it is displayed when the value is empty.                      |
+| className          | `string`                                 | -                                             | -                                                                                       |
+
+## Additional Types
+
+### ExportedTimeRangePickerTabsProps
+
+```typescript
+type ExportedTimeRangePickerTabsProps = {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: ReactElement;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<TimeRangePickerTabsClasses>;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### TimeRangePickerProps
+
+```typescript
+type TimeRangePickerProps = {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers?: TimeRangePickerRenderers;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeSteps.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeSteps.minutes` will be used.
+   * @default { hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+  /**
+   * Callback fired when the value changes.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onChange?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * Callback fired on view change.
+   * @template Type of the view. It will vary based on the Picker type and the `views` it uses.
+   */
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view?: TimeViewWithMeridiem;
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * Locale for components texts.
+   * Allows overriding texts coming from `LocalizationProvider` and `theme`.
+   */
+  localeText?: PickersInputComponentLocaleText;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * Callback fired when the value is accepted.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onAccept?: (
+    value: PickerRangeValue,
+    context: PickerChangeHandlerContext<TimeRangeValidationError>,
+  ) => void;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
+   */
+  referenceDate?: any;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   */
+  onError?: (error: TimeRangeValidationError, value: PickerRangeValue) => void;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Minimal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  minTime?: any;
+  /**
+   * Maximal selectable time.
+   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
+   */
+  maxTime?: any;
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep?: number;
+  /**
+   * Disable specific time.
+   * @returns If `true` the time will be disabled.
+   */
+  shouldDisableTime?: (value: any, view: TimeView) => boolean;
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation?: boolean;
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default adapter.is12HourCycleInCurrentLocale()
+   */
+  ampm?: boolean;
+  /** Available views. */
+  views?: TimeView[];
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo?: TimeView;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * If `true`, keep the picker open when the value is edited from the field.
+   * Useful to prevent the popper/dialog from closing while typing in the input.
+   * This only affects changes with `source = "field"` and does not alter view interactions.
+   * @default false
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Control the popup or dialog open state.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Callback fired when the popup requests to be closed.
+   * Use in controlled mode (see `open`).
+   */
+  onClose?: () => void;
+  /**
+   * Callback fired when the popup requests to be opened.
+   * Use in controlled mode (see `open`).
+   */
+  onOpen?: () => void;
+  /**
+   * Format of the date when rendered in the input(s).
+   * Defaults to localized format based on the used `views`.
+   */
+  format?: string;
+  /**
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @default false
+   * @deprecated Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead.
+   */
+  disableOpenPicker?: boolean;
+  /** The label content. */
+  label?: React.ReactNode;
+  /** Pass a ref to the `input` element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Name attribute used by the `input` element in the Field. */
+  name?: string;
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity?: 'dense' | 'spacious';
+  /**
+   * The currently selected sections.
+   * This prop accepts four formats:
+   * 1. If a number is provided, the section at this index will be selected.
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
+   * If not provided, the selected sections will be handled internally.
+   */
+  selectedSections?: FieldSelectedSections;
+  /** Callback fired when the selected sections change. */
+  onSelectedSectionsChange?: (newValue: FieldSelectedSections) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /** Callback fired when the range position changes. */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled?: boolean;
+};
+```
+
+### TimeRangePickerSlotProps
+
+```typescript
+type TimeRangePickerSlotProps = {
+  /** Props passed down to the tabs component. */
+  tabs?: ExportedTimeRangePickerTabsProps;
+  /** Props passed down to the toolbar component. */
+  toolbar?: ExportedTimeRangePickerToolbarProps;
+  previousIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  nextIconButton?: SlotComponentProps<
+    ExtendButtonBase<IconButtonTypeMap>,
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickersArrowSwitcherOwnerState
+  >;
+  leftArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  rightArrowIcon?: SlotComponentProps<
+    | (<RootComponent extends React.ElementType>(
+        props: __type &
+          SvgIconOwnProps &
+          CommonProps &
+          DistributiveOmit<
+            React.ComponentPropsWithRef<RootComponent>,
+            | 'className'
+            | 'sx'
+            | 'style'
+            | 'classes'
+            | 'color'
+            | 'fontSize'
+            | 'shapeRendering'
+            | 'children'
+            | 'htmlColor'
+            | 'inheritViewBox'
+            | 'titleAccess'
+            | 'viewBox'
+          >,
+      ) => React.JSX.Element | null)
+    | ((props: DefaultComponentProps<SvgIconTypeMap>) => React.JSX.Element | null),
+    PickersArrowSwitcherSlotPropsOverrides,
+    PickerOwnerState
+  >;
+  digitalClockItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    DigitalClockOwnerState
+  >;
+  digitalClockSectionItem?: SlotComponentProps<
+    ExtendButtonBase<MenuItemTypeMap>,
+    {},
+    Record<string, any>
+  >;
+  field?: SlotComponentPropsFromProps<PickerRangeFieldSlotProps, {}, PickerOwnerState>;
+  /** Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component. */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /** Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component. */
+  desktopTransition?: Partial<TransitionProps>;
+  /** Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop. */
+  desktopTrapFocus?: Partial<FocusTrapProps>;
+  /** Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerOwnerState>;
+  /** Props passed down to the action bar component. */
+  actionBar?: SlotComponentProps<
+    React.MemoExoticComponent<PickersActionBarComponent>,
+    {},
+    PickerLayoutOwnerState
+  >;
+  /** Props passed down to the shortcuts component. */
+  shortcuts?: SlotComponentProps<PickersShortcuts, {}, PickerLayoutOwnerState>;
+  /** Props passed down to the layoutRoot component. */
+  layout?: Partial<PickersLayoutProps<PickerRangeValue>>;
+  openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  openPickerIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps, {}, FieldOwnerState>;
+  inputAdornment?: SlotComponentPropsFromProps<
+    InputAdornmentProps,
+    {},
+    FieldInputAdornmentOwnerState
+  >;
+  clearButton?: SlotComponentPropsFromProps<IconButtonProps, {}, FieldOwnerState>;
+  clearIcon?: SlotComponentPropsFromProps<SvgIconProps, {}, FieldOwnerState>;
+  /** Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component. */
+  dialog?: Partial<DialogProps>;
+  /** Props passed down to the mobile [Paper](https://mui.com/material-ui/api/paper/) component. */
+  mobilePaper?: Partial<PaperProps>;
+  /** Props passed down to the mobile [Transition](https://mui.com/material-ui/transitions/) component. */
+  mobileTransition?: Partial<TransitionProps>;
+};
+```
+
+### TimeRangePickerSlots
+
+```typescript
+type TimeRangePickerSlots = {
+  /**
+   * Tabs enabling toggling between start and end time.
+   * @default TimeRangePickerTabs
+   */
+  tabs?: React.ElementType<
+    TimeRangePickerTabsProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimeRangePickerToolbar
+   */
+  Toolbar?: React.JSXElementConstructor<TimeRangePickerToolbarProps>;
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+  /**
+   * Component responsible for rendering a single digital clock item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
+  /**
+   * Component responsible for rendering a single multi section digital clock section item.
+   * @default MenuItem from '@mui/material'
+   */
+  digitalClockSectionItem?: React.ElementType;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<TransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<FocusTrapProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<
+    PopperProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the action bar, it is placed below the Picker views.
+   * @default PickersActionBar
+   */
+  actionBar?: React.ElementType<
+    PickersActionBarProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the shortcuts.
+   * @default PickersShortcuts
+   */
+  shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<PickerRangeValue>>;
+  /**
+   * Custom component for wrapping the layout.
+   * It wraps the toolbar, views, action bar, and shortcuts.
+   */
+  layout?: React.JSXElementConstructor<
+    PickersLayoutProps<PickerRangeValue> & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * Button to open the Picker.
+   * @default IconButton
+   */
+  openPickerButton?: React.ElementType<
+    IconButtonProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /** Icon to display in the button used to open the Picker. */
+  openPickerIcon?: React.ElementType;
+  /**
+   * Form control with an input to render the value.
+   * @default <PickersTextField />
+   */
+  textField?: React.ElementType;
+  /**
+   * Component displayed on the start or end input adornment used to open the Picker.
+   * @default InputAdornment
+   */
+  inputAdornment?: React.ElementType<
+    InputAdornmentProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+  /**
+   * Icon to display in the button used to clean the value.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /** Component used to enter the date with the keyboard. */
+  field?: React.ElementType;
+  /**
+   * Custom component for the dialog inside which the views are rendered on mobile.
+   * @default PickersModalDialogRoot
+   */
+  dialog?: React.ElementType<
+    DialogProps,
+    | 'symbol'
+    | 'object'
+    | 'view'
+    | 'label'
+    | 'dialog'
+    | 'a'
+    | 'abbr'
+    | 'address'
+    | 'area'
+    | 'article'
+    | 'aside'
+    | 'audio'
+    | 'b'
+    | 'base'
+    | 'bdi'
+    | 'bdo'
+    | 'big'
+    | 'blockquote'
+    | 'body'
+    | 'br'
+    | 'button'
+    | 'canvas'
+    | 'caption'
+    | 'center'
+    | 'cite'
+    | 'code'
+    | 'col'
+    | 'colgroup'
+    | 'data'
+    | 'datalist'
+    | 'dd'
+    | 'del'
+    | 'details'
+    | 'dfn'
+    | 'div'
+    | 'dl'
+    | 'dt'
+    | 'em'
+    | 'embed'
+    | 'fieldset'
+    | 'figcaption'
+    | 'figure'
+    | 'footer'
+    | 'form'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'head'
+    | 'header'
+    | 'hgroup'
+    | 'hr'
+    | 'html'
+    | 'i'
+    | 'iframe'
+    | 'img'
+    | 'input'
+    | 'ins'
+    | 'kbd'
+    | 'keygen'
+    | 'legend'
+    | 'li'
+    | 'link'
+    | 'main'
+    | 'map'
+    | 'mark'
+    | 'menu'
+    | 'menuitem'
+    | 'meta'
+    | 'meter'
+    | 'nav'
+    | 'noindex'
+    | 'noscript'
+    | 'ol'
+    | 'optgroup'
+    | 'option'
+    | 'output'
+    | 'p'
+    | 'param'
+    | 'picture'
+    | 'pre'
+    | 'progress'
+    | 'q'
+    | 'rp'
+    | 'rt'
+    | 'ruby'
+    | 's'
+    | 'samp'
+    | 'search'
+    | 'slot'
+    | 'script'
+    | 'section'
+    | 'select'
+    | 'small'
+    | 'source'
+    | 'span'
+    | 'strong'
+    | 'style'
+    | 'sub'
+    | 'summary'
+    | 'sup'
+    | 'table'
+    | 'template'
+    | 'tbody'
+    | 'td'
+    | 'textarea'
+    | 'tfoot'
+    | 'th'
+    | 'thead'
+    | 'time'
+    | 'title'
+    | 'tr'
+    | 'track'
+    | 'u'
+    | 'ul'
+    | 'var'
+    | 'video'
+    | 'wbr'
+    | 'webview'
+    | 'svg'
+    | 'animate'
+    | 'animateMotion'
+    | 'animateTransform'
+    | 'circle'
+    | 'clipPath'
+    | 'defs'
+    | 'desc'
+    | 'ellipse'
+    | 'feBlend'
+    | 'feColorMatrix'
+    | 'feComponentTransfer'
+    | 'feComposite'
+    | 'feConvolveMatrix'
+    | 'feDiffuseLighting'
+    | 'feDisplacementMap'
+    | 'feDistantLight'
+    | 'feDropShadow'
+    | 'feFlood'
+    | 'feFuncA'
+    | 'feFuncB'
+    | 'feFuncG'
+    | 'feFuncR'
+    | 'feGaussianBlur'
+    | 'feImage'
+    | 'feMerge'
+    | 'feMergeNode'
+    | 'feMorphology'
+    | 'feOffset'
+    | 'fePointLight'
+    | 'feSpecularLighting'
+    | 'feSpotLight'
+    | 'feTile'
+    | 'feTurbulence'
+    | 'filter'
+    | 'foreignObject'
+    | 'g'
+    | 'image'
+    | 'line'
+    | 'linearGradient'
+    | 'marker'
+    | 'mask'
+    | 'metadata'
+    | 'mpath'
+    | 'path'
+    | 'pattern'
+    | 'polygon'
+    | 'polyline'
+    | 'radialGradient'
+    | 'rect'
+    | 'set'
+    | 'stop'
+    | 'switch'
+    | 'text'
+    | 'textPath'
+    | 'tspan'
+    | 'use'
+  >;
+  /**
+   * Custom component for the paper rendered inside the mobile picker's Dialog.
+   * @default Paper from '@mui/material'.
+   */
+  mobilePaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/).
+   * @default Fade from '@mui/material'.
+   */
+  mobileTransition?: React.JSXElementConstructor<TransitionProps>;
+};
+```
+
+### timeRangePickerTabsClasses
+
+```typescript
+type timeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab element. */
+  tab: string;
+};
+```
+
+### TimeRangePickerTabsClasses
+
+```typescript
+type TimeRangePickerTabsClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab element. */
+  tab: string;
+};
+```
+
+### TimeRangePickerTabsClassKey
+
+```typescript
+type TimeRangePickerTabsClassKey = 'root' | 'tab';
+```
+
+### timeRangePickerToolbarClasses
+
+```typescript
+type timeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+};
+```
+
+### TimeRangePickerToolbarClasses
+
+```typescript
+type TimeRangePickerToolbarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+};
+```
+
+### TimeRangePickerToolbarClassKey
+
+```typescript
+type TimeRangePickerToolbarClassKey = 'root' | 'container' | 'separator' | 'timeContainer';
+```
+
+### TimeRangePickerToolbarProps
+
+```typescript
+type TimeRangePickerToolbarProps = {
+  ampm: boolean;
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden?: boolean;
+  titleId?: string;
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder?: React.ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<TimeRangePickerToolbarClasses>;
+};
+```
+
+## External Types
+
+### TimeView
+
+```typescript
+type TimeView = 'hours' | 'minutes' | 'seconds';
+```
+
+### RangePosition
+
+```typescript
+type RangePosition = 'start' | 'end';
+```
diff --git a/docs/pages/x/api/date-pickers/types.time-range-picker-toolbar.ts b/docs/pages/x/api/date-pickers/types.time-range-picker-toolbar.ts
new file mode 100644
index 0000000000000..44a1ecd1e296c
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-range-picker-toolbar.ts
@@ -0,0 +1,4 @@
+import { TimeRangePickerToolbar } from '@mui/x-date-pickers-pro/TimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimeRangePickerToolbar = createTypes(import.meta.url, TimeRangePickerToolbar);
diff --git a/docs/pages/x/api/date-pickers/types.time-range-picker.ts b/docs/pages/x/api/date-pickers/types.time-range-picker.ts
new file mode 100644
index 0000000000000..da13f193e99bc
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.time-range-picker.ts
@@ -0,0 +1,4 @@
+import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTimeRangePicker = createTypes(import.meta.url, TimeRangePicker);
diff --git a/docs/pages/x/api/date-pickers/types.year-calendar.md b/docs/pages/x/api/date-pickers/types.year-calendar.md
new file mode 100644
index 0000000000000..9519e8168aca2
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.year-calendar.md
@@ -0,0 +1,217 @@
+# Date Pickers
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/date-pickers/types.year-calendar.md'
+
+## API Reference
+
+### getYearCalendarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### YearCalendar
+
+Demos:
+
+- [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+
+API:
+
+- [YearCalendar API](https://mui.com/x/api/date-pickers/year-calendar/)
+
+**YearCalendar Props:**
+
+| Prop                  | Type                            | Default                                                                                              | Description                                                                                                                                                                                                                    |
+| :-------------------- | :------------------------------ | :--------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue          | `any \| null`                   | -                                                                                                    | The default selected value.&#xA;Used when the component is not controlled.                                                                                                                                                     |
+| value                 | `any \| null`                   | -                                                                                                    | The selected value.&#xA;Used when the component is controlled.                                                                                                                                                                 |
+| classes               | `Partial<YearCalendarClasses>`  | -                                                                                                    | Override or extend the styles applied to the component.                                                                                                                                                                        |
+| disableFuture         | `boolean`                       | `false`                                                                                              | If `true`, disable values after the current date for date components, time for time components and both for date time components.                                                                                              |
+| disableHighlightToday | `boolean`                       | `false`                                                                                              | If `true`, today's date is rendering without highlighting with circle.                                                                                                                                                         |
+| disablePast           | `boolean`                       | `false`                                                                                              | If `true`, disable values before the current date for date components, time for time components and both for date time components.                                                                                             |
+| gridLabelId           | `string`                        | -                                                                                                    | -                                                                                                                                                                                                                              |
+| hasFocus              | `boolean`                       | -                                                                                                    | -                                                                                                                                                                                                                              |
+| maxDate               | `any`                           | `2099-12-31`                                                                                         | Maximal selectable date.                                                                                                                                                                                                       |
+| minDate               | `any`                           | `1900-01-01`                                                                                         | Minimal selectable date.                                                                                                                                                                                                       |
+| onChange              | `((value: any) => void)`        | -                                                                                                    | Callback fired when the value changes.                                                                                                                                                                                         |
+| onFocusedViewChange   | `((hasFocus: boolean) => void)` | -                                                                                                    | -                                                                                                                                                                                                                              |
+| onYearFocus           | `((year: number) => void)`      | -                                                                                                    | -                                                                                                                                                                                                                              |
+| referenceDate         | `any`                           | ``The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.`` | The date used to generate the new value when both `value` and `defaultValue` are empty.                                                                                                                                        |
+| shouldDisableYear     | `((year: any) => boolean)`      | -                                                                                                    | Disable specific year.                                                                                                                                                                                                         |
+| slotProps             | `YearCalendarSlotProps`         | `{}`                                                                                                 | The props used for each component slot.                                                                                                                                                                                        |
+| slots                 | `YearCalendarSlots`             | `{}`                                                                                                 | Overridable component slots.                                                                                                                                                                                                   |
+| sx                    | `SxProps<Theme>`                | -                                                                                                    | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                        |
+| timezone              | `PickersTimezone`               | ``The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.``              | Choose which timezone to use for the value.&#xA;Example: "default", "system", "UTC", "America/New_York".&#xA;If you pass values from other timezones to some props, they will be converted to this timezone before being used. |
+| yearsOrder            | `'asc' \| 'desc'`               | `'asc'`                                                                                              | Years are displayed in ascending (chronological) order by default.&#xA;If `desc`, years are displayed in descending order.                                                                                                     |
+| yearsPerRow           | `3 \| 4`                        | `3`                                                                                                  | Years rendered per row.                                                                                                                                                                                                        |
+| autoFocus             | `boolean`                       | -                                                                                                    | -                                                                                                                                                                                                                              |
+| disabled              | `boolean`                       | `false`                                                                                              | If `true`, the component is disabled.&#xA;When disabled, the value cannot be changed and no interaction is possible.                                                                                                           |
+| readOnly              | `boolean`                       | `false`                                                                                              | If `true`, the component is read-only.&#xA;When read-only, the value cannot be changed but the user can interact with the interface.                                                                                           |
+| className             | `string`                        | -                                                                                                    | -                                                                                                                                                                                                                              |
+
+## Additional Types
+
+### yearCalendarClasses
+
+```typescript
+type yearCalendarClasses = Record<'root' | 'button' | 'disabled' | 'selected', string>;
+```
+
+### YearCalendarClasses
+
+```typescript
+type YearCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the button element that represents a single year */
+  button: string;
+  /** Styles applied to a disabled button element. */
+  disabled: string;
+  /** Styles applied to a selected button element. */
+  selected: string;
+};
+```
+
+### YearCalendarClassKey
+
+```typescript
+type YearCalendarClassKey = 'root' | 'button' | 'disabled' | 'selected';
+```
+
+### YearCalendarProps
+
+```typescript
+type YearCalendarProps = {
+  autoFocus?: boolean;
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<YearCalendarClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: YearCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: YearCalendarSlotProps;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: any | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: any | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.
+   */
+  referenceDate?: any;
+  /** Callback fired when the value changes. */
+  onChange?: (value: any) => void;
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  onYearFocus?: (year: number) => void;
+  hasFocus?: boolean;
+  onFocusedViewChange?: (hasFocus: boolean) => void;
+  gridLabelId?: string;
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Years rendered per row.
+   * @default 3
+   */
+  yearsPerRow?: 3 | 4;
+  /**
+   * Disable specific year.
+   * @returns If `true`, the year will be disabled.
+   */
+  shouldDisableYear?: (year: any) => boolean;
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate?: any;
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate?: any;
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   * @see
+   */
+  timezone?: PickersTimezone;
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly?: boolean;
+};
+```
+
+### YearCalendarSlotProps
+
+```typescript
+type YearCalendarSlotProps = {
+  yearButton?: SlotComponentPropsFromProps<
+    React.HTMLAttributes<HTMLButtonElement> & { sx: SxProps },
+    {},
+    YearButtonOwnerState
+  >;
+};
+```
+
+### YearCalendarSlots
+
+```typescript
+type YearCalendarSlots = {
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+};
+```
diff --git a/docs/pages/x/api/date-pickers/types.year-calendar.ts b/docs/pages/x/api/date-pickers/types.year-calendar.ts
new file mode 100644
index 0000000000000..322adec453c31
--- /dev/null
+++ b/docs/pages/x/api/date-pickers/types.year-calendar.ts
@@ -0,0 +1,4 @@
+import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesYearCalendar = createTypes(import.meta.url, YearCalendar);
diff --git a/docs/pages/x/api/date-pickers/year-calendar.js b/docs/pages/x/api/date-pickers/year-calendar.js
index 900dc0ba37f0c..e425c8d704c9f 100644
--- a/docs/pages/x/api/date-pickers/year-calendar.js
+++ b/docs/pages/x/api/date-pickers/year-calendar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './year-calendar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesYearCalendar } from './types.year-calendar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['classes', 'defaultValue', 'disableFuture', 'disableHighlightToday', 'disablePast', 'disabled', 'maxDate', 'minDate', 'onChange', 'readOnly', 'referenceDate', 'shouldDisableYear', 'slotProps', 'slots', 'sx', 'timezone', 'value', 'yearsOrder', 'yearsPerRow'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/date-pickers/year-calendar',
-    false,
-    /\.\/year-calendar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="YearCalendar" allowedProps={allowedProps}>
+      <TypesYearCalendar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/page.mdx b/docs/pages/x/api/page.mdx
new file mode 100644
index 0000000000000..6fad5e09732a9
--- /dev/null
+++ b/docs/pages/x/api/page.mdx
@@ -0,0 +1,562 @@
+# Api
+
+[//]: # 'This section is autogenerated, but the following list order, title, and [Tag]s can be modified, but nothing within the parentheses.'
+
+- Date Pickers - ([Outline](#date-pickers), [Contents](./date-pickers/page.mdx))
+- Chat [New] - ([Outline](#chat), [Contents](./chat/page.mdx))
+- Scheduler [New] - ([Outline](#scheduler), [Contents](./scheduler/page.mdx))
+- Tree View [New] - ([Outline](#tree-view), [Contents](./tree-view/page.mdx))
+- Data Grid [New] - ([Outline](#data-grid), [Contents](./data-grid/page.mdx))
+- Charts [New] - ([Outline](#charts), [Contents](./charts/page.mdx))
+
+[//]: # 'This section is autogenerated, DO NOT EDIT AFTER THIS LINE, run: pnpm docs:validate pages/x/api'
+
+## Date Pickers
+
+No description available
+
+<details>
+
+<summary>Outline</summary>
+
+- Exports:
+  - getYearCalendarUtilityClass
+    - Parameters: slot
+  - YearCalendar
+    - Props: autoFocus, className, classes, defaultValue, disableFuture, disableHighlightToday, disablePast, disabled, gridLabelId, hasFocus, maxDate, minDate, onChange, onFocusedViewChange, onYearFocus, readOnly, referenceDate, shouldDisableYear, slotProps, slots, sx, timezone, value, yearsOrder, yearsPerRow
+- Types: YearCalendarClassKey, YearCalendarClasses, YearCalendarProps, YearCalendarSlotProps, YearCalendarSlots, yearCalendarClasses
+
+</details>
+
+[Read more](./date-pickers/page.mdx)
+
+## Chat
+
+No description available
+
+<details>
+
+<summary>Outline</summary>
+
+- Exports:
+  - ChatDensityProvider
+    - Props: children, density
+  - ChatLayout
+    - Props: children, slotProps, slots
+  - ChatOnData
+    - Parameters: part
+  - ChatOnFinish
+    - Parameters: payload
+  - ChatOnToolCall
+    - Parameters: payload
+  - ChatPartRenderer
+    - Props: index, message, onToolCall, part
+  - ChatProvider
+    - Props: activeConversationId, adapter, children, composerValue, conversations, currentUser, initialActiveConversationId, initialComposerValue, initialConversations, initialMessages, members, messages, onActiveConversationChange, onComposerValueChange, onConversationsChange, onData, onError, onFinish, onMessagesChange, onToolCall, partRenderers, storeClass, streamFlushInterval
+  - ChatRoot
+    - Props: activeConversationId, adapter, children, composerValue, conversations, currentUser, density, initialActiveConversationId, initialComposerValue, initialConversations, initialMessages, localeText, members, messages, onActiveConversationChange, onComposerValueChange, onConversationsChange, onData, onError, onFinish, onMessagesChange, onToolCall, partRenderers, slotProps, slots, storeClass, streamFlushInterval, variant
+  - ChatStreamError
+    - Parameters: chatError
+  - ChatVariantProvider
+    - Props: children, variant
+  - ComposerAttachButton
+    - Props: slotProps, slots
+  - ComposerAttachmentList
+    - Props: slotProps, slots
+  - ComposerHelperText
+    - Props: slotProps, slots
+  - ComposerLabel
+    - Props: children, htmlFor, slotProps, slots
+  - ComposerRoot
+    - Props: attachmentConfig, disabled, slotProps, slots
+  - ComposerSendButton
+    - Props: slotProps, slots
+  - ComposerTextArea
+    - Props: slotProps, slots
+  - ComposerToolbar
+    - Props: slotProps, slots
+  - ConversationHeader
+    - Props: children, slotProps, slots
+  - ConversationHeaderActions
+    - Props: children, slotProps, slots
+  - ConversationHeaderInfo
+    - Props: children, slotProps, slots
+  - ConversationListItem
+    - Props: children, conversation, focused, selected, slotProps, slots, unread
+  - ConversationListItemActions
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationListItemAvatar
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationListItemContent
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationListPreview
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationListRoot
+    - Props: slotProps, slots, variant
+  - ConversationListTimestamp
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationListTitle
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationListUnreadBadge
+    - Props: conversation, focused, selected, slotProps, slots, unread
+  - ConversationRoot
+    - Props: children, slotProps, slots
+  - ConversationSubtitle
+    - Props: slotProps, slots
+  - ConversationTitle
+    - Props: slotProps, slots
+  - createFilePartRenderer
+    - Parameters: defaultProps
+  - createReasoningPartRenderer
+    - Parameters: defaultProps
+  - createSourceDocumentPartRenderer
+    - Parameters: defaultProps
+  - createSourceUrlPartRenderer
+    - Parameters: defaultProps
+  - createTimeWindowGroupKey
+    - Parameters: windowMs
+  - createToolPartRenderer
+    - Parameters: defaultProps
+  - FilePart
+    - Props: className, index, message, onToolCall, part, slotProps, slots
+  - getDefaultMessagePartRenderer
+    - Parameters: part
+  - GroupKeyFn
+    - Parameters: message
+  - MessageActions
+    - Props: slotProps, slots
+  - MessageActionsMenuGroup
+  - MessageActionsMenuGroupLabel
+  - MessageActionsMenuItem
+  - MessageActionsMenuPopup
+  - MessageActionsMenuPositioner
+  - MessageActionsMenuRoot
+  - MessageActionsMenuTrigger
+  - MessageAuthorLabel
+    - Props: slotProps, slots
+  - MessageAvatar
+    - Props: slotProps, slots
+  - MessageContent
+    - Props: afterContent, partProps, resolveBuiltInPartRenderer, slotProps, slots
+  - MessageGroup
+    - Props: children, groupKey, index, items, messageId, slotProps, slots
+  - MessageListDateDivider
+    - Props: formatDate, index, items, messageId, slotProps, slots
+  - MessageListRoot
+    - Props: autoScroll, estimatedItemSize, getItemKey, items, onReachTop, overlay, renderItem, slotProps, slots
+  - MessageMeta
+    - Props: slotProps, slots
+  - MessageRoot
+    - Props: isGrouped, messageId, slotProps, slots
+  - ReasoningPart
+    - Props: className, index, message, onToolCall, part, slotProps, slots
+  - ScrollToBottomAffordance
+    - Props: scrollBehavior, slotProps, slots
+  - selectActiveConversation
+    - Parameters: args
+  - selectActiveConversationId
+    - Parameters: args
+  - selectComposerAttachments
+    - Parameters: args
+  - selectComposerValue
+    - Parameters: args
+  - selectConversation
+    - Parameters: args
+  - selectConversationCount
+    - Parameters: args
+  - selectConversationIds
+    - Parameters: args
+  - selectConversations
+    - Parameters: args
+  - selectConversationsById
+    - Parameters: args
+  - selectError
+    - Parameters: args
+  - selectHasMoreHistory
+    - Parameters: args
+  - selectIsStreaming
+    - Parameters: args
+  - selectMessage
+    - Parameters: args
+  - selectMessageCount
+    - Parameters: args
+  - selectMessageIds
+    - Parameters: args
+  - selectMessages
+    - Parameters: args
+  - selectMessagesById
+    - Parameters: args
+  - selectTypingUserIds
+    - Parameters: args
+  - selectTypingUserIdsForActiveConversation
+    - Parameters: args
+  - SourceDocumentPart
+    - Props: className, index, message, onToolCall, part, slotProps, slots
+  - SourceUrlPart
+    - Props: className, index, message, onToolCall, part, slotProps, slots
+  - SuggestionItem
+    - Props: children, index, label, slotProps, slots, value
+  - SuggestionsRoot
+    - Props: autoSubmit, children, slotProps, slots, suggestions
+  - ToolPart
+    - Props: className, index, message, onToolCall, part, slotProps, slots, toolSlotProps, toolSlots
+  - TypingIndicator
+    - Props: slotProps, slots
+  - UnreadMarker
+    - Props: index, items, label, messageId, slotProps, slots
+  - useChat
+  - useChatComposer
+  - useChatDensity
+  - useChatLocaleText
+  - useChatOnToolCall
+  - useChatPartRenderer
+    - Parameters: partType
+  - useChatStatus
+  - useChatStore
+  - useChatVariant
+  - useComposerContext
+  - useConversation
+    - Parameters: id
+  - useConversations
+  - useMessage
+    - Parameters: id
+  - useMessageIds
+  - useMessageListContext
+- Types: Chat, ChatAdapter, ChatAddToolApproveResponseInput, ChatAttachmentRejection, ChatAttachmentRejectionReason, ChatAttachmentsConfig, ChatBuiltInMessagePart, ChatConversation, ChatCustomMessagePart, ChatDataMessagePart, ChatDataPartType, ChatDateTimeString, ChatDensity, ChatDraftAttachment, ChatDraftAttachmentStatus, ChatDynamicToolInvocation, ChatDynamicToolMessagePart, ChatError, ChatErrorCode, ChatFileMessagePart, ChatLayoutOwnerState, ChatLayoutPaneOwnerState, ChatLayoutProps, ChatLayoutSlotProps, ChatLayoutSlots, ChatLocaleText, ChatLocaleTypingUser, ChatMessage, ChatMessageChunk, ChatMessagePart, ChatMessagePartStatus, ChatMessageStatus, ChatOnFinishPayload, ChatOnToolCallPayload, ChatPartRendererMap, ChatPartRendererProps, ChatProviderProps, ChatPublicState, ChatRealtimeEvent, ChatReasoningMessagePart, ChatRole, ChatRootOwnerState, ChatRootProps, ChatRootSlotProps, ChatRootSlots, ChatSourceDocumentMessagePart, ChatSourceUrlMessagePart, ChatStepStartMessagePart, ChatStreamEnvelope, ChatSuggestion, ChatTextMessagePart, ChatToolApproval, ChatToolInvocation, ChatToolInvocationState, ChatToolMessagePart, ChatUser, ChatVariant, Composer, ComposerAttachButtonOwnerState, ComposerAttachButtonProps, ComposerAttachButtonSlotProps, ComposerAttachButtonSlots, ComposerAttachmentListOwnerState, ComposerAttachmentListProps, ComposerAttachmentListSlotProps, ComposerAttachmentListSlots, ComposerHelperTextOwnerState, ComposerHelperTextProps, ComposerHelperTextSlotProps, ComposerHelperTextSlots, ComposerLabelProps, ComposerLabelSlotProps, ComposerLabelSlots, ComposerOwnerState, ComposerRootOwnerState, ComposerRootProps, ComposerRootSlotProps, ComposerRootSlots, ComposerSendButtonOwnerState, ComposerSendButtonProps, ComposerSendButtonSlotProps, ComposerSendButtonSlots, ComposerTextAreaOwnerState, ComposerTextAreaProps, ComposerTextAreaSlotProps, ComposerTextAreaSlots, ComposerToolbarOwnerState, ComposerToolbarProps, ComposerToolbarSlotProps, ComposerToolbarSlots, Conversation, ConversationHeaderActionsOwnerState, ConversationHeaderActionsProps, ConversationHeaderActionsSlotProps, ConversationHeaderActionsSlots, ConversationHeaderInfoOwnerState, ConversationHeaderInfoProps, ConversationHeaderInfoSlotProps, ConversationHeaderInfoSlots, ConversationHeaderOwnerState, ConversationHeaderProps, ConversationHeaderSlotProps, ConversationHeaderSlots, ConversationList, ConversationListItemActionsOwnerState, ConversationListItemActionsProps, ConversationListItemActionsSlotProps, ConversationListItemActionsSlots, ConversationListItemAvatarOwnerState, ConversationListItemAvatarProps, ConversationListItemAvatarSlotProps, ConversationListItemAvatarSlots, ConversationListItemContentOwnerState, ConversationListItemContentProps, ConversationListItemContentSlotProps, ConversationListItemContentSlots, ConversationListItemOwnerState, ConversationListItemProps, ConversationListItemSlotProps, ConversationListItemSlots, ConversationListPreviewOwnerState, ConversationListPreviewProps, ConversationListPreviewSlotProps, ConversationListPreviewSlots, ConversationListRootOwnerState, ConversationListRootProps, ConversationListRootSlotProps, ConversationListRootSlots, ConversationListTimestampOwnerState, ConversationListTimestampProps, ConversationListTimestampSlotProps, ConversationListTimestampSlots, ConversationListTitleOwnerState, ConversationListTitleProps, ConversationListTitleSlotProps, ConversationListTitleSlots, ConversationListUnreadBadgeOwnerState, ConversationListUnreadBadgeProps, ConversationListUnreadBadgeSlotProps, ConversationListUnreadBadgeSlots, ConversationListVariant, ConversationOwnerState, ConversationReadState, ConversationRootOwnerState, ConversationRootProps, ConversationRootSlotProps, ConversationRootSlots, ConversationSubtitleOwnerState, ConversationSubtitleProps, ConversationSubtitleSlotProps, ConversationSubtitleSlots, ConversationTitleOwnerState, ConversationTitleProps, ConversationTitleSlotProps, ConversationTitleSlots, FilePartExternalProps, FilePartOwnerState, FilePartProps, FilePartSlotProps, FilePartSlots, Indicators, Message, MessageActionsMenu, MessageActionsMenuGroupLabelProps, MessageActionsMenuGroupProps, MessageActionsMenuItemProps, MessageActionsMenuPopupProps, MessageActionsMenuPositionerProps, MessageActionsMenuRootProps, MessageActionsMenuTriggerProps, MessageActionsOwnerState, MessageActionsProps, MessageActionsSlotProps, MessageActionsSlots, MessageAuthorLabelOwnerState, MessageAuthorLabelProps, MessageAuthorLabelSlotProps, MessageAuthorLabelSlots, MessageAvatarOwnerState, MessageAvatarProps, MessageAvatarSlotProps, MessageAvatarSlots, MessageContentOwnerState, MessageContentPartProps, MessageContentProps, MessageContentSlotProps, MessageContentSlots, MessageGroupOwnerState, MessageGroupProps, MessageGroupSlotProps, MessageGroupSlots, MessageList, MessageListContextValue, MessageListDateDividerOwnerState, MessageListDateDividerProps, MessageListDateDividerSlotProps, MessageListDateDividerSlots, MessageListRootAutoScrollConfig, MessageListRootHandle, MessageListRootOwnerState, MessageListRootProps, MessageListRootSlotProps, MessageListRootSlots, MessageMetaOwnerState, MessageMetaProps, MessageMetaSlotProps, MessageMetaSlots, MessageOwnerState, MessageRootOwnerState, MessageRootProps, MessageRootSlotProps, MessageRootSlots, PaginationDirection, ReasoningPartExternalProps, ReasoningPartOwnerState, ReasoningPartProps, ReasoningPartSlotProps, ReasoningPartSlots, ScrollToBottomAffordanceOwnerState, ScrollToBottomAffordanceProps, ScrollToBottomAffordanceSlotProps, ScrollToBottomAffordanceSlots, SourceDocumentPartExternalProps, SourceDocumentPartOwnerState, SourceDocumentPartProps, SourceDocumentPartSlotProps, SourceDocumentPartSlots, SourceUrlPartExternalProps, SourceUrlPartOwnerState, SourceUrlPartProps, SourceUrlPartSlotProps, SourceUrlPartSlots, SuggestionItemOwnerState, SuggestionItemProps, SuggestionItemSlotProps, SuggestionItemSlots, SuggestionsRootOwnerState, SuggestionsRootProps, SuggestionsRootSlotProps, SuggestionsRootSlots, ToolPartExternalProps, ToolPartOwnerState, ToolPartProps, ToolPartSectionOwnerState, ToolPartSlotProps, ToolPartSlots, TypingIndicatorOwnerState, TypingIndicatorProps, TypingIndicatorSlotProps, TypingIndicatorSlots, UnreadMarkerOwnerState, UnreadMarkerProps, UnreadMarkerSlotProps, UnreadMarkerSlots, UseChatSendMessageInput, chatSelectors
+
+</details>
+
+[Read more](./chat/page.mdx)
+
+## Scheduler
+
+No description available
+
+<details>
+
+<summary>Outline</summary>
+
+- Exports:
+  - AgendaView
+  - StandaloneAgendaView
+    - Props: areEventsDraggable, areEventsResizable, canDragEventsFromTheOutside, canDropEventsToTheOutside, dataSource, dateLocale, defaultPreferences, defaultView, defaultVisibleDate, defaultVisibleResources, displayTimezone, eventColor, eventCreation, eventModelStructure, events, onEventsChange, onPreferencesChange, onViewChange, onVisibleDateChange, onVisibleResourcesChange, preferences, preferencesMenuConfig, readOnly, resourceModelStructure, resources, showCurrentTimeIndicator, sx, view, views, visibleDate, visibleResources
+
+</details>
+
+[Read more](./scheduler/page.mdx)
+
+## Tree View
+
+No description available
+
+<details>
+
+<summary>Outline</summary>
+
+- Exports:
+  - TreeItemProvider
+    - Props: children, id, itemId
+- Types: TreeItemProviderProps
+
+</details>
+
+[Read more](./tree-view/page.mdx)
+
+## Data Grid
+
+No description available
+
+<details>
+
+<summary>Outline</summary>
+
+- Exports:
+  - ColumnsPanelTrigger
+    - Props: children, className, disabled, id, material, render, role, size, startIcon, style, tabIndex, title, touchRippleRef
+  - ExportCsv
+    - Props: children, className, disabled, id, material, options, render, role, size, startIcon, style, tabIndex, title, touchRippleRef
+  - ExportPrint
+    - Props: children, className, disabled, id, material, options, render, role, size, startIcon, style, tabIndex, title, touchRippleRef
+  - FilterPanelTrigger
+    - Props: children, className, disabled, id, material, render, role, size, startIcon, style, tabIndex, title, touchRippleRef
+  - GridActionsCell
+    - Props: api, cellMode, children, colDef, field, formattedValue, hasFocus, id, isEditable, onMenuClose, onMenuOpen, position, row, rowNode, suppressChildrenValidation, tabIndex, value
+  - GridActionsCellItem
+    - Props: autoFocus, children, className, closeMenu, closeMenuOnClick, color, component, disabled, edge, icon, iconEnd, iconStart, id, inert, label, material, role, selected, showInMenu, size, style, tabIndex, title, touchRippleRef, value
+  - GridAddIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridArrowDownwardIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridArrowUpwardIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridBody
+    - Props: children
+  - GridBooleanCell
+    - Props: api, cellMode, colDef, field, formattedValue, hasFocus, hideDescendantCount, id, isEditable, row, rowNode, tabIndex, value
+  - GridCell
+    - Props: align, children, className, colIndex, colSpan, column, disableDragEvents, isNotVisible, onClick, onDoubleClick, onDragEnter, onDragOver, onFocus, onKeyDown, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseOver, onMouseUp, pinnedOffset, pinnedPosition, row, rowId, rowNode, showLeftBorder, showRightBorder, style, width
+  - GridCellCheckboxForwardRef
+    - Props: api, cellMode, colDef, field, formattedValue, hasFocus, id, isEditable, row, rowNode, tabIndex, value
+  - GridCellCheckboxRenderer
+    - Props: api, cellMode, colDef, field, formattedValue, hasFocus, id, isEditable, row, rowNode, tabIndex, value
+  - GridCheckCircleIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridCheckIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridClearIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridCloseIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridColumnHeaderFilterIconButton
+    - Props: counter, field, onClick
+  - GridColumnHeaderItem
+    - Props: colDef, colIndex, columnMenuOpen, disableReorder, filterItemsCounter, hasFocus, headerHeight, isDragging, isLast, isResizing, isSiblingFocused, pinnedOffset, pinnedPosition, separatorSide, showLeftBorder, showRightBorder, sortDirection, sortIndex, style, tabIndex
+  - GridColumnHeaderMenu
+    - Props: ContentComponent, columnMenuButtonId, columnMenuId, contentComponentProps, field, onExited, open, target
+  - GridColumnHeaderSeparator
+    - Props: height, resizable, resizing, side
+  - GridColumnHeaderSortIcon
+    - Props: children, className, color, direction, disabled, edge, field, id, index, label, material, onClick, role, size, sortingOrder, style, tabIndex, title, touchRippleRef
+  - GridColumnHeaderTitle
+    - Props: columnWidth, description, label
+  - GridColumnIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridColumnMenuColumnsItem
+    - Props: colDef, onClick
+  - GridColumnMenuContainer
+    - Props: colDef, hideMenu, id, labelledby, open
+  - GridColumnMenuFilterItem
+    - Props: colDef, onClick
+  - GridColumnMenuHideItem
+    - Props: colDef, onClick
+  - GridColumnMenuManageItem
+    - Props: colDef, onClick
+  - GridColumnMenuSortItem
+    - Props: colDef, onClick
+  - GridColumnsManagement
+    - Props: autoFocusSearchField, disableResetButton, disableShowHideToggle, getTogglableColumns, searchDebounceMs, searchInputProps, searchPredicate, sort, toggleAllMode
+  - GridColumnsPanel
+  - GridColumnUnsortedIcon
+    - Props: className, color, fontSize, sortingOrder, style, titleAccess
+  - GridCsvExportMenuItem
+    - Props: hideMenu, options
+  - GridDeleteForeverIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridDeleteIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridDownloadIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridDragIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridEditBooleanCell
+    - Props: api, cellMode, changeReason, colDef, field, formattedValue, hasFocus, id, isEditable, isProcessingProps, isValidating, onValueChange, row, rowNode, tabIndex, value
+  - GridEditDateCell
+    - Props: api, cellMode, changeReason, colDef, field, formattedValue, hasFocus, id, isEditable, isProcessingProps, isValidating, onValueChange, row, rowNode, slotProps, tabIndex, value
+  - GridEditInputCell
+    - Props: api, cellMode, changeReason, colDef, debounceMs, field, formattedValue, hasFocus, id, isEditable, isProcessingProps, isValidating, onValueChange, row, rowNode, slotProps, tabIndex, value
+  - GridEditLongTextCell
+    - Props: api, cellMode, changeReason, colDef, debounceMs, field, formattedValue, hasFocus, id, isEditable, isProcessingProps, isValidating, onValueChange, row, rowNode, slotProps, tabIndex, value
+  - GridEditSingleSelectCell
+    - Props: api, cellMode, changeReason, colDef, field, formattedValue, hasFocus, id, initialOpen, isEditable, isProcessingProps, isValidating, onValueChange, row, rowNode, tabIndex, value
+  - GridExpandMoreIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridFilterAltIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridFilterForm
+    - Props: applyFilterChanges, applyMultiFilterOperatorChanges, columnInputProps, columnsSort, deleteFilter, deleteIconProps, disableMultiFilterOperator, filterColumns, focusElementRef, hasMultipleFilters, item, logicOperatorInputProps, logicOperators, operatorInputProps, readOnly, showMultiFilterOperators, valueInputProps
+  - GridFilterInputBoolean
+    - Props: apiRef, applyValue, className, clearButton, disabled, focusElementRef, headerFilterMenu, inputRef, isFilterActive, item, onBlur, onFocus, slotProps, tabIndex
+  - GridFilterInputDate
+    - Props: apiRef, applyValue, className, clearButton, disabled, focusElementRef, headerFilterMenu, inputRef, isFilterActive, item, onBlur, onFocus, slotProps, tabIndex, type
+  - GridFilterInputMultipleSingleSelect
+    - Props: apiRef, applyValue, className, clearButton, disabled, focusElementRef, headerFilterMenu, inputRef, isFilterActive, item, onBlur, onFocus, slotProps, tabIndex, type
+  - GridFilterInputMultipleValue
+    - Props: apiRef, applyValue, className, clearButton, disabled, focusElementRef, headerFilterMenu, inputRef, isFilterActive, item, onBlur, onFocus, slotProps, tabIndex, type
+  - GridFilterInputSingleSelect
+    - Props: apiRef, applyValue, className, clearButton, disabled, focusElementRef, headerFilterMenu, inputRef, isFilterActive, item, onBlur, onFocus, slotProps, tabIndex, type
+  - GridFilterInputValue
+    - Props: apiRef, applyValue, className, clearButton, disabled, focusElementRef, headerFilterMenu, inputRef, isFilterActive, item, onBlur, onFocus, slotProps, tabIndex, type
+  - GridFilterListIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridFilterPanel
+    - Props: columnsSort, disableAddFilterButton, disableRemoveAllButton, filterFormProps, getColumnForNewFilter, logicOperators, sx
+  - GridFooter
+    - Props: sx
+  - GridFooterContainer
+    - Props: sx
+  - GridFooterPlaceholder
+  - GridGenericColumnMenu
+    - Props: colDef, hideMenu, id, labelledby, open, slotProps, slots
+  - GridHeader
+  - GridHeaderCheckbox
+    - Props: colDef, field
+  - GridKeyboardArrowRight
+    - Props: className, color, fontSize, style, titleAccess
+  - GridLoadIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridLoadingOverlay
+    - Props: noRowsVariant, sx, variant
+  - GridLongTextCell
+    - Props: api, cellMode, colDef, field, formattedValue, hasFocus, id, isEditable, renderContent, row, rowNode, slotProps, tabIndex, value
+  - GridLongTextCellCollapseIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridLongTextCellExpandIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridMenu
+    - Props: children, className, onClose, onExited, open, position, target
+  - GridMenuIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridMoreVertIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridNoColumnsOverlay
+    - Props: sx
+  - GridNoRowsOverlay
+    - Props: sx
+  - GridOverlay
+    - Props: sx
+  - GridPagination
+  - GridPanel
+    - Props: children, className, classes, flip, id, onClose, open, target
+  - GridPanelContent
+    - Props: sx
+  - GridPanelFooter
+    - Props: sx
+  - GridPanelHeader
+    - Props: sx
+  - GridPanelWrapper
+  - GridPrintExportMenuItem
+    - Props: hideMenu, options
+  - GridRedoIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridRemoveIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridRoot
+    - Props: sidePanel, sx
+  - GridRow
+    - Props: columnsTotalWidth, firstColumnIndex, focusedColumnIndex, gridHasFiller, index, isFirstVisible, isLastVisible, isNotVisible, lastColumnIndex, offsetLeft, onClick, onDoubleClick, onMouseEnter, onMouseLeave, pinnedColumns, row, rowHeight, rowId, scrollbarWidth, selected, showBottomBorder, visibleColumns
+  - GridRowCheckbox
+    - Props: autoFocus, checked, className, density, disabled, fullWidth, id, indeterminate, inputRef, label, material, name, onChange, rowId, size, slotProps, style, tabIndex, touchRippleRef
+  - GridRowCount
+    - Props: rowCount, sx, visibleRowCount
+  - GridSearchIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridSelectedRowCount
+    - Props: selectedRowCount, sx
+  - GridSeparatorIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridShadowScrollArea
+    - Props: children
+  - GridSkeletonCell
+    - Props: align, empty, field, height, type, width
+  - GridTableRowsIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridToolbar
+    - Props: csvOptions, printOptions, quickFilterProps, showHistoryControls, showQuickFilter, slotProps, sx
+  - GridToolbarColumnsButton
+    - Props: slotProps
+  - GridToolbarContainer
+    - Props: sx
+  - GridToolbarDensitySelector
+    - Props: slotProps
+  - GridToolbarExport
+    - Props: csvOptions, printOptions, slotProps
+  - GridToolbarExportContainer
+    - Props: slotProps
+  - GridToolbarFilterButton
+    - Props: slotProps
+  - GridToolbarQuickFilter
+    - Props: className, debounceMs, quickFilterFormatter, quickFilterParser, slotProps
+  - GridTripleDotsVerticalIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridUndoIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridViewColumnIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridViewHeadlineIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridViewStreamIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - GridVisibilityOffIcon
+    - Props: className, color, fontSize, style, titleAccess
+  - QuickFilter
+    - Props: className, debounceMs, defaultExpanded, expanded, formatter, onExpandedChange, parser, render
+  - QuickFilterClear
+    - Props: children, className, color, disabled, edge, id, label, material, render, role, size, style, tabIndex, title, touchRippleRef
+  - QuickFilterControl
+    - Props: autoComplete, autoFocus, className, color, disabled, error, fullWidth, helperText, id, inputRef, label, material, multiline, onChange, placeholder, render, role, size, slotProps, style, tabIndex, type, value
+  - QuickFilterTrigger
+    - Props: children, className, disabled, id, material, render, role, size, startIcon, style, tabIndex, title, touchRippleRef
+  - renderActionsCell
+    - Parameters: params
+  - renderEditBooleanCell
+    - Parameters: params
+  - renderEditDateCell
+    - Parameters: params
+  - renderEditInputCell
+    - Parameters: params
+  - renderEditLongTextCell
+    - Parameters: params
+  - renderEditSingleSelectCell
+    - Parameters: params
+  - renderLongTextCell
+    - Parameters: params
+  - Toolbar
+    - Props: render
+  - ToolbarButton
+    - Props: children, className, color, disabled, edge, id, label, material, render, role, size, style, tabIndex, title, touchRippleRef
+- Types: ColumnHeaderFilterIconButtonProps, ColumnsPanelState, ColumnsPanelTriggerProps, ExportCsvProps, ExportPrintProps, FilterColumnsArgs, FilterPanelState, FilterPanelTriggerProps, GetColumnForNewFilterArgs, GridActionsCellItemProps, GridApiContext, GridCellProps, GridColumnHeaderMenuProps, GridColumnHeaderSeparatorProps, GridColumnHeaderSeparatorSides, GridColumnHeaderSortIconProps, GridColumnHeaderTitleProps, GridColumnMenuContainerProps, GridColumnMenuItemProps, GridColumnMenuProps, GridColumnUnsortedIconProps, GridColumnsManagementProps, GridColumnsPanelProps, GridCsvExportMenuItemProps, GridEditBooleanCellProps, GridEditDateCellProps, GridEditInputCellProps, GridEditLongTextCellProps, GridEditSingleSelectCellProps, GridExportDisplayOptions, GridExportMenuItemProps, GridFilterFormProps, GridFilterInputBooleanProps, GridFilterInputDateProps, GridFilterInputMultipleSingleSelectProps, GridFilterInputMultipleValueProps, GridFilterInputSingleSelectProps, GridFooterContainerProps, GridGenericColumnMenuProps, GridLoadingOverlayProps, GridLongTextCellProps, GridMenuProps, GridOverlayProps, GridPanelClasses, GridPanelProps, GridPanelWrapperProps, GridPrintExportMenuItemProps, GridRootProps, GridRowCountProps, GridRowProps, GridShadowScrollAreaProps, GridSkeletonCellProps, GridToolbarContainerProps, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarProps, GridToolbarQuickFilterProps, GridTypeFilterInputValueProps, QuickFilterClearProps, QuickFilterControlProps, QuickFilterProps, QuickFilterTriggerProps, ToolbarButtonProps, ToolbarProps, gridPanelClasses, renderBooleanCell
+
+</details>
+
+[Read more](./data-grid/page.mdx)
+
+## Charts
+
+No description available
+
+<details>
+
+<summary>Outline</summary>
+
+- Exports:
+  - FocusedRadarMark
+  - RadarAxis
+    - Props: angle, className, classes, divisions, dominantBaseline, labelOrientation, metric, textAnchor
+  - RadarAxisHighlight
+    - Props: className, classes
+  - RadarChart
+    - Props: apiRef, children, className, colors, desc, disableAxisListener, disableKeyboardNavigation, divisions, experimentalFeatures, height, hiddenItems, hideLegend, highlight, highlightedItem, id, initialHiddenItems, loading, localeText, margin, onAreaClick, onAxisClick, onHiddenItemsChange, onHighlightChange, onMarkClick, onTooltipItemChange, radar, series, seriesConfig, shape, showToolbar, skipAnimation, slotProps, slots, stripeColor, sx, theme, title, tooltipItem, width
+  - RadarDataProvider
+    - Props: apiRef, children, colors, experimentalFeatures, height, highlight, id, localeText, margin, plugins, radar, series, seriesConfig, skipAnimation, slotProps, slots, theme, width
+  - RadarGrid
+    - Props: divisions, shape, stripeColor
+  - RadarMetricLabels
+  - RadarSeriesArea
+    - Props: className, classes, onItemClick, seriesId
+  - RadarSeriesMarks
+    - Props: className, classes, onItemClick, seriesId
+  - RadarSeriesPlot
+    - Props: className, classes, onAreaClick, onMarkClick, seriesId
+  - Unstable_RadarChart
+    - Props: apiRef, children, className, colors, desc, disableAxisListener, disableKeyboardNavigation, divisions, experimentalFeatures, height, hiddenItems, hideLegend, highlight, highlightedItem, id, initialHiddenItems, loading, localeText, margin, onAreaClick, onAxisClick, onHiddenItemsChange, onHighlightChange, onMarkClick, onTooltipItemChange, radar, series, seriesConfig, shape, showToolbar, skipAnimation, slotProps, slots, stripeColor, sx, theme, title, tooltipItem, width
+  - Unstable_RadarDataProvider
+    - Props: apiRef, children, colors, experimentalFeatures, height, highlight, id, localeText, margin, plugins, radar, series, seriesConfig, skipAnimation, slotProps, slots, theme, width
+  - useRadarAxis
+    - Parameters: params
+- Types: RADAR_PLUGINS, RadarAxisHighlightProps, RadarAxisProps, RadarChartPluginSignatures, RadarChartProps, RadarChartSlotProps, RadarChartSlots, RadarClassKey, RadarClasses, RadarDataProviderProps, RadarGridProps, RadarSeries, RadarSeriesAreaProps, RadarSeriesMarksProps, RadarSeriesPlotProps, UseRadarAxisParams, radarClasses
+
+</details>
+
+[Read more](./charts/page.mdx)
+
+[//]: # 'The above section is autogenerated, but the remainder of the file can be modified.'
+
+export const metadata =
+  /** @type {import('@mui/internal-docs-infra/createSitemap/types').NextMetadata} */ ({
+    robots: {
+      index: false,
+    },
+    other: {
+      audience: 'private',
+    },
+  });
diff --git a/docs/pages/x/api/scheduler/event-calendar-premium.js b/docs/pages/x/api/scheduler/event-calendar-premium.js
index 4286ea5d71a4d..4d8f884a40aef 100644
--- a/docs/pages/x/api/scheduler/event-calendar-premium.js
+++ b/docs/pages/x/api/scheduler/event-calendar-premium.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './event-calendar-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesEventCalendarPremium } from './types.event-calendar-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'classes', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'localeText', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'preferencesMenuConfig', 'readOnly', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/event-calendar-premium',
-    false,
-    /\.\/event-calendar-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="EventCalendarPremium" allowedProps={allowedProps}>
+      <TypesEventCalendarPremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/event-calendar.js b/docs/pages/x/api/scheduler/event-calendar.js
index 96b6658f5edf0..36aa821eedad1 100644
--- a/docs/pages/x/api/scheduler/event-calendar.js
+++ b/docs/pages/x/api/scheduler/event-calendar.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './event-calendar.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesEventCalendar } from './types.event-calendar';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'classes', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'localeText', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'preferencesMenuConfig', 'readOnly', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/event-calendar',
-    false,
-    /\.\/event-calendar.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="EventCalendar" allowedProps={allowedProps}>
+      <TypesEventCalendar />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/event-timeline-premium.js b/docs/pages/x/api/scheduler/event-timeline-premium.js
index 289322766a9d1..fcbedff65cd9b 100644
--- a/docs/pages/x/api/scheduler/event-timeline-premium.js
+++ b/docs/pages/x/api/scheduler/event-timeline-premium.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './event-timeline-premium.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesEventTimelinePremium } from './types.event-timeline-premium';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'classes', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'localeText', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'readOnly', 'resourceColumnLabel', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/event-timeline-premium',
-    false,
-    /\.\/event-timeline-premium.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="EventTimelinePremium" allowedProps={allowedProps}>
+      <TypesEventTimelinePremium />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/standalone-agenda-view.js b/docs/pages/x/api/scheduler/standalone-agenda-view.js
index 2f2e56f2f874e..8a4248af63f2c 100644
--- a/docs/pages/x/api/scheduler/standalone-agenda-view.js
+++ b/docs/pages/x/api/scheduler/standalone-agenda-view.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './standalone-agenda-view.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStandaloneAgendaView } from './types.standalone-agenda-view';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'preferencesMenuConfig', 'readOnly', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/standalone-agenda-view',
-    false,
-    /\.\/standalone-agenda-view.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StandaloneAgendaView" allowedProps={allowedProps}>
+      <TypesStandaloneAgendaView />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/standalone-day-view.js b/docs/pages/x/api/scheduler/standalone-day-view.js
index 9bc609626b4e8..4981f0dc0eda7 100644
--- a/docs/pages/x/api/scheduler/standalone-day-view.js
+++ b/docs/pages/x/api/scheduler/standalone-day-view.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './standalone-day-view.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStandaloneDayView } from './types.standalone-day-view';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'preferencesMenuConfig', 'readOnly', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/standalone-day-view',
-    false,
-    /\.\/standalone-day-view.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StandaloneDayView" allowedProps={allowedProps}>
+      <TypesStandaloneDayView />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/standalone-event.js b/docs/pages/x/api/scheduler/standalone-event.js
index 4fea25dc9e7c5..1ccb5b98fc5bf 100644
--- a/docs/pages/x/api/scheduler/standalone-event.js
+++ b/docs/pages/x/api/scheduler/standalone-event.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './standalone-event.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStandaloneEvent } from './types.standalone-event';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['className', 'nativeButton', 'onEventDrop', 'render', 'style', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/standalone-event',
-    false,
-    /\.\/standalone-event.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StandaloneEvent" allowedProps={allowedProps}>
+      <TypesStandaloneEvent />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/standalone-month-view.js b/docs/pages/x/api/scheduler/standalone-month-view.js
index bc51d0bc4c050..161d0c188012e 100644
--- a/docs/pages/x/api/scheduler/standalone-month-view.js
+++ b/docs/pages/x/api/scheduler/standalone-month-view.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './standalone-month-view.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStandaloneMonthView } from './types.standalone-month-view';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'preferencesMenuConfig', 'readOnly', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/standalone-month-view',
-    false,
-    /\.\/standalone-month-view.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StandaloneMonthView" allowedProps={allowedProps}>
+      <TypesStandaloneMonthView />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/standalone-week-view.js b/docs/pages/x/api/scheduler/standalone-week-view.js
index 03374b3da5382..8c91292e1c8e0 100644
--- a/docs/pages/x/api/scheduler/standalone-week-view.js
+++ b/docs/pages/x/api/scheduler/standalone-week-view.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './standalone-week-view.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesStandaloneWeekView } from './types.standalone-week-view';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['areEventsDraggable', 'areEventsResizable', 'canDragEventsFromTheOutside', 'canDropEventsToTheOutside', 'dataSource', 'dateLocale', 'defaultPreferences', 'defaultView', 'defaultVisibleDate', 'defaultVisibleResources', 'displayTimezone', 'eventColor', 'eventModelStructure', 'events', 'onEventsChange', 'onPreferencesChange', 'onViewChange', 'onVisibleDateChange', 'onVisibleResourcesChange', 'preferences', 'preferencesMenuConfig', 'readOnly', 'resourceModelStructure', 'resources', 'showCurrentTimeIndicator', 'sx', 'view', 'views', 'visibleDate', 'visibleResources'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/scheduler/standalone-week-view',
-    false,
-    /\.\/standalone-week-view.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="StandaloneWeekView" allowedProps={allowedProps}>
+      <TypesStandaloneWeekView />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/scheduler/types.event-calendar-premium.md b/docs/pages/x/api/scheduler/types.event-calendar-premium.md
new file mode 100644
index 0000000000000..428a36a9f96da
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.event-calendar-premium.md
@@ -0,0 +1,262 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.event-calendar-premium.md'
+
+## API Reference
+
+### EventCalendarPremium
+
+Premium version of EventCalendar with lazy loading support.
+Uses EventCalendarPremiumStore which extends EventCalendarStore with lazy loading plugin.
+
+**EventCalendarPremium Props:**
+
+| Prop                        | Type                                                                                                    | Default                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                      | `EventCalendarPremiumApiRef`                                                                            | -                                                                                                                      | The ref object that allows Event Calendar manipulation.&#xA;Can be instantiated with `useEventCalendarPremiumApiRef()`.                                                                                                                                                                                                                                                                                                    |
+| areEventsDraggable          | `boolean`                                                                                               | `true`                                                                                                                 | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                         | `true`                                                                                                                 | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| classes                     | `Partial<EventCalendarClasses>`                                                                         | -                                                                                                                      | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                    |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                               | -                                                                                                                      | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                                | `enUS (English)`                                                                                                       | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventCalendarPreferences>`                                                                     | `{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }`        | The default preferences for the calendar.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `CalendarView`                                                                                          | `"week"`                                                                                                               | The view initially displayed in the calendar.&#xA;To render a controlled calendar, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                                  | `today`                                                                                                                | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                               | `{} - all resources are visible`                                                                                       | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                                | `"default"`                                                                                                            | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                                   | `"teal"`                                                                                                               | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                      | -                                                                                                                      | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                      | -                                                                                                                      | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                                  | `[]`                                                                                                                   | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| localeText                  | `Partial<EventCalendarLocaleText>`                                                                      | -                                                                                                                      | Set the locale text of the Event Calendar.&#xA;You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts)&#xA;in the GitHub repository.                                                                                                                                                                                       |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                                    | -                                                                                                                      | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventCalendarPreferences>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                                                                                                      | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void)`                             | -                                                                                                                      | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                              | -                                                                                                                      | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)`      | -                                                                                                                      | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventCalendarPreferences>`                                                                     | -                                                                                                                      | Preferences currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                           |
+| preferencesMenuConfig       | `Partial<EventCalendarPreferencesMenuConfig> \| false`                                                  | `{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }` | Config of the preferences menu.&#xA;Defines which options are visible in the menu.&#xA;If `false`, the menu will be entirely hidden.                                                                                                                                                                                                                                                                                       |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                                   | -                                                                                                                      | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                                  | -                                                                                                                      | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                               | `true`                                                                                                                 | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                        | -                                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `CalendarView`                                                                                          | -                                                                                                                      | The view currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `CalendarView[]`                                                                                        | `["day", "week", "month", "agenda"]`                                                                                   | The views available in the calendar.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                                  | -                                                                                                                      | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                               | -                                                                                                                      | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                               | `false`                                                                                                                | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+## Additional Types
+
+### EventCalendarPremiumApiRef
+
+```typescript
+type EventCalendarPremiumApiRef = React.RefObject<Partial<SchedulerPublicAPI> | undefined>;
+```
+
+### EventCalendarPremiumProps
+
+```typescript
+type EventCalendarPremiumProps<TEvent extends {}, TResource extends {}> = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<EventCalendarClasses>;
+  /**
+   * Set the locale text of the Event Calendar.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts)
+   * in the GitHub repository.
+   */
+  localeText?: Partial<EventCalendarLocaleText>;
+  /**
+   * The ref object that allows Event Calendar manipulation.
+   * Can be instantiated with `useEventCalendarPremiumApiRef()`.
+   */
+  apiRef?: EventCalendarPremiumApiRef;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** The view currently displayed in the calendar. */
+  view?: CalendarView;
+  /**
+   * The view initially displayed in the calendar.
+   * To render a controlled calendar, use the `view` prop.
+   * @default "week"
+   */
+  defaultView?: CalendarView;
+  /**
+   * The views available in the calendar.
+   * @default ["day", "week", "month", "agenda"]
+   */
+  views?: CalendarView[];
+  /** Event handler called when the view changes. */
+  onViewChange?: (view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void;
+  /**
+   * The default preferences for the calendar.
+   * To use controlled preferences, use the `preferences` prop.
+   * @default { showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }
+   */
+  defaultPreferences?: Partial<EventCalendarPreferences>;
+  /** Preferences currently displayed in the calendar. */
+  preferences?: Partial<EventCalendarPreferences>;
+  /** Event handler called when the preferences change. */
+  onPreferencesChange?: (
+    preferences: Partial<EventCalendarPreferences>,
+    eventDetails: SchedulerChangeEventDetails,
+  ) => void;
+  /**
+   * Config of the preferences menu.
+   * Defines which options are visible in the menu.
+   * If `false`, the menu will be entirely hidden.
+   * @default { toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }
+   */
+  preferencesMenuConfig?: Partial<EventCalendarPreferencesMenuConfig> | false;
+  /**
+   * The events currently available in the calendar.
+   * @default []
+   */
+  events?: TEvent[];
+  /** Callback fired when some event of the calendar change. */
+  onEventsChange?: (value: TEvent[], eventDetails: SchedulerChangeEventDetails) => void;
+  /**
+   * The structure of the event model.
+   * It defines how to read and write the properties of the event model.
+   * If not provided, the event model is assumed to match the `CalendarEvent` interface.
+   */
+  eventModelStructure?: SchedulerEventModelStructure<TEvent>;
+  /** The resources the events can be assigned to. */
+  resources?: TResource[];
+  /**
+   * The structure of the resource model.
+   * It defines how to read and write the properties of the resource model.
+   * If not provided, the resource model is assumed to match the `CalendarResource` interface.
+   */
+  resourceModelStructure?: SchedulerResourceModelStructure<TResource>;
+  /**
+   * The IDs of the resources currently visible.
+   * A resource is visible if it is not included in this object or if it is included with `true` value.
+   */
+  visibleResources?: Record<string, boolean>;
+  /**
+   * The IDs of the resources initially visible.
+   * To render a controlled scheduler, use the `visibleResources` prop.
+   * @default {} - all resources are visible
+   */
+  defaultVisibleResources?: Record<string, boolean>;
+  /** Event handler called when the visible resources change. */
+  onVisibleResourcesChange?: (
+    visibleResources: Record<string, boolean>,
+    eventDetails: SchedulerChangeEventDetails,
+  ) => void;
+  /** The date currently used to determine the visible date range in each view. */
+  visibleDate?: Date;
+  /**
+   * The date initially used to determine the visible date range in each view.
+   * To render a controlled calendar, use the `visibleDate` prop.
+   * @default today
+   */
+  defaultVisibleDate?: Date;
+  /** Event handler called when the visible date changes. */
+  onVisibleDateChange?: (visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void;
+  /**
+   * Whether the event can be dragged to change its start and end dates without changing the duration.
+   * @default true
+   */
+  areEventsDraggable?: boolean;
+  /**
+   * Whether the event start or end can be dragged to change its duration without changing its other date.
+   * If `true`, both start and end can be resized.
+   * If `false`, the events are not resizable.
+   * If `"start"`, only the start can be resized.
+   * If `"end"`, only the end can be resized.
+   * @default true
+   */
+  areEventsResizable?: boolean | SchedulerEventSide;
+  /**
+   * Whether events can be dragged from outside of the calendar and dropped into it.
+   * @default false
+   */
+  canDragEventsFromTheOutside?: boolean;
+  /**
+   * Whether events can be dragged from inside of the calendar and dropped outside of it.
+   * If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.
+   * If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.
+   * @default false
+   */
+  canDropEventsToTheOutside?: boolean;
+  /**
+   * Whether the component should display the current time indicator.
+   * @default true
+   */
+  showCurrentTimeIndicator?: boolean;
+  /**
+   * The color palette used for all events.
+   * Can be overridden per resource using the `eventColor` property on the resource model.
+   * Can be overridden per event using the `color` property on the event model.
+   * @default "teal"
+   */
+  eventColor?: SchedulerEventColor;
+  /**
+   * Whether the calendar is in read-only mode.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Data source for fetching events asynchronously.
+   * When provided, events are fetched through the data source instead of the `events` prop.
+   */
+  dataSource?: SchedulerDataSource<TEvent>;
+  eventCreation?: Partial<SchedulerEventCreationConfig> | boolean;
+  /**
+   * The timezone used to display events in the scheduler.
+   *
+   * Accepts any valid IANA timezone name
+   * (for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),
+   * or keywords understood by the adapter, such as
+   * "default" (use the adapter's default timezone),
+   * "locale" (use the user's current locale timezone),
+   * or "UTC".
+   *
+   * This timezone only affects rendering, events keep their original data timezone.
+   * @default "default"
+   */
+  displayTimezone?: string;
+  /**
+   * The locale object from `date-fns` used to format dates.
+   * This affects day names, month names, week start day, and other locale-dependent formatting.
+   * Import a locale from `date-fns/locale` and pass it to this prop.
+   * @default enUS (English)
+   */
+  dateLocale?: Locale;
+};
+```
+
+## External Types
+
+### CalendarView
+
+```typescript
+type CalendarView = 'day' | 'week' | 'month' | 'agenda';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.event-calendar-premium.ts b/docs/pages/x/api/scheduler/types.event-calendar-premium.ts
new file mode 100644
index 0000000000000..84bd8f36b41e0
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.event-calendar-premium.ts
@@ -0,0 +1,4 @@
+import { EventCalendarPremium } from '@mui/x-scheduler-premium/event-calendar-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesEventCalendarPremium = createTypes(import.meta.url, EventCalendarPremium);
diff --git a/docs/pages/x/api/scheduler/types.event-calendar.md b/docs/pages/x/api/scheduler/types.event-calendar.md
new file mode 100644
index 0000000000000..ce7bae8b31370
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.event-calendar.md
@@ -0,0 +1,1203 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.event-calendar.md'
+
+## API Reference
+
+### EventCalendar
+
+**EventCalendar Props:**
+
+| Prop                        | Type                                                                                                    | Default                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                      | `EventCalendarApiRef`                                                                                   | -                                                                                                                      | The ref object that allows Event Calendar manipulation.&#xA;Can be instantiated with `useEventCalendarApiRef()`.                                                                                                                                                                                                                                                                                                           |
+| areEventsDraggable          | `boolean`                                                                                               | `true`                                                                                                                 | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                         | `true`                                                                                                                 | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| classes                     | `Partial<EventCalendarClasses>`                                                                         | -                                                                                                                      | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                    |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                               | -                                                                                                                      | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                                | `enUS (English)`                                                                                                       | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventCalendarPreferences>`                                                                     | `{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }`        | The default preferences for the calendar.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `CalendarView`                                                                                          | `"week"`                                                                                                               | The view initially displayed in the calendar.&#xA;To render a controlled calendar, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                                  | `today`                                                                                                                | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                               | `{} - all resources are visible`                                                                                       | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                                | `"default"`                                                                                                            | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                                   | `"teal"`                                                                                                               | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                      | -                                                                                                                      | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                      | -                                                                                                                      | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                                  | `[]`                                                                                                                   | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| localeText                  | `Partial<EventCalendarLocaleText>`                                                                      | -                                                                                                                      | Set the locale text of the Event Calendar.&#xA;You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts)&#xA;in the GitHub repository.                                                                                                                                                                                       |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                                    | -                                                                                                                      | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventCalendarPreferences>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                                                                                                      | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void)`                             | -                                                                                                                      | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                              | -                                                                                                                      | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)`      | -                                                                                                                      | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventCalendarPreferences>`                                                                     | -                                                                                                                      | Preferences currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                           |
+| preferencesMenuConfig       | `Partial<EventCalendarPreferencesMenuConfig> \| false`                                                  | `{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }` | Config of the preferences menu.&#xA;Defines which options are visible in the menu.&#xA;If `false`, the menu will be entirely hidden.                                                                                                                                                                                                                                                                                       |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                                   | -                                                                                                                      | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                                  | -                                                                                                                      | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                               | `true`                                                                                                                 | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                        | -                                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `CalendarView`                                                                                          | -                                                                                                                      | The view currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `CalendarView[]`                                                                                        | `["day", "week", "month", "agenda"]`                                                                                   | The views available in the calendar.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                                  | -                                                                                                                      | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                               | -                                                                                                                      | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                               | `false`                                                                                                                | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+### getEventCalendarUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### useEventCalendarStyledContext
+
+**useEventCalendarStyledContext Return Value:**
+
+```tsx
+type ReturnValue = EventCalendarStyledContextValue;
+```
+
+### useEventCalendarUtilityClasses
+
+Computes the utility classes for EventCalendar components.
+Exported so both EventCalendar and EventCalendarPremium can use it.
+
+**useEventCalendarUtilityClasses Parameters:**
+
+| Parameter | Type                            | Default | Description |
+| :-------- | :------------------------------ | :------ | :---------- |
+| classes   | `Partial<EventCalendarClasses>` | -       | -           |
+
+**useEventCalendarUtilityClasses Return Value:**
+
+```tsx
+type ReturnValue = EventCalendarClasses;
+```
+
+## Additional Types
+
+### EventCalendarApiRef
+
+```typescript
+type EventCalendarApiRef = React.RefObject<Partial<SchedulerPublicAPI> | undefined>;
+```
+
+### eventCalendarClasses
+
+```typescript
+type eventCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the side panel element. */
+  sidePanel: string;
+  /** Styles applied to the main panel element. */
+  mainPanel: string;
+  /** Styles applied to the content section element. */
+  content: string;
+  /** Styles applied to the mini calendar root element. */
+  miniCalendar: string;
+  /** Styles applied to the mini calendar header element. */
+  miniCalendarHeader: string;
+  /** Styles applied to the mini calendar header navigation container. */
+  miniCalendarNavigation: string;
+  /** Styles applied to the mini calendar month label. */
+  miniCalendarMonthLabel: string;
+  /** Styles applied to the mini calendar weekday header row. */
+  miniCalendarWeekdayHeader: string;
+  /** Styles applied to individual mini calendar weekday header cells. */
+  miniCalendarWeekdayCell: string;
+  /** Styles applied to the mini calendar grid (body). */
+  miniCalendarGrid: string;
+  /** Styles applied to mini calendar week rows. */
+  miniCalendarWeekRow: string;
+  /** Styles applied to mini calendar day cells. */
+  miniCalendarDayCell: string;
+  /** Styles applied to mini calendar day buttons. */
+  miniCalendarDayButton: string;
+  /** Styles applied to the error container element. */
+  errorContainer: string;
+  /** Styles applied to the error alert element. */
+  errorAlert: string;
+  /** Styles applied to the error message element. */
+  errorMessage: string;
+  /** Styles applied to the header toolbar element. */
+  headerToolbar: string;
+  /** Styles applied to the header toolbar actions element. */
+  headerToolbarActions: string;
+  /** Styles applied to the header toolbar left side element. */
+  headerToolbarLeftElement: string;
+  /** Styles applied to the header toolbar label element. */
+  headerToolbarLabel: string;
+  /** Styles applied to the header toolbar date navigator buttons container element. */
+  headerToolbarDateNavigator: string;
+  /** Styles applied to the view switcher element. */
+  viewSwitcher: string;
+  /** Styles applied to the preferences menu element. */
+  preferencesMenu: string;
+  /** Styles applied to the resources legend root element. */
+  resourcesLegend: string;
+  /** Styles applied to the resources legend label element. */
+  resourcesLegendLabel: string;
+  /** Styles applied to resources legend item elements. */
+  resourcesLegendItem: string;
+  /** Styles applied to resources legend item name elements. */
+  resourcesLegendItemName: string;
+  /** Styles applied to resources legend item checkbox elements. */
+  resourcesLegendItemCheckbox: string;
+  /** Styles applied to the agenda view element. */
+  agendaView: string;
+  /** Styles applied to agenda view row elements. */
+  agendaViewRow: string;
+  /** Styles applied to agenda view day header cell elements. */
+  agendaViewDayHeaderCell: string;
+  /** Styles applied to agenda view day number cell elements. */
+  agendaViewDayNumberCell: string;
+  /** Styles applied to agenda view week day cell elements. */
+  agendaViewWeekDayCell: string;
+  /** Styles applied to agenda view week day name label elements. */
+  agendaViewWeekDayNameLabel: string;
+  /** Styles applied to agenda view year and month label elements. */
+  agendaViewYearAndMonthLabel: string;
+  /** Styles applied to the agenda view events list element. */
+  agendaViewEventsList: string;
+  /** Styles applied to event skeleton elements. */
+  eventSkeleton: string;
+  /** Styles applied to the month view root element. */
+  monthView: string;
+  /** Styles applied to the month view grid element. */
+  monthViewGrid: string;
+  /** Styles applied to the month view header element. */
+  monthViewHeader: string;
+  /** Styles applied to month view header cell elements. */
+  monthViewHeaderCell: string;
+  /** Styles applied to the month view week header cell element. */
+  monthViewWeekHeaderCell: string;
+  /** Styles applied to the month view body element. */
+  monthViewBody: string;
+  /** Styles applied to month view row elements. */
+  monthViewRow: string;
+  /** Styles applied to month view week number cell elements. */
+  monthViewWeekNumberCell: string;
+  /** Styles applied to month view cell elements. */
+  monthViewCell: string;
+  /** Styles applied to month view cell number elements. */
+  monthViewCellNumber: string;
+  /** Styles applied to month view cell number button elements. */
+  monthViewCellNumberButton: string;
+  /** Styles applied to month view cell events container elements. */
+  monthViewCellEvents: string;
+  /** Styles applied to month view more events button elements. */
+  monthViewMoreEvents: string;
+  /** Styles applied to month view placeholder event container elements. */
+  monthViewPlaceholderContainer: string;
+  /** Styles applied to the day time grid container element. */
+  dayTimeGridContainer: string;
+  /** Styles applied to the day time grid element. */
+  dayTimeGrid: string;
+  /** Styles applied to the day time grid header element. */
+  dayTimeGridHeader: string;
+  /** Styles applied to day time grid header cell elements. */
+  dayTimeGridHeaderCell: string;
+  /** Styles applied to the day time grid all day events grid element. */
+  dayTimeGridAllDayEventsGrid: string;
+  /** Styles applied to the day time grid all day events row element. */
+  dayTimeGridAllDayEventsRow: string;
+  /** Styles applied to day time grid all day events cell elements. */
+  dayTimeGridAllDayEventsCell: string;
+  /** Styles applied to the day time grid all day events header cell element. */
+  dayTimeGridAllDayEventsHeaderCell: string;
+  /** Styles applied to day time grid header content elements. */
+  dayTimeGridHeaderContent: string;
+  /** Styles applied to day time grid header button elements. */
+  dayTimeGridHeaderButton: string;
+  /** Styles applied to day time grid header day name elements. */
+  dayTimeGridHeaderDayName: string;
+  /** Styles applied to day time grid header day number elements. */
+  dayTimeGridHeaderDayNumber: string;
+  /** Styles applied to the day time grid body element. */
+  dayTimeGridBody: string;
+  /** Styles applied to the day time grid scrollable content element. */
+  dayTimeGridScrollableContent: string;
+  /** Styles applied to the day time grid time axis element. */
+  dayTimeGridTimeAxis: string;
+  /** Styles applied to day time grid time axis cell elements. */
+  dayTimeGridTimeAxisCell: string;
+  /** Styles applied to day time grid time axis text elements. */
+  dayTimeGridTimeAxisText: string;
+  /** Styles applied to the day time grid grid element. */
+  dayTimeGridGrid: string;
+  /** Styles applied to day time grid column elements. */
+  dayTimeGridColumn: string;
+  /** Styles applied to day time grid column interactive layer elements. */
+  dayTimeGridColumnInteractiveLayer: string;
+  /** Styles applied to the day time grid current time indicator element. */
+  dayTimeGridCurrentTimeIndicator: string;
+  /** Styles applied to the day time grid current time indicator circle element. */
+  dayTimeGridCurrentTimeIndicatorCircle: string;
+  /** Styles applied to the day time grid current time label element. */
+  dayTimeGridCurrentTimeLabel: string;
+  /** Styles applied to day time grid all day events cell events container elements. */
+  dayTimeGridAllDayEventsCellEvents: string;
+  /** Styles applied to day time grid all day event container elements. */
+  dayTimeGridAllDayEventContainer: string;
+  /** Styles applied to the day time grid scrollable placeholder element. */
+  dayTimeGridScrollablePlaceholder: string;
+  /** Styles applied to day grid event elements. */
+  dayGridEvent: string;
+  /** Styles applied to day grid event placeholder elements. */
+  dayGridEventPlaceholder: string;
+  /** Styles applied to day grid event title elements. */
+  dayGridEventTitle: string;
+  /** Styles applied to day grid event time elements. */
+  dayGridEventTime: string;
+  /** Styles applied to day grid event recurring icon elements. */
+  dayGridEventRecurringIcon: string;
+  /** Styles applied to day grid event resize handler elements. */
+  dayGridEventResizeHandler: string;
+  /** Styles applied to day grid event card wrapper elements. */
+  dayGridEventCardWrapper: string;
+  /** Styles applied to day grid event card content elements. */
+  dayGridEventCardContent: string;
+  /** Styles applied to day grid event lines clamp elements. */
+  dayGridEventLinesClamp: string;
+  /** Styles applied to event color indicator elements. */
+  eventColorIndicator: string;
+  /** Styles applied to time grid event elements. */
+  timeGridEvent: string;
+  /** Styles applied to time grid event placeholder elements. */
+  timeGridEventPlaceholder: string;
+  /** Styles applied to time grid event skeleton elements. */
+  timeGridEventSkeleton: string;
+  /** Styles applied to time grid event title elements. */
+  timeGridEventTitle: string;
+  /** Styles applied to time grid event time elements. */
+  timeGridEventTime: string;
+  /** Styles applied to time grid event recurring icon elements. */
+  timeGridEventRecurringIcon: string;
+  /** Styles applied to time grid event resize handler elements. */
+  timeGridEventResizeHandler: string;
+  /** Styles applied to event item card elements. */
+  eventItemCard: string;
+  /** Styles applied to event item card wrapper elements. */
+  eventItemCardWrapper: string;
+  /** Styles applied to event item title elements. */
+  eventItemTitle: string;
+  /** Styles applied to event item time elements. */
+  eventItemTime: string;
+  /** Styles applied to event item recurring icon elements. */
+  eventItemRecurringIcon: string;
+  /** Styles applied to event item resource legend color elements. */
+  resourceLegendColor: string;
+  /** Styles applied to event item card content elements. */
+  eventItemCardContent: string;
+  /** Styles applied to event item lines clamp elements. */
+  eventItemLinesClamp: string;
+  /** Styles applied to the more events popover header element. */
+  moreEventsPopoverHeader: string;
+  /** Styles applied to the more events popover title element. */
+  moreEventsPopoverTitle: string;
+  /** Styles applied to the more events popover body element. */
+  moreEventsPopoverBody: string;
+  /** Styles applied to the event drag preview element. */
+  eventDragPreview: string;
+  /** Styles applied to the standalone event element. */
+  standaloneEvent: string;
+  /** Styles applied to the agenda view event list item elements. */
+  agendaViewEventListItem: string;
+  /** Styles applied to the side panel collapse element. */
+  sidePanelCollapse: string;
+  /** Styles applied to the side panel divider element. */
+  sidePanelDivider: string;
+  /** Styles applied to the header toolbar side panel toggle button element. */
+  headerToolbarSidePanelToggle: string;
+  /** Styles applied to the header toolbar previous button element. */
+  headerToolbarPreviousButton: string;
+  /** Styles applied to the header toolbar today button element. */
+  headerToolbarTodayButton: string;
+  /** Styles applied to the header toolbar next button element. */
+  headerToolbarNextButton: string;
+  /** Styles applied to the preferences menu button element. */
+  preferencesMenuButton: string;
+  /** Styles applied to the preferences menu list element. */
+  preferencesMenuList: string;
+  /** Styles applied to the preferences menu list item icon elements. */
+  preferencesMenuListItemIcon: string;
+  /** Styles applied to the preferences menu list subheader elements. */
+  preferencesMenuListSubheader: string;
+  /** Styles applied to the preferences menu item elements. */
+  preferencesMenuItem: string;
+  /** Styles applied to the preferences menu divider elements. */
+  preferencesMenuDivider: string;
+  /** Styles applied to the preferences menu list item text elements. */
+  preferencesMenuListItemText: string;
+  /** Styles applied to the view switcher button element. */
+  viewSwitcherButton: string;
+  /** Styles applied to the view switcher menu element. */
+  viewSwitcherMenu: string;
+  /** Styles applied to the mini calendar previous button element. */
+  miniCalendarPreviousButton: string;
+  /** Styles applied to the mini calendar next button element. */
+  miniCalendarNextButton: string;
+  /** Styles applied to the more events popover element. */
+  moreEventsPopover: string;
+  /** Styles applied to the event dialog root element. */
+  eventDialog: string;
+  /** Styles applied to the event dialog close button element. */
+  eventDialogCloseButton: string;
+  /** Styles applied to the event dialog header element. */
+  eventDialogHeader: string;
+  /** Styles applied to the event dialog readonly content element. */
+  eventDialogReadonlyContent: string;
+  /** Styles applied to the event dialog actions element. */
+  eventDialogActions: string;
+  /** Styles applied to the event dialog date time container element. */
+  eventDialogDateTimeContainer: string;
+  /** Styles applied to the event dialog title element. */
+  eventDialogTitle: string;
+  /** Styles applied to the event dialog resource container element. */
+  eventDialogResourceContainer: string;
+  /** Styles applied to the event dialog resource legend container element. */
+  eventDialogResourceLegendContainer: string;
+  /** Styles applied to the event dialog resource legend color element. */
+  eventDialogResourceLegendColor: string;
+  /** Styles applied to the event dialog resource title element. */
+  eventDialogResourceTitle: string;
+  /** Styles applied to the event dialog paper element. */
+  eventDialogPaper: string;
+  /** Styles applied to the event dialog form element. */
+  eventDialogForm: string;
+  /** Styles applied to the event dialog form actions element. */
+  eventDialogFormActions: string;
+  /** Styles applied to the event dialog content element. */
+  eventDialogContent: string;
+  /** Styles applied to the event dialog tab panel element. */
+  eventDialogTabPanel: string;
+  /** Styles applied to the event dialog tab content element. */
+  eventDialogTabContent: string;
+  /** Styles applied to the event dialog date time fields container element. */
+  eventDialogDateTimeFieldsContainer: string;
+  /** Styles applied to the event dialog date time fields row element. */
+  eventDialogDateTimeFieldsRow: string;
+  /** Styles applied to the event dialog recurrence label container element in the readonly content. */
+  eventDialogRecurrenceLabelContainer: string;
+  /** Styles applied to the event dialog recurrence selector container element. */
+  eventDialogRecurrenceSelectorContainer: string;
+  /** Styles applied to the event dialog resource menu item element. */
+  eventDialogResourceMenuItem: string;
+  /** Styles applied to the event dialog resource menu list subheader element. */
+  eventDialogResourceMenuListSubheader: string;
+  /** Styles applied to the event dialog resource menu color dot element. */
+  eventDialogResourceMenuColorDot: string;
+  /** Styles applied to the event dialog resource menu color radio button element. */
+  eventDialogResourceMenuColorRadioButton: string;
+  /** Styles applied to the event dialog inline row element. */
+  eventDialogInlineRow: string;
+  /** Styles applied to the event dialog section header title element. */
+  eventDialogSectionHeaderTitle: string;
+  /** Styles applied to the event dialog radio button label element. */
+  eventDialogRadioButtonLabel: string;
+  /** Styles applied to the event dialog repeat section label element. */
+  eventDialogRepeatSectionLabel: string;
+  /** Styles applied to the event dialog ends radio group element. */
+  eventDialogEndsRadioGroup: string;
+  /** Styles applied to the event dialog repeat section fieldset element. */
+  eventDialogRepeatSectionFieldset: string;
+  /** Styles applied to the event dialog repeat section content element. */
+  eventDialogRepeatSectionContent: string;
+  /** Styles applied to the event dialog recurrence selector toggle group element. */
+  eventDialogRecurrenceSelectorToggleGroup: string;
+  /** Styles applied to the event dialog week day selector form group element. */
+  eventDialogWeekDaySelectorCheckbox: string;
+  /** Styles applied to the event dialog frequency select element. */
+  eventDialogFrequencySelect: string;
+  /** Styles applied to the event dialog small number field element. */
+  eventDialogSmallNumberField: string;
+  /** Styles applied to the event dialog tabs container element. */
+  eventDialogTabsContainer: string;
+  /** Styles applied to the event dialog tab elements. */
+  eventDialogTab: string;
+  /** Styles applied to the event dialog form divider element. */
+  eventDialogFormDivider: string;
+  /** Styles applied to the event dialog delete button element. */
+  eventDialogDeleteButton: string;
+  /** Styles applied to the event dialog save button element. */
+  eventDialogSaveButton: string;
+  /** Styles applied to the event dialog close action button element. */
+  eventDialogCloseAction: string;
+  /** Styles applied to the event dialog date time icon element. */
+  eventDialogDateTimeIcon: string;
+  /** Styles applied to the event dialog date time label element. */
+  eventDialogDateTimeLabel: string;
+  /** Styles applied to the event dialog recurrence icon element. */
+  eventDialogRecurrenceIcon: string;
+  /** Styles applied to the event dialog recurrence label element. */
+  eventDialogRecurrenceLabel: string;
+  /** Styles applied to the event dialog description label element. */
+  eventDialogDescriptionLabel: string;
+};
+```
+
+### EventCalendarClasses
+
+```typescript
+type EventCalendarClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the side panel element. */
+  sidePanel: string;
+  /** Styles applied to the main panel element. */
+  mainPanel: string;
+  /** Styles applied to the content section element. */
+  content: string;
+  /** Styles applied to the mini calendar root element. */
+  miniCalendar: string;
+  /** Styles applied to the mini calendar header element. */
+  miniCalendarHeader: string;
+  /** Styles applied to the mini calendar header navigation container. */
+  miniCalendarNavigation: string;
+  /** Styles applied to the mini calendar month label. */
+  miniCalendarMonthLabel: string;
+  /** Styles applied to the mini calendar weekday header row. */
+  miniCalendarWeekdayHeader: string;
+  /** Styles applied to individual mini calendar weekday header cells. */
+  miniCalendarWeekdayCell: string;
+  /** Styles applied to the mini calendar grid (body). */
+  miniCalendarGrid: string;
+  /** Styles applied to mini calendar week rows. */
+  miniCalendarWeekRow: string;
+  /** Styles applied to mini calendar day cells. */
+  miniCalendarDayCell: string;
+  /** Styles applied to mini calendar day buttons. */
+  miniCalendarDayButton: string;
+  /** Styles applied to the error container element. */
+  errorContainer: string;
+  /** Styles applied to the error alert element. */
+  errorAlert: string;
+  /** Styles applied to the error message element. */
+  errorMessage: string;
+  /** Styles applied to the header toolbar element. */
+  headerToolbar: string;
+  /** Styles applied to the header toolbar actions element. */
+  headerToolbarActions: string;
+  /** Styles applied to the header toolbar left side element. */
+  headerToolbarLeftElement: string;
+  /** Styles applied to the header toolbar label element. */
+  headerToolbarLabel: string;
+  /** Styles applied to the header toolbar date navigator buttons container element. */
+  headerToolbarDateNavigator: string;
+  /** Styles applied to the view switcher element. */
+  viewSwitcher: string;
+  /** Styles applied to the preferences menu element. */
+  preferencesMenu: string;
+  /** Styles applied to the resources legend root element. */
+  resourcesLegend: string;
+  /** Styles applied to the resources legend label element. */
+  resourcesLegendLabel: string;
+  /** Styles applied to resources legend item elements. */
+  resourcesLegendItem: string;
+  /** Styles applied to resources legend item name elements. */
+  resourcesLegendItemName: string;
+  /** Styles applied to resources legend item checkbox elements. */
+  resourcesLegendItemCheckbox: string;
+  /** Styles applied to the agenda view element. */
+  agendaView: string;
+  /** Styles applied to agenda view row elements. */
+  agendaViewRow: string;
+  /** Styles applied to agenda view day header cell elements. */
+  agendaViewDayHeaderCell: string;
+  /** Styles applied to agenda view day number cell elements. */
+  agendaViewDayNumberCell: string;
+  /** Styles applied to agenda view week day cell elements. */
+  agendaViewWeekDayCell: string;
+  /** Styles applied to agenda view week day name label elements. */
+  agendaViewWeekDayNameLabel: string;
+  /** Styles applied to agenda view year and month label elements. */
+  agendaViewYearAndMonthLabel: string;
+  /** Styles applied to the agenda view events list element. */
+  agendaViewEventsList: string;
+  /** Styles applied to event skeleton elements. */
+  eventSkeleton: string;
+  /** Styles applied to the month view root element. */
+  monthView: string;
+  /** Styles applied to the month view grid element. */
+  monthViewGrid: string;
+  /** Styles applied to the month view header element. */
+  monthViewHeader: string;
+  /** Styles applied to month view header cell elements. */
+  monthViewHeaderCell: string;
+  /** Styles applied to the month view week header cell element. */
+  monthViewWeekHeaderCell: string;
+  /** Styles applied to the month view body element. */
+  monthViewBody: string;
+  /** Styles applied to month view row elements. */
+  monthViewRow: string;
+  /** Styles applied to month view week number cell elements. */
+  monthViewWeekNumberCell: string;
+  /** Styles applied to month view cell elements. */
+  monthViewCell: string;
+  /** Styles applied to month view cell number elements. */
+  monthViewCellNumber: string;
+  /** Styles applied to month view cell number button elements. */
+  monthViewCellNumberButton: string;
+  /** Styles applied to month view cell events container elements. */
+  monthViewCellEvents: string;
+  /** Styles applied to month view more events button elements. */
+  monthViewMoreEvents: string;
+  /** Styles applied to month view placeholder event container elements. */
+  monthViewPlaceholderContainer: string;
+  /** Styles applied to the day time grid container element. */
+  dayTimeGridContainer: string;
+  /** Styles applied to the day time grid element. */
+  dayTimeGrid: string;
+  /** Styles applied to the day time grid header element. */
+  dayTimeGridHeader: string;
+  /** Styles applied to day time grid header cell elements. */
+  dayTimeGridHeaderCell: string;
+  /** Styles applied to the day time grid all day events grid element. */
+  dayTimeGridAllDayEventsGrid: string;
+  /** Styles applied to the day time grid all day events row element. */
+  dayTimeGridAllDayEventsRow: string;
+  /** Styles applied to day time grid all day events cell elements. */
+  dayTimeGridAllDayEventsCell: string;
+  /** Styles applied to the day time grid all day events header cell element. */
+  dayTimeGridAllDayEventsHeaderCell: string;
+  /** Styles applied to day time grid header content elements. */
+  dayTimeGridHeaderContent: string;
+  /** Styles applied to day time grid header button elements. */
+  dayTimeGridHeaderButton: string;
+  /** Styles applied to day time grid header day name elements. */
+  dayTimeGridHeaderDayName: string;
+  /** Styles applied to day time grid header day number elements. */
+  dayTimeGridHeaderDayNumber: string;
+  /** Styles applied to the day time grid body element. */
+  dayTimeGridBody: string;
+  /** Styles applied to the day time grid scrollable content element. */
+  dayTimeGridScrollableContent: string;
+  /** Styles applied to the day time grid time axis element. */
+  dayTimeGridTimeAxis: string;
+  /** Styles applied to day time grid time axis cell elements. */
+  dayTimeGridTimeAxisCell: string;
+  /** Styles applied to day time grid time axis text elements. */
+  dayTimeGridTimeAxisText: string;
+  /** Styles applied to the day time grid grid element. */
+  dayTimeGridGrid: string;
+  /** Styles applied to day time grid column elements. */
+  dayTimeGridColumn: string;
+  /** Styles applied to day time grid column interactive layer elements. */
+  dayTimeGridColumnInteractiveLayer: string;
+  /** Styles applied to the day time grid current time indicator element. */
+  dayTimeGridCurrentTimeIndicator: string;
+  /** Styles applied to the day time grid current time indicator circle element. */
+  dayTimeGridCurrentTimeIndicatorCircle: string;
+  /** Styles applied to the day time grid current time label element. */
+  dayTimeGridCurrentTimeLabel: string;
+  /** Styles applied to day time grid all day events cell events container elements. */
+  dayTimeGridAllDayEventsCellEvents: string;
+  /** Styles applied to day time grid all day event container elements. */
+  dayTimeGridAllDayEventContainer: string;
+  /** Styles applied to the day time grid scrollable placeholder element. */
+  dayTimeGridScrollablePlaceholder: string;
+  /** Styles applied to day grid event elements. */
+  dayGridEvent: string;
+  /** Styles applied to day grid event placeholder elements. */
+  dayGridEventPlaceholder: string;
+  /** Styles applied to day grid event title elements. */
+  dayGridEventTitle: string;
+  /** Styles applied to day grid event time elements. */
+  dayGridEventTime: string;
+  /** Styles applied to day grid event recurring icon elements. */
+  dayGridEventRecurringIcon: string;
+  /** Styles applied to day grid event resize handler elements. */
+  dayGridEventResizeHandler: string;
+  /** Styles applied to day grid event card wrapper elements. */
+  dayGridEventCardWrapper: string;
+  /** Styles applied to day grid event card content elements. */
+  dayGridEventCardContent: string;
+  /** Styles applied to day grid event lines clamp elements. */
+  dayGridEventLinesClamp: string;
+  /** Styles applied to event color indicator elements. */
+  eventColorIndicator: string;
+  /** Styles applied to time grid event elements. */
+  timeGridEvent: string;
+  /** Styles applied to time grid event placeholder elements. */
+  timeGridEventPlaceholder: string;
+  /** Styles applied to time grid event skeleton elements. */
+  timeGridEventSkeleton: string;
+  /** Styles applied to time grid event title elements. */
+  timeGridEventTitle: string;
+  /** Styles applied to time grid event time elements. */
+  timeGridEventTime: string;
+  /** Styles applied to time grid event recurring icon elements. */
+  timeGridEventRecurringIcon: string;
+  /** Styles applied to time grid event resize handler elements. */
+  timeGridEventResizeHandler: string;
+  /** Styles applied to event item card elements. */
+  eventItemCard: string;
+  /** Styles applied to event item card wrapper elements. */
+  eventItemCardWrapper: string;
+  /** Styles applied to event item title elements. */
+  eventItemTitle: string;
+  /** Styles applied to event item time elements. */
+  eventItemTime: string;
+  /** Styles applied to event item recurring icon elements. */
+  eventItemRecurringIcon: string;
+  /** Styles applied to event item resource legend color elements. */
+  resourceLegendColor: string;
+  /** Styles applied to event item card content elements. */
+  eventItemCardContent: string;
+  /** Styles applied to event item lines clamp elements. */
+  eventItemLinesClamp: string;
+  /** Styles applied to the more events popover header element. */
+  moreEventsPopoverHeader: string;
+  /** Styles applied to the more events popover title element. */
+  moreEventsPopoverTitle: string;
+  /** Styles applied to the more events popover body element. */
+  moreEventsPopoverBody: string;
+  /** Styles applied to the event drag preview element. */
+  eventDragPreview: string;
+  /** Styles applied to the standalone event element. */
+  standaloneEvent: string;
+  /** Styles applied to the agenda view event list item elements. */
+  agendaViewEventListItem: string;
+  /** Styles applied to the side panel collapse element. */
+  sidePanelCollapse: string;
+  /** Styles applied to the side panel divider element. */
+  sidePanelDivider: string;
+  /** Styles applied to the header toolbar side panel toggle button element. */
+  headerToolbarSidePanelToggle: string;
+  /** Styles applied to the header toolbar previous button element. */
+  headerToolbarPreviousButton: string;
+  /** Styles applied to the header toolbar today button element. */
+  headerToolbarTodayButton: string;
+  /** Styles applied to the header toolbar next button element. */
+  headerToolbarNextButton: string;
+  /** Styles applied to the preferences menu button element. */
+  preferencesMenuButton: string;
+  /** Styles applied to the preferences menu list element. */
+  preferencesMenuList: string;
+  /** Styles applied to the preferences menu list item icon elements. */
+  preferencesMenuListItemIcon: string;
+  /** Styles applied to the preferences menu list subheader elements. */
+  preferencesMenuListSubheader: string;
+  /** Styles applied to the preferences menu item elements. */
+  preferencesMenuItem: string;
+  /** Styles applied to the preferences menu divider elements. */
+  preferencesMenuDivider: string;
+  /** Styles applied to the preferences menu list item text elements. */
+  preferencesMenuListItemText: string;
+  /** Styles applied to the view switcher button element. */
+  viewSwitcherButton: string;
+  /** Styles applied to the view switcher menu element. */
+  viewSwitcherMenu: string;
+  /** Styles applied to the mini calendar previous button element. */
+  miniCalendarPreviousButton: string;
+  /** Styles applied to the mini calendar next button element. */
+  miniCalendarNextButton: string;
+  /** Styles applied to the more events popover element. */
+  moreEventsPopover: string;
+  /** Styles applied to the event dialog root element. */
+  eventDialog: string;
+  /** Styles applied to the event dialog close button element. */
+  eventDialogCloseButton: string;
+  /** Styles applied to the event dialog header element. */
+  eventDialogHeader: string;
+  /** Styles applied to the event dialog readonly content element. */
+  eventDialogReadonlyContent: string;
+  /** Styles applied to the event dialog actions element. */
+  eventDialogActions: string;
+  /** Styles applied to the event dialog date time container element. */
+  eventDialogDateTimeContainer: string;
+  /** Styles applied to the event dialog title element. */
+  eventDialogTitle: string;
+  /** Styles applied to the event dialog resource container element. */
+  eventDialogResourceContainer: string;
+  /** Styles applied to the event dialog resource legend container element. */
+  eventDialogResourceLegendContainer: string;
+  /** Styles applied to the event dialog resource legend color element. */
+  eventDialogResourceLegendColor: string;
+  /** Styles applied to the event dialog resource title element. */
+  eventDialogResourceTitle: string;
+  /** Styles applied to the event dialog paper element. */
+  eventDialogPaper: string;
+  /** Styles applied to the event dialog form element. */
+  eventDialogForm: string;
+  /** Styles applied to the event dialog form actions element. */
+  eventDialogFormActions: string;
+  /** Styles applied to the event dialog content element. */
+  eventDialogContent: string;
+  /** Styles applied to the event dialog tab panel element. */
+  eventDialogTabPanel: string;
+  /** Styles applied to the event dialog tab content element. */
+  eventDialogTabContent: string;
+  /** Styles applied to the event dialog date time fields container element. */
+  eventDialogDateTimeFieldsContainer: string;
+  /** Styles applied to the event dialog date time fields row element. */
+  eventDialogDateTimeFieldsRow: string;
+  /** Styles applied to the event dialog recurrence label container element in the readonly content. */
+  eventDialogRecurrenceLabelContainer: string;
+  /** Styles applied to the event dialog recurrence selector container element. */
+  eventDialogRecurrenceSelectorContainer: string;
+  /** Styles applied to the event dialog resource menu item element. */
+  eventDialogResourceMenuItem: string;
+  /** Styles applied to the event dialog resource menu list subheader element. */
+  eventDialogResourceMenuListSubheader: string;
+  /** Styles applied to the event dialog resource menu color dot element. */
+  eventDialogResourceMenuColorDot: string;
+  /** Styles applied to the event dialog resource menu color radio button element. */
+  eventDialogResourceMenuColorRadioButton: string;
+  /** Styles applied to the event dialog inline row element. */
+  eventDialogInlineRow: string;
+  /** Styles applied to the event dialog section header title element. */
+  eventDialogSectionHeaderTitle: string;
+  /** Styles applied to the event dialog radio button label element. */
+  eventDialogRadioButtonLabel: string;
+  /** Styles applied to the event dialog repeat section label element. */
+  eventDialogRepeatSectionLabel: string;
+  /** Styles applied to the event dialog ends radio group element. */
+  eventDialogEndsRadioGroup: string;
+  /** Styles applied to the event dialog repeat section fieldset element. */
+  eventDialogRepeatSectionFieldset: string;
+  /** Styles applied to the event dialog repeat section content element. */
+  eventDialogRepeatSectionContent: string;
+  /** Styles applied to the event dialog recurrence selector toggle group element. */
+  eventDialogRecurrenceSelectorToggleGroup: string;
+  /** Styles applied to the event dialog week day selector form group element. */
+  eventDialogWeekDaySelectorCheckbox: string;
+  /** Styles applied to the event dialog frequency select element. */
+  eventDialogFrequencySelect: string;
+  /** Styles applied to the event dialog small number field element. */
+  eventDialogSmallNumberField: string;
+  /** Styles applied to the event dialog tabs container element. */
+  eventDialogTabsContainer: string;
+  /** Styles applied to the event dialog tab elements. */
+  eventDialogTab: string;
+  /** Styles applied to the event dialog form divider element. */
+  eventDialogFormDivider: string;
+  /** Styles applied to the event dialog delete button element. */
+  eventDialogDeleteButton: string;
+  /** Styles applied to the event dialog save button element. */
+  eventDialogSaveButton: string;
+  /** Styles applied to the event dialog close action button element. */
+  eventDialogCloseAction: string;
+  /** Styles applied to the event dialog date time icon element. */
+  eventDialogDateTimeIcon: string;
+  /** Styles applied to the event dialog date time label element. */
+  eventDialogDateTimeLabel: string;
+  /** Styles applied to the event dialog recurrence icon element. */
+  eventDialogRecurrenceIcon: string;
+  /** Styles applied to the event dialog recurrence label element. */
+  eventDialogRecurrenceLabel: string;
+  /** Styles applied to the event dialog description label element. */
+  eventDialogDescriptionLabel: string;
+};
+```
+
+### EventCalendarClassKey
+
+```typescript
+type EventCalendarClassKey =
+  | 'root'
+  | 'sidePanel'
+  | 'mainPanel'
+  | 'content'
+  | 'miniCalendar'
+  | 'miniCalendarHeader'
+  | 'miniCalendarNavigation'
+  | 'miniCalendarMonthLabel'
+  | 'miniCalendarWeekdayHeader'
+  | 'miniCalendarWeekdayCell'
+  | 'miniCalendarGrid'
+  | 'miniCalendarWeekRow'
+  | 'miniCalendarDayCell'
+  | 'miniCalendarDayButton'
+  | 'errorContainer'
+  | 'errorAlert'
+  | 'errorMessage'
+  | 'headerToolbar'
+  | 'headerToolbarActions'
+  | 'headerToolbarLeftElement'
+  | 'headerToolbarLabel'
+  | 'headerToolbarDateNavigator'
+  | 'viewSwitcher'
+  | 'preferencesMenu'
+  | 'resourcesLegend'
+  | 'resourcesLegendLabel'
+  | 'resourcesLegendItem'
+  | 'resourcesLegendItemName'
+  | 'resourcesLegendItemCheckbox'
+  | 'agendaView'
+  | 'agendaViewRow'
+  | 'agendaViewDayHeaderCell'
+  | 'agendaViewDayNumberCell'
+  | 'agendaViewWeekDayCell'
+  | 'agendaViewWeekDayNameLabel'
+  | 'agendaViewYearAndMonthLabel'
+  | 'agendaViewEventsList'
+  | 'eventSkeleton'
+  | 'monthView'
+  | 'monthViewGrid'
+  | 'monthViewHeader'
+  | 'monthViewHeaderCell'
+  | 'monthViewWeekHeaderCell'
+  | 'monthViewBody'
+  | 'monthViewRow'
+  | 'monthViewWeekNumberCell'
+  | 'monthViewCell'
+  | 'monthViewCellNumber'
+  | 'monthViewCellNumberButton'
+  | 'monthViewCellEvents'
+  | 'monthViewMoreEvents'
+  | 'monthViewPlaceholderContainer'
+  | 'dayTimeGridContainer'
+  | 'dayTimeGrid'
+  | 'dayTimeGridHeader'
+  | 'dayTimeGridHeaderCell'
+  | 'dayTimeGridAllDayEventsGrid'
+  | 'dayTimeGridAllDayEventsRow'
+  | 'dayTimeGridAllDayEventsCell'
+  | 'dayTimeGridAllDayEventsHeaderCell'
+  | 'dayTimeGridHeaderContent'
+  | 'dayTimeGridHeaderButton'
+  | 'dayTimeGridHeaderDayName'
+  | 'dayTimeGridHeaderDayNumber'
+  | 'dayTimeGridBody'
+  | 'dayTimeGridScrollableContent'
+  | 'dayTimeGridTimeAxis'
+  | 'dayTimeGridTimeAxisCell'
+  | 'dayTimeGridTimeAxisText'
+  | 'dayTimeGridGrid'
+  | 'dayTimeGridColumn'
+  | 'dayTimeGridColumnInteractiveLayer'
+  | 'dayTimeGridCurrentTimeIndicator'
+  | 'dayTimeGridCurrentTimeIndicatorCircle'
+  | 'dayTimeGridCurrentTimeLabel'
+  | 'dayTimeGridAllDayEventsCellEvents'
+  | 'dayTimeGridAllDayEventContainer'
+  | 'dayTimeGridScrollablePlaceholder'
+  | 'dayGridEvent'
+  | 'dayGridEventPlaceholder'
+  | 'dayGridEventTitle'
+  | 'dayGridEventTime'
+  | 'dayGridEventRecurringIcon'
+  | 'dayGridEventResizeHandler'
+  | 'dayGridEventCardWrapper'
+  | 'dayGridEventCardContent'
+  | 'dayGridEventLinesClamp'
+  | 'eventColorIndicator'
+  | 'timeGridEvent'
+  | 'timeGridEventPlaceholder'
+  | 'timeGridEventSkeleton'
+  | 'timeGridEventTitle'
+  | 'timeGridEventTime'
+  | 'timeGridEventRecurringIcon'
+  | 'timeGridEventResizeHandler'
+  | 'eventItemCard'
+  | 'eventItemCardWrapper'
+  | 'eventItemTitle'
+  | 'eventItemTime'
+  | 'eventItemRecurringIcon'
+  | 'resourceLegendColor'
+  | 'eventItemCardContent'
+  | 'eventItemLinesClamp'
+  | 'moreEventsPopoverHeader'
+  | 'moreEventsPopoverTitle'
+  | 'moreEventsPopoverBody'
+  | 'eventDragPreview'
+  | 'standaloneEvent'
+  | 'agendaViewEventListItem'
+  | 'sidePanelCollapse'
+  | 'sidePanelDivider'
+  | 'headerToolbarSidePanelToggle'
+  | 'headerToolbarPreviousButton'
+  | 'headerToolbarTodayButton'
+  | 'headerToolbarNextButton'
+  | 'preferencesMenuButton'
+  | 'preferencesMenuList'
+  | 'preferencesMenuListItemIcon'
+  | 'preferencesMenuListSubheader'
+  | 'preferencesMenuItem'
+  | 'preferencesMenuDivider'
+  | 'preferencesMenuListItemText'
+  | 'viewSwitcherButton'
+  | 'viewSwitcherMenu'
+  | 'miniCalendarPreviousButton'
+  | 'miniCalendarNextButton'
+  | 'moreEventsPopover'
+  | 'eventDialog'
+  | 'eventDialogCloseButton'
+  | 'eventDialogHeader'
+  | 'eventDialogReadonlyContent'
+  | 'eventDialogActions'
+  | 'eventDialogDateTimeContainer'
+  | 'eventDialogTitle'
+  | 'eventDialogResourceContainer'
+  | 'eventDialogResourceLegendContainer'
+  | 'eventDialogResourceLegendColor'
+  | 'eventDialogResourceTitle'
+  | 'eventDialogPaper'
+  | 'eventDialogForm'
+  | 'eventDialogFormActions'
+  | 'eventDialogContent'
+  | 'eventDialogTabPanel'
+  | 'eventDialogTabContent'
+  | 'eventDialogDateTimeFieldsContainer'
+  | 'eventDialogDateTimeFieldsRow'
+  | 'eventDialogRecurrenceLabelContainer'
+  | 'eventDialogRecurrenceSelectorContainer'
+  | 'eventDialogResourceMenuItem'
+  | 'eventDialogResourceMenuListSubheader'
+  | 'eventDialogResourceMenuColorDot'
+  | 'eventDialogResourceMenuColorRadioButton'
+  | 'eventDialogInlineRow'
+  | 'eventDialogSectionHeaderTitle'
+  | 'eventDialogRadioButtonLabel'
+  | 'eventDialogRepeatSectionLabel'
+  | 'eventDialogEndsRadioGroup'
+  | 'eventDialogRepeatSectionFieldset'
+  | 'eventDialogRepeatSectionContent'
+  | 'eventDialogRecurrenceSelectorToggleGroup'
+  | 'eventDialogWeekDaySelectorCheckbox'
+  | 'eventDialogFrequencySelect'
+  | 'eventDialogSmallNumberField'
+  | 'eventDialogTabsContainer'
+  | 'eventDialogTab'
+  | 'eventDialogFormDivider'
+  | 'eventDialogDeleteButton'
+  | 'eventDialogSaveButton'
+  | 'eventDialogCloseAction'
+  | 'eventDialogDateTimeIcon'
+  | 'eventDialogDateTimeLabel'
+  | 'eventDialogRecurrenceIcon'
+  | 'eventDialogRecurrenceLabel'
+  | 'eventDialogDescriptionLabel';
+```
+
+### EventCalendarProps
+
+```typescript
+type EventCalendarProps<TEvent extends {}, TResource extends {}> = {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<EventCalendarClasses>;
+  /**
+   * Set the locale text of the Event Calendar.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts)
+   * in the GitHub repository.
+   */
+  localeText?: Partial<EventCalendarLocaleText>;
+  /**
+   * The ref object that allows Event Calendar manipulation.
+   * Can be instantiated with `useEventCalendarApiRef()`.
+   */
+  apiRef?: EventCalendarApiRef;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** The view currently displayed in the calendar. */
+  view?: CalendarView;
+  /**
+   * The view initially displayed in the calendar.
+   * To render a controlled calendar, use the `view` prop.
+   * @default "week"
+   */
+  defaultView?: CalendarView;
+  /**
+   * The views available in the calendar.
+   * @default ["day", "week", "month", "agenda"]
+   */
+  views?: CalendarView[];
+  /** Event handler called when the view changes. */
+  onViewChange?: (view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void;
+  /**
+   * The default preferences for the calendar.
+   * To use controlled preferences, use the `preferences` prop.
+   * @default { showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }
+   */
+  defaultPreferences?: Partial<EventCalendarPreferences>;
+  /** Preferences currently displayed in the calendar. */
+  preferences?: Partial<EventCalendarPreferences>;
+  /** Event handler called when the preferences change. */
+  onPreferencesChange?: (
+    preferences: Partial<EventCalendarPreferences>,
+    eventDetails: SchedulerChangeEventDetails,
+  ) => void;
+  /**
+   * Config of the preferences menu.
+   * Defines which options are visible in the menu.
+   * If `false`, the menu will be entirely hidden.
+   * @default { toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }
+   */
+  preferencesMenuConfig?: Partial<EventCalendarPreferencesMenuConfig> | false;
+  /**
+   * The events currently available in the calendar.
+   * @default []
+   */
+  events?: TEvent[];
+  /** Callback fired when some event of the calendar change. */
+  onEventsChange?: (value: TEvent[], eventDetails: SchedulerChangeEventDetails) => void;
+  /**
+   * The structure of the event model.
+   * It defines how to read and write the properties of the event model.
+   * If not provided, the event model is assumed to match the `CalendarEvent` interface.
+   */
+  eventModelStructure?: SchedulerEventModelStructure<TEvent>;
+  /** The resources the events can be assigned to. */
+  resources?: TResource[];
+  /**
+   * The structure of the resource model.
+   * It defines how to read and write the properties of the resource model.
+   * If not provided, the resource model is assumed to match the `CalendarResource` interface.
+   */
+  resourceModelStructure?: SchedulerResourceModelStructure<TResource>;
+  /**
+   * The IDs of the resources currently visible.
+   * A resource is visible if it is not included in this object or if it is included with `true` value.
+   */
+  visibleResources?: Record<string, boolean>;
+  /**
+   * The IDs of the resources initially visible.
+   * To render a controlled scheduler, use the `visibleResources` prop.
+   * @default {} - all resources are visible
+   */
+  defaultVisibleResources?: Record<string, boolean>;
+  /** Event handler called when the visible resources change. */
+  onVisibleResourcesChange?: (
+    visibleResources: Record<string, boolean>,
+    eventDetails: SchedulerChangeEventDetails,
+  ) => void;
+  /** The date currently used to determine the visible date range in each view. */
+  visibleDate?: Date;
+  /**
+   * The date initially used to determine the visible date range in each view.
+   * To render a controlled calendar, use the `visibleDate` prop.
+   * @default today
+   */
+  defaultVisibleDate?: Date;
+  /** Event handler called when the visible date changes. */
+  onVisibleDateChange?: (visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void;
+  /**
+   * Whether the event can be dragged to change its start and end dates without changing the duration.
+   * @default true
+   */
+  areEventsDraggable?: boolean;
+  /**
+   * Whether the event start or end can be dragged to change its duration without changing its other date.
+   * If `true`, both start and end can be resized.
+   * If `false`, the events are not resizable.
+   * If `"start"`, only the start can be resized.
+   * If `"end"`, only the end can be resized.
+   * @default true
+   */
+  areEventsResizable?: boolean | SchedulerEventSide;
+  /**
+   * Whether events can be dragged from outside of the calendar and dropped into it.
+   * @default false
+   */
+  canDragEventsFromTheOutside?: boolean;
+  /**
+   * Whether events can be dragged from inside of the calendar and dropped outside of it.
+   * If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.
+   * If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.
+   * @default false
+   */
+  canDropEventsToTheOutside?: boolean;
+  /**
+   * Whether the component should display the current time indicator.
+   * @default true
+   */
+  showCurrentTimeIndicator?: boolean;
+  /**
+   * The color palette used for all events.
+   * Can be overridden per resource using the `eventColor` property on the resource model.
+   * Can be overridden per event using the `color` property on the event model.
+   * @default "teal"
+   */
+  eventColor?: SchedulerEventColor;
+  /**
+   * Whether the calendar is in read-only mode.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Data source for fetching events asynchronously.
+   * When provided, events are fetched through the data source instead of the `events` prop.
+   */
+  dataSource?: SchedulerDataSource<TEvent>;
+  eventCreation?: Partial<SchedulerEventCreationConfig> | boolean;
+  /**
+   * The timezone used to display events in the scheduler.
+   *
+   * Accepts any valid IANA timezone name
+   * (for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),
+   * or keywords understood by the adapter, such as
+   * "default" (use the adapter's default timezone),
+   * "locale" (use the user's current locale timezone),
+   * or "UTC".
+   *
+   * This timezone only affects rendering, events keep their original data timezone.
+   * @default "default"
+   */
+  displayTimezone?: string;
+  /**
+   * The locale object from `date-fns` used to format dates.
+   * This affects day names, month names, week start day, and other locale-dependent formatting.
+   * Import a locale from `date-fns/locale` and pass it to this prop.
+   * @default enUS (English)
+   */
+  dateLocale?: Locale;
+};
+```
+
+### EventCalendarStyledContext
+
+```typescript
+type EventCalendarStyledContext = React.Context<EventCalendarStyledContextValue | null>;
+```
+
+### EventCalendarStyledContextValue
+
+```typescript
+type EventCalendarStyledContextValue = {
+  classes: EventCalendarClasses;
+  localeText: EventCalendarLocaleText;
+};
+```
+
+## External Types
+
+### CalendarView
+
+```typescript
+type CalendarView = 'day' | 'week' | 'month' | 'agenda';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.event-calendar.ts b/docs/pages/x/api/scheduler/types.event-calendar.ts
new file mode 100644
index 0000000000000..f9eac3165b796
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.event-calendar.ts
@@ -0,0 +1,4 @@
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesEventCalendar = createTypes(import.meta.url, EventCalendar);
diff --git a/docs/pages/x/api/scheduler/types.event-timeline-premium.md b/docs/pages/x/api/scheduler/types.event-timeline-premium.md
new file mode 100644
index 0000000000000..542b1c9ed9b76
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.event-timeline-premium.md
@@ -0,0 +1,563 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.event-timeline-premium.md'
+
+## API Reference
+
+### EventTimelinePremium
+
+**EventTimelinePremium Props:**
+
+| Prop                        | Type                                                                                               | Default                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                      | `EventTimelinePremiumApiRef`                                                                       | -                                              | The ref object that allows Event Timeline manipulation.&#xA;Can be instantiated with `useEventTimelinePremiumApiRef()`.                                                                                                                                                                                                                                                                                                    |
+| areEventsDraggable          | `boolean`                                                                                          | `true`                                         | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                    | `true`                                         | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                          | `false`                                        | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                          | `false`                                        | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| classes                     | `Partial<EventTimelinePremiumClasses>`                                                             | -                                              | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                    |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                          | -                                              | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                           | `enUS (English)`                               | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventTimelinePremiumPreferences>`                                                         | `{ ampm: true }`                               | The default preferences for the timeline.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `EventTimelinePremiumView`                                                                         | `"time"`                                       | The view initially displayed in the timeline.&#xA;To render a controlled timeline, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                             | `today`                                        | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                          | `{} - all resources are visible`               | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                           | `"default"`                                    | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                              | `"teal"`                                       | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                 | -                                              | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                 | -                                              | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                             | `[]`                                           | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| localeText                  | `Partial<EventTimelineLocaleText>`                                                                 | -                                              | Set the locale text of the Event Timeline.&#xA;You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-scheduler/src/models/translations.ts)&#xA;in the GitHub repository.                                                                                                                                                                                       |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                               | -                                              | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventTimelinePremiumPreferences>, event: React.UIEvent \| Event) => void)` | -                                              | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: EventTimelinePremiumView, eventDetails: SchedulerChangeEventDetails) => void)`            | -                                              | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                         | -                                              | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                              | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventTimelinePremiumPreferences>`                                                         | -                                              | Preferences currently displayed in the timeline.                                                                                                                                                                                                                                                                                                                                                                           |
+| resourceColumnLabel         | `string`                                                                                           | -                                              | The label displayed in the resource column header.&#xA;When provided, this takes priority over `localeText.timelineResourceTitleHeader`.                                                                                                                                                                                                                                                                                   |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                              | -                                              | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                             | -                                              | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                          | `true`                                         | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                   | -                                              | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `EventTimelinePremiumView`                                                                         | -                                              | The view currently displayed in the timeline.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `EventTimelinePremiumView[]`                                                                       | `["time", "days", "weeks", "months", "years"]` | The views available in the timeline.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                             | -                                              | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                          | -                                              | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                          | `false`                                        | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+### getEventTimelinePremiumUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+## Additional Types
+
+### eventTimelinePremiumClasses
+
+```typescript
+type eventTimelinePremiumClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the content section element. */
+  content: string;
+  /** Styles applied to the grid element. */
+  grid: string;
+  /** Styles applied to the header row element. */
+  headerRow: string;
+  /** Styles applied to the title header cell element. */
+  titleHeaderCell: string;
+  /** Styles applied to the events header cell element. */
+  eventsHeaderCell: string;
+  /** Styles applied to the events header cell content element. */
+  eventsHeaderCellContent: string;
+  /** Styles applied to the title sub-grid element. */
+  titleSubGrid: string;
+  /** Styles applied to the events sub-grid wrapper element. */
+  eventsSubGridWrapper: string;
+  /** Styles applied to the events sub-grid element. */
+  eventsSubGrid: string;
+  /** Styles applied to the events sub-grid row element. */
+  eventsSubGridRow: string;
+  /** Styles applied to the title cell row element. */
+  titleCellRow: string;
+  /** Styles applied to the title cell element. */
+  titleCell: string;
+  /** Styles applied to the title cell legend color element. */
+  titleCellLegendColor: string;
+  /** Styles applied to the current time indicator element. */
+  currentTimeIndicator: string;
+  /** Styles applied to the current time indicator circle element. */
+  currentTimeIndicatorCircle: string;
+  /** Styles applied to event elements. */
+  event: string;
+  /** Styles applied to event placeholder elements. */
+  eventPlaceholder: string;
+  /** Styles applied to event resize handler elements. */
+  eventResizeHandler: string;
+  /** Styles applied to event lines clamp elements. */
+  eventLinesClamp: string;
+  /** Styles applied to the time header root element. */
+  timeHeader: string;
+  /** Styles applied to time header cell elements. */
+  timeHeaderCell: string;
+  /** Styles applied to the time header day label element. */
+  timeHeaderDayLabel: string;
+  /** Styles applied to the time header cells row element. */
+  timeHeaderCellsRow: string;
+  /** Styles applied to time header time cell elements. */
+  timeHeaderTimeCell: string;
+  /** Styles applied to time header time label elements. */
+  timeHeaderTimeLabel: string;
+  /** Styles applied to the days header root element. */
+  daysHeader: string;
+  /** Styles applied to days header cell elements. */
+  daysHeaderCell: string;
+  /** Styles applied to days header time elements. */
+  daysHeaderTime: string;
+  /** Styles applied to days header week day elements. */
+  daysHeaderWeekDay: string;
+  /** Styles applied to days header day number elements. */
+  daysHeaderDayNumber: string;
+  /** Styles applied to days header month start elements. */
+  daysHeaderMonthStart: string;
+  /** Styles applied to days header month start label elements. */
+  daysHeaderMonthStartLabel: string;
+  /** Styles applied to the weeks header root element. */
+  weeksHeader: string;
+  /** Styles applied to weeks header cell elements. */
+  weeksHeaderCell: string;
+  /** Styles applied to weeks header day label elements. */
+  weeksHeaderDayLabel: string;
+  /** Styles applied to the weeks header days row element. */
+  weeksHeaderDaysRow: string;
+  /** Styles applied to weeks header day cell elements. */
+  weeksHeaderDayCell: string;
+  /** Styles applied to the months header root element. */
+  monthsHeader: string;
+  /** Styles applied to months header year label elements. */
+  monthsHeaderYearLabel: string;
+  /** Styles applied to months header month label elements. */
+  monthsHeaderMonthLabel: string;
+  /** Styles applied to the years header root element. */
+  yearsHeader: string;
+  /** Styles applied to years header year label elements. */
+  yearsHeaderYearLabel: string;
+  /** Styles applied to the event dialog root element. */
+  eventDialog: string;
+  /** Styles applied to the event dialog close button element. */
+  eventDialogCloseButton: string;
+  /** Styles applied to the event dialog header element. */
+  eventDialogHeader: string;
+  /** Styles applied to the event dialog readonly content element. */
+  eventDialogReadonlyContent: string;
+  /** Styles applied to the event dialog actions element. */
+  eventDialogActions: string;
+  /** Styles applied to the event dialog date time container element. */
+  eventDialogDateTimeContainer: string;
+  /** Styles applied to the event dialog title element. */
+  eventDialogTitle: string;
+  /** Styles applied to the event dialog resource container element. */
+  eventDialogResourceContainer: string;
+  /** Styles applied to the event dialog resource legend container element. */
+  eventDialogResourceLegendContainer: string;
+  /** Styles applied to the event dialog resource legend color element. */
+  eventDialogResourceLegendColor: string;
+  /** Styles applied to the event dialog resource title element. */
+  eventDialogResourceTitle: string;
+  /** Styles applied to the event dialog paper element. */
+  eventDialogPaper: string;
+  /** Styles applied to the event dialog form element. */
+  eventDialogForm: string;
+  /** Styles applied to the event dialog form actions element. */
+  eventDialogFormActions: string;
+  /** Styles applied to the event dialog content element. */
+  eventDialogContent: string;
+  /** Styles applied to the event dialog tab panel element. */
+  eventDialogTabPanel: string;
+  /** Styles applied to the event dialog tab content element. */
+  eventDialogTabContent: string;
+  /** Styles applied to the event dialog date time fields container element. */
+  eventDialogDateTimeFieldsContainer: string;
+  /** Styles applied to the event dialog date time fields row element. */
+  eventDialogDateTimeFieldsRow: string;
+  /** Styles applied to the event dialog recurrence label container element in the readonly content. */
+  eventDialogRecurrenceLabelContainer: string;
+  /** Styles applied to the event dialog recurrence selector container element. */
+  eventDialogRecurrenceSelectorContainer: string;
+  /** Styles applied to the event dialog resource menu item element. */
+  eventDialogResourceMenuItem: string;
+  /** Styles applied to the event dialog resource menu list subheader element. */
+  eventDialogResourceMenuListSubheader: string;
+  /** Styles applied to the event dialog resource menu color dot element. */
+  eventDialogResourceMenuColorDot: string;
+  /** Styles applied to the event dialog resource menu color radio button element. */
+  eventDialogResourceMenuColorRadioButton: string;
+  /** Styles applied to the event dialog inline row element. */
+  eventDialogInlineRow: string;
+  /** Styles applied to the event dialog section header title element. */
+  eventDialogSectionHeaderTitle: string;
+  /** Styles applied to the event dialog radio button label element. */
+  eventDialogRadioButtonLabel: string;
+  /** Styles applied to the event dialog repeat section label element. */
+  eventDialogRepeatSectionLabel: string;
+  /** Styles applied to the event dialog ends radio group element. */
+  eventDialogEndsRadioGroup: string;
+  /** Styles applied to the event dialog repeat section fieldset element. */
+  eventDialogRepeatSectionFieldset: string;
+  /** Styles applied to the event dialog repeat section content element. */
+  eventDialogRepeatSectionContent: string;
+  /** Styles applied to the event dialog recurrence selector toggle group element. */
+  eventDialogRecurrenceSelectorToggleGroup: string;
+  /** Styles applied to the event dialog week day selector form group element. */
+  eventDialogWeekDaySelectorCheckbox: string;
+  /** Styles applied to the event dialog frequency select element. */
+  eventDialogFrequencySelect: string;
+  /** Styles applied to the event dialog small number field element. */
+  eventDialogSmallNumberField: string;
+  /** Styles applied to the event dialog tabs container element. */
+  eventDialogTabsContainer: string;
+  /** Styles applied to the event dialog tab elements. */
+  eventDialogTab: string;
+  /** Styles applied to the event dialog form divider element. */
+  eventDialogFormDivider: string;
+  /** Styles applied to the event dialog delete button element. */
+  eventDialogDeleteButton: string;
+  /** Styles applied to the event dialog save button element. */
+  eventDialogSaveButton: string;
+  /** Styles applied to the event dialog close action button element. */
+  eventDialogCloseAction: string;
+  /** Styles applied to the event dialog date time icon element. */
+  eventDialogDateTimeIcon: string;
+  /** Styles applied to the event dialog date time label element. */
+  eventDialogDateTimeLabel: string;
+  /** Styles applied to the event dialog recurrence icon element. */
+  eventDialogRecurrenceIcon: string;
+  /** Styles applied to the event dialog recurrence label element. */
+  eventDialogRecurrenceLabel: string;
+  /** Styles applied to the event dialog description label element. */
+  eventDialogDescriptionLabel: string;
+};
+```
+
+### EventTimelinePremiumClasses
+
+```typescript
+type EventTimelinePremiumClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the content section element. */
+  content: string;
+  /** Styles applied to the grid element. */
+  grid: string;
+  /** Styles applied to the header row element. */
+  headerRow: string;
+  /** Styles applied to the title header cell element. */
+  titleHeaderCell: string;
+  /** Styles applied to the events header cell element. */
+  eventsHeaderCell: string;
+  /** Styles applied to the events header cell content element. */
+  eventsHeaderCellContent: string;
+  /** Styles applied to the title sub-grid element. */
+  titleSubGrid: string;
+  /** Styles applied to the events sub-grid wrapper element. */
+  eventsSubGridWrapper: string;
+  /** Styles applied to the events sub-grid element. */
+  eventsSubGrid: string;
+  /** Styles applied to the events sub-grid row element. */
+  eventsSubGridRow: string;
+  /** Styles applied to the title cell row element. */
+  titleCellRow: string;
+  /** Styles applied to the title cell element. */
+  titleCell: string;
+  /** Styles applied to the title cell legend color element. */
+  titleCellLegendColor: string;
+  /** Styles applied to the current time indicator element. */
+  currentTimeIndicator: string;
+  /** Styles applied to the current time indicator circle element. */
+  currentTimeIndicatorCircle: string;
+  /** Styles applied to event elements. */
+  event: string;
+  /** Styles applied to event placeholder elements. */
+  eventPlaceholder: string;
+  /** Styles applied to event resize handler elements. */
+  eventResizeHandler: string;
+  /** Styles applied to event lines clamp elements. */
+  eventLinesClamp: string;
+  /** Styles applied to the time header root element. */
+  timeHeader: string;
+  /** Styles applied to time header cell elements. */
+  timeHeaderCell: string;
+  /** Styles applied to the time header day label element. */
+  timeHeaderDayLabel: string;
+  /** Styles applied to the time header cells row element. */
+  timeHeaderCellsRow: string;
+  /** Styles applied to time header time cell elements. */
+  timeHeaderTimeCell: string;
+  /** Styles applied to time header time label elements. */
+  timeHeaderTimeLabel: string;
+  /** Styles applied to the days header root element. */
+  daysHeader: string;
+  /** Styles applied to days header cell elements. */
+  daysHeaderCell: string;
+  /** Styles applied to days header time elements. */
+  daysHeaderTime: string;
+  /** Styles applied to days header week day elements. */
+  daysHeaderWeekDay: string;
+  /** Styles applied to days header day number elements. */
+  daysHeaderDayNumber: string;
+  /** Styles applied to days header month start elements. */
+  daysHeaderMonthStart: string;
+  /** Styles applied to days header month start label elements. */
+  daysHeaderMonthStartLabel: string;
+  /** Styles applied to the weeks header root element. */
+  weeksHeader: string;
+  /** Styles applied to weeks header cell elements. */
+  weeksHeaderCell: string;
+  /** Styles applied to weeks header day label elements. */
+  weeksHeaderDayLabel: string;
+  /** Styles applied to the weeks header days row element. */
+  weeksHeaderDaysRow: string;
+  /** Styles applied to weeks header day cell elements. */
+  weeksHeaderDayCell: string;
+  /** Styles applied to the months header root element. */
+  monthsHeader: string;
+  /** Styles applied to months header year label elements. */
+  monthsHeaderYearLabel: string;
+  /** Styles applied to months header month label elements. */
+  monthsHeaderMonthLabel: string;
+  /** Styles applied to the years header root element. */
+  yearsHeader: string;
+  /** Styles applied to years header year label elements. */
+  yearsHeaderYearLabel: string;
+  /** Styles applied to the event dialog root element. */
+  eventDialog: string;
+  /** Styles applied to the event dialog close button element. */
+  eventDialogCloseButton: string;
+  /** Styles applied to the event dialog header element. */
+  eventDialogHeader: string;
+  /** Styles applied to the event dialog readonly content element. */
+  eventDialogReadonlyContent: string;
+  /** Styles applied to the event dialog actions element. */
+  eventDialogActions: string;
+  /** Styles applied to the event dialog date time container element. */
+  eventDialogDateTimeContainer: string;
+  /** Styles applied to the event dialog title element. */
+  eventDialogTitle: string;
+  /** Styles applied to the event dialog resource container element. */
+  eventDialogResourceContainer: string;
+  /** Styles applied to the event dialog resource legend container element. */
+  eventDialogResourceLegendContainer: string;
+  /** Styles applied to the event dialog resource legend color element. */
+  eventDialogResourceLegendColor: string;
+  /** Styles applied to the event dialog resource title element. */
+  eventDialogResourceTitle: string;
+  /** Styles applied to the event dialog paper element. */
+  eventDialogPaper: string;
+  /** Styles applied to the event dialog form element. */
+  eventDialogForm: string;
+  /** Styles applied to the event dialog form actions element. */
+  eventDialogFormActions: string;
+  /** Styles applied to the event dialog content element. */
+  eventDialogContent: string;
+  /** Styles applied to the event dialog tab panel element. */
+  eventDialogTabPanel: string;
+  /** Styles applied to the event dialog tab content element. */
+  eventDialogTabContent: string;
+  /** Styles applied to the event dialog date time fields container element. */
+  eventDialogDateTimeFieldsContainer: string;
+  /** Styles applied to the event dialog date time fields row element. */
+  eventDialogDateTimeFieldsRow: string;
+  /** Styles applied to the event dialog recurrence label container element in the readonly content. */
+  eventDialogRecurrenceLabelContainer: string;
+  /** Styles applied to the event dialog recurrence selector container element. */
+  eventDialogRecurrenceSelectorContainer: string;
+  /** Styles applied to the event dialog resource menu item element. */
+  eventDialogResourceMenuItem: string;
+  /** Styles applied to the event dialog resource menu list subheader element. */
+  eventDialogResourceMenuListSubheader: string;
+  /** Styles applied to the event dialog resource menu color dot element. */
+  eventDialogResourceMenuColorDot: string;
+  /** Styles applied to the event dialog resource menu color radio button element. */
+  eventDialogResourceMenuColorRadioButton: string;
+  /** Styles applied to the event dialog inline row element. */
+  eventDialogInlineRow: string;
+  /** Styles applied to the event dialog section header title element. */
+  eventDialogSectionHeaderTitle: string;
+  /** Styles applied to the event dialog radio button label element. */
+  eventDialogRadioButtonLabel: string;
+  /** Styles applied to the event dialog repeat section label element. */
+  eventDialogRepeatSectionLabel: string;
+  /** Styles applied to the event dialog ends radio group element. */
+  eventDialogEndsRadioGroup: string;
+  /** Styles applied to the event dialog repeat section fieldset element. */
+  eventDialogRepeatSectionFieldset: string;
+  /** Styles applied to the event dialog repeat section content element. */
+  eventDialogRepeatSectionContent: string;
+  /** Styles applied to the event dialog recurrence selector toggle group element. */
+  eventDialogRecurrenceSelectorToggleGroup: string;
+  /** Styles applied to the event dialog week day selector form group element. */
+  eventDialogWeekDaySelectorCheckbox: string;
+  /** Styles applied to the event dialog frequency select element. */
+  eventDialogFrequencySelect: string;
+  /** Styles applied to the event dialog small number field element. */
+  eventDialogSmallNumberField: string;
+  /** Styles applied to the event dialog tabs container element. */
+  eventDialogTabsContainer: string;
+  /** Styles applied to the event dialog tab elements. */
+  eventDialogTab: string;
+  /** Styles applied to the event dialog form divider element. */
+  eventDialogFormDivider: string;
+  /** Styles applied to the event dialog delete button element. */
+  eventDialogDeleteButton: string;
+  /** Styles applied to the event dialog save button element. */
+  eventDialogSaveButton: string;
+  /** Styles applied to the event dialog close action button element. */
+  eventDialogCloseAction: string;
+  /** Styles applied to the event dialog date time icon element. */
+  eventDialogDateTimeIcon: string;
+  /** Styles applied to the event dialog date time label element. */
+  eventDialogDateTimeLabel: string;
+  /** Styles applied to the event dialog recurrence icon element. */
+  eventDialogRecurrenceIcon: string;
+  /** Styles applied to the event dialog recurrence label element. */
+  eventDialogRecurrenceLabel: string;
+  /** Styles applied to the event dialog description label element. */
+  eventDialogDescriptionLabel: string;
+};
+```
+
+### EventTimelinePremiumClassKey
+
+```typescript
+type EventTimelinePremiumClassKey =
+  | 'root'
+  | 'content'
+  | 'grid'
+  | 'headerRow'
+  | 'titleHeaderCell'
+  | 'eventsHeaderCell'
+  | 'eventsHeaderCellContent'
+  | 'titleSubGrid'
+  | 'eventsSubGridWrapper'
+  | 'eventsSubGrid'
+  | 'eventsSubGridRow'
+  | 'titleCellRow'
+  | 'titleCell'
+  | 'titleCellLegendColor'
+  | 'currentTimeIndicator'
+  | 'currentTimeIndicatorCircle'
+  | 'event'
+  | 'eventPlaceholder'
+  | 'eventResizeHandler'
+  | 'eventLinesClamp'
+  | 'timeHeader'
+  | 'timeHeaderCell'
+  | 'timeHeaderDayLabel'
+  | 'timeHeaderCellsRow'
+  | 'timeHeaderTimeCell'
+  | 'timeHeaderTimeLabel'
+  | 'daysHeader'
+  | 'daysHeaderCell'
+  | 'daysHeaderTime'
+  | 'daysHeaderWeekDay'
+  | 'daysHeaderDayNumber'
+  | 'daysHeaderMonthStart'
+  | 'daysHeaderMonthStartLabel'
+  | 'weeksHeader'
+  | 'weeksHeaderCell'
+  | 'weeksHeaderDayLabel'
+  | 'weeksHeaderDaysRow'
+  | 'weeksHeaderDayCell'
+  | 'monthsHeader'
+  | 'monthsHeaderYearLabel'
+  | 'monthsHeaderMonthLabel'
+  | 'yearsHeader'
+  | 'yearsHeaderYearLabel'
+  | 'eventDialog'
+  | 'eventDialogCloseButton'
+  | 'eventDialogHeader'
+  | 'eventDialogReadonlyContent'
+  | 'eventDialogActions'
+  | 'eventDialogDateTimeContainer'
+  | 'eventDialogTitle'
+  | 'eventDialogResourceContainer'
+  | 'eventDialogResourceLegendContainer'
+  | 'eventDialogResourceLegendColor'
+  | 'eventDialogResourceTitle'
+  | 'eventDialogPaper'
+  | 'eventDialogForm'
+  | 'eventDialogFormActions'
+  | 'eventDialogContent'
+  | 'eventDialogTabPanel'
+  | 'eventDialogTabContent'
+  | 'eventDialogDateTimeFieldsContainer'
+  | 'eventDialogDateTimeFieldsRow'
+  | 'eventDialogRecurrenceLabelContainer'
+  | 'eventDialogRecurrenceSelectorContainer'
+  | 'eventDialogResourceMenuItem'
+  | 'eventDialogResourceMenuListSubheader'
+  | 'eventDialogResourceMenuColorDot'
+  | 'eventDialogResourceMenuColorRadioButton'
+  | 'eventDialogInlineRow'
+  | 'eventDialogSectionHeaderTitle'
+  | 'eventDialogRadioButtonLabel'
+  | 'eventDialogRepeatSectionLabel'
+  | 'eventDialogEndsRadioGroup'
+  | 'eventDialogRepeatSectionFieldset'
+  | 'eventDialogRepeatSectionContent'
+  | 'eventDialogRecurrenceSelectorToggleGroup'
+  | 'eventDialogWeekDaySelectorCheckbox'
+  | 'eventDialogFrequencySelect'
+  | 'eventDialogSmallNumberField'
+  | 'eventDialogTabsContainer'
+  | 'eventDialogTab'
+  | 'eventDialogFormDivider'
+  | 'eventDialogDeleteButton'
+  | 'eventDialogSaveButton'
+  | 'eventDialogCloseAction'
+  | 'eventDialogDateTimeIcon'
+  | 'eventDialogDateTimeLabel'
+  | 'eventDialogRecurrenceIcon'
+  | 'eventDialogRecurrenceLabel'
+  | 'eventDialogDescriptionLabel';
+```
+
+## External Types
+
+### EventTimelinePremiumView
+
+```typescript
+type EventTimelinePremiumView = 'time' | 'days' | 'weeks' | 'months' | 'years';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.event-timeline-premium.ts b/docs/pages/x/api/scheduler/types.event-timeline-premium.ts
new file mode 100644
index 0000000000000..ba687005b9f81
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.event-timeline-premium.ts
@@ -0,0 +1,4 @@
+import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesEventTimelinePremium = createTypes(import.meta.url, EventTimelinePremium);
diff --git a/docs/pages/x/api/scheduler/types.standalone-agenda-view.md b/docs/pages/x/api/scheduler/types.standalone-agenda-view.md
new file mode 100644
index 0000000000000..1086d7bc90a82
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-agenda-view.md
@@ -0,0 +1,80 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.standalone-agenda-view.md'
+
+## API Reference
+
+### AgendaView
+
+An Agenda View to use inside the Event Calendar.
+
+### StandaloneAgendaView
+
+An Agenda View that can be used outside of the Event Calendar.
+
+**StandaloneAgendaView Props:**
+
+| Prop                        | Type                                                                                                    | Default                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| areEventsDraggable          | `boolean`                                                                                               | `true`                                                                                                                 | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                         | `true`                                                                                                                 | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                               | -                                                                                                                      | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                                | `enUS (English)`                                                                                                       | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventCalendarPreferences>`                                                                     | `{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }`        | The default preferences for the calendar.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `CalendarView`                                                                                          | `"week"`                                                                                                               | The view initially displayed in the calendar.&#xA;To render a controlled calendar, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                                  | `today`                                                                                                                | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                               | `{} - all resources are visible`                                                                                       | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                                | `"default"`                                                                                                            | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                                   | `"teal"`                                                                                                               | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                      | -                                                                                                                      | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                      | -                                                                                                                      | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                                  | `[]`                                                                                                                   | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                                    | -                                                                                                                      | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventCalendarPreferences>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                                                                                                      | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void)`                             | -                                                                                                                      | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                              | -                                                                                                                      | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)`      | -                                                                                                                      | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventCalendarPreferences>`                                                                     | -                                                                                                                      | Preferences currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                           |
+| preferencesMenuConfig       | `Partial<EventCalendarPreferencesMenuConfig> \| false`                                                  | `{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }` | Config of the preferences menu.&#xA;Defines which options are visible in the menu.&#xA;If `false`, the menu will be entirely hidden.                                                                                                                                                                                                                                                                                       |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                                   | -                                                                                                                      | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                                  | -                                                                                                                      | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                               | `true`                                                                                                                 | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                        | -                                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `CalendarView`                                                                                          | -                                                                                                                      | The view currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `CalendarView[]`                                                                                        | `["day", "week", "month", "agenda"]`                                                                                   | The views available in the calendar.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                                  | -                                                                                                                      | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                               | -                                                                                                                      | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                               | `false`                                                                                                                | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+## External Types
+
+### CalendarView
+
+```typescript
+type CalendarView = 'day' | 'week' | 'month' | 'agenda';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.standalone-agenda-view.ts b/docs/pages/x/api/scheduler/types.standalone-agenda-view.ts
new file mode 100644
index 0000000000000..539ce699b4272
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-agenda-view.ts
@@ -0,0 +1,4 @@
+import { StandaloneAgendaView } from '@mui/x-scheduler/agenda-view';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStandaloneAgendaView = createTypes(import.meta.url, StandaloneAgendaView);
diff --git a/docs/pages/x/api/scheduler/types.standalone-day-view.md b/docs/pages/x/api/scheduler/types.standalone-day-view.md
new file mode 100644
index 0000000000000..98dfd7186f6dd
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-day-view.md
@@ -0,0 +1,80 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.standalone-day-view.md'
+
+## API Reference
+
+### DayView
+
+A Day View to use inside the Event Calendar.
+
+### StandaloneDayView
+
+A Day View that can be used outside of the Event Calendar.
+
+**StandaloneDayView Props:**
+
+| Prop                        | Type                                                                                                    | Default                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| areEventsDraggable          | `boolean`                                                                                               | `true`                                                                                                                 | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                         | `true`                                                                                                                 | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                               | -                                                                                                                      | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                                | `enUS (English)`                                                                                                       | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventCalendarPreferences>`                                                                     | `{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }`        | The default preferences for the calendar.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `CalendarView`                                                                                          | `"week"`                                                                                                               | The view initially displayed in the calendar.&#xA;To render a controlled calendar, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                                  | `today`                                                                                                                | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                               | `{} - all resources are visible`                                                                                       | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                                | `"default"`                                                                                                            | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                                   | `"teal"`                                                                                                               | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                      | -                                                                                                                      | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                      | -                                                                                                                      | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                                  | `[]`                                                                                                                   | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                                    | -                                                                                                                      | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventCalendarPreferences>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                                                                                                      | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void)`                             | -                                                                                                                      | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                              | -                                                                                                                      | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)`      | -                                                                                                                      | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventCalendarPreferences>`                                                                     | -                                                                                                                      | Preferences currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                           |
+| preferencesMenuConfig       | `Partial<EventCalendarPreferencesMenuConfig> \| false`                                                  | `{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }` | Config of the preferences menu.&#xA;Defines which options are visible in the menu.&#xA;If `false`, the menu will be entirely hidden.                                                                                                                                                                                                                                                                                       |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                                   | -                                                                                                                      | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                                  | -                                                                                                                      | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                               | `true`                                                                                                                 | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                        | -                                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `CalendarView`                                                                                          | -                                                                                                                      | The view currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `CalendarView[]`                                                                                        | `["day", "week", "month", "agenda"]`                                                                                   | The views available in the calendar.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                                  | -                                                                                                                      | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                               | -                                                                                                                      | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                               | `false`                                                                                                                | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+## External Types
+
+### CalendarView
+
+```typescript
+type CalendarView = 'day' | 'week' | 'month' | 'agenda';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.standalone-day-view.ts b/docs/pages/x/api/scheduler/types.standalone-day-view.ts
new file mode 100644
index 0000000000000..48059db854437
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-day-view.ts
@@ -0,0 +1,4 @@
+import { StandaloneDayView } from '@mui/x-scheduler/day-view';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStandaloneDayView = createTypes(import.meta.url, StandaloneDayView);
diff --git a/docs/pages/x/api/scheduler/types.standalone-event.md b/docs/pages/x/api/scheduler/types.standalone-event.md
new file mode 100644
index 0000000000000..0dfaaa3f4541c
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-event.md
@@ -0,0 +1,19 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.standalone-event.md'
+
+## API Reference
+
+### StandaloneEvent
+
+**StandaloneEvent Props:**
+
+| Prop         | Type                                                                                          | Default | Description                                                                                                                                                                                   |
+| :----------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data\*       | `SchedulerProcessedEventDraft \| SchedulerOccurrencePlaceholderExternalDragData`              | -       | -                                                                                                                                                                                             |
+| nativeButton | `boolean`                                                                                     | `false` | Whether the component renders a native `<button>` element when replacing it&#xA;via the `render` prop.&#xA;Set to `true` if the rendered element is a native button.                          |
+| onEventDrop  | `(() => void)`                                                                                | -       | Callback fired when the event is dropped into the Event Calendar.                                                                                                                             |
+| sx           | `SxProps<Theme>`                                                                              | -       | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                       |
+| className    | `string \| ((state: StandaloneEvent.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
+| style        | `React.CSSProperties \| ((state: StandaloneEvent.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
+| render       | `ReactElement \| ((props: HTMLProps, state: StandaloneEvent.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
diff --git a/docs/pages/x/api/scheduler/types.standalone-event.ts b/docs/pages/x/api/scheduler/types.standalone-event.ts
new file mode 100644
index 0000000000000..a3f2f2ad6e679
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-event.ts
@@ -0,0 +1,4 @@
+import { StandaloneEvent } from '@mui/x-scheduler/standalone-event';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStandaloneEvent = createTypes(import.meta.url, StandaloneEvent);
diff --git a/docs/pages/x/api/scheduler/types.standalone-month-view.md b/docs/pages/x/api/scheduler/types.standalone-month-view.md
new file mode 100644
index 0000000000000..078f47ac963ec
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-month-view.md
@@ -0,0 +1,80 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.standalone-month-view.md'
+
+## API Reference
+
+### MonthView
+
+A Month View to use inside the Event Calendar.
+
+### StandaloneMonthView
+
+A Month View that can be used outside of the Event Calendar.
+
+**StandaloneMonthView Props:**
+
+| Prop                        | Type                                                                                                    | Default                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| areEventsDraggable          | `boolean`                                                                                               | `true`                                                                                                                 | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                         | `true`                                                                                                                 | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                               | -                                                                                                                      | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                                | `enUS (English)`                                                                                                       | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventCalendarPreferences>`                                                                     | `{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }`        | The default preferences for the calendar.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `CalendarView`                                                                                          | `"week"`                                                                                                               | The view initially displayed in the calendar.&#xA;To render a controlled calendar, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                                  | `today`                                                                                                                | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                               | `{} - all resources are visible`                                                                                       | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                                | `"default"`                                                                                                            | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                                   | `"teal"`                                                                                                               | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                      | -                                                                                                                      | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                      | -                                                                                                                      | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                                  | `[]`                                                                                                                   | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                                    | -                                                                                                                      | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventCalendarPreferences>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                                                                                                      | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void)`                             | -                                                                                                                      | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                              | -                                                                                                                      | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)`      | -                                                                                                                      | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventCalendarPreferences>`                                                                     | -                                                                                                                      | Preferences currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                           |
+| preferencesMenuConfig       | `Partial<EventCalendarPreferencesMenuConfig> \| false`                                                  | `{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }` | Config of the preferences menu.&#xA;Defines which options are visible in the menu.&#xA;If `false`, the menu will be entirely hidden.                                                                                                                                                                                                                                                                                       |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                                   | -                                                                                                                      | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                                  | -                                                                                                                      | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                               | `true`                                                                                                                 | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                        | -                                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `CalendarView`                                                                                          | -                                                                                                                      | The view currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `CalendarView[]`                                                                                        | `["day", "week", "month", "agenda"]`                                                                                   | The views available in the calendar.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                                  | -                                                                                                                      | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                               | -                                                                                                                      | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                               | `false`                                                                                                                | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+## External Types
+
+### CalendarView
+
+```typescript
+type CalendarView = 'day' | 'week' | 'month' | 'agenda';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.standalone-month-view.ts b/docs/pages/x/api/scheduler/types.standalone-month-view.ts
new file mode 100644
index 0000000000000..2a553041d5204
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-month-view.ts
@@ -0,0 +1,4 @@
+import { StandaloneMonthView } from '@mui/x-scheduler/month-view';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStandaloneMonthView = createTypes(import.meta.url, StandaloneMonthView);
diff --git a/docs/pages/x/api/scheduler/types.standalone-week-view.md b/docs/pages/x/api/scheduler/types.standalone-week-view.md
new file mode 100644
index 0000000000000..e37144186ae1f
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-week-view.md
@@ -0,0 +1,80 @@
+# Scheduler
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/scheduler/types.standalone-week-view.md'
+
+## API Reference
+
+### StandaloneWeekView
+
+A Week View that can be used outside of the Event Calendar.
+
+**StandaloneWeekView Props:**
+
+| Prop                        | Type                                                                                                    | Default                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| areEventsDraggable          | `boolean`                                                                                               | `true`                                                                                                                 | Whether the event can be dragged to change its start and end dates without changing the duration.                                                                                                                                                                                                                                                                                                                          |
+| areEventsResizable          | `boolean \| SchedulerEventSide`                                                                         | `true`                                                                                                                 | Whether the event start or end can be dragged to change its duration without changing its other date.&#xA;If `true`, both start and end can be resized.&#xA;If `false`, the events are not resizable.&#xA;If `"start"`, only the start can be resized.&#xA;If `"end"`, only the end can be resized.                                                                                                                        |
+| canDragEventsFromTheOutside | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from outside of the calendar and dropped into it.                                                                                                                                                                                                                                                                                                                                            |
+| canDropEventsToTheOutside   | `boolean`                                                                                               | `false`                                                                                                                | Whether events can be dragged from inside of the calendar and dropped outside of it.&#xA;If true, when the mouse leaves the calendar, the event won't be rendered inside the calendar anymore.&#xA;If false, when the mouse leaves the calendar, the event will be rendered in its last valid position inside the calendar.                                                                                                |
+| dataSource                  | `SchedulerDataSource<{}>`                                                                               | -                                                                                                                      | Data source for fetching events asynchronously.&#xA;When provided, events are fetched through the data source instead of the `events` prop.                                                                                                                                                                                                                                                                                |
+| dateLocale                  | `Locale`                                                                                                | `enUS (English)`                                                                                                       | The locale object from `date-fns` used to format dates.&#xA;This affects day names, month names, week start day, and other locale-dependent formatting.&#xA;Import a locale from `date-fns/locale` and pass it to this prop.                                                                                                                                                                                               |
+| defaultPreferences          | `Partial<EventCalendarPreferences>`                                                                     | `{ showWeekends: true, showWeekNumber: false, isSidePanelOpen: true, showEmptyDaysInAgenda: true, ampm: true }`        | The default preferences for the calendar.&#xA;To use controlled preferences, use the `preferences` prop.                                                                                                                                                                                                                                                                                                                   |
+| defaultView                 | `CalendarView`                                                                                          | `"week"`                                                                                                               | The view initially displayed in the calendar.&#xA;To render a controlled calendar, use the `view` prop.                                                                                                                                                                                                                                                                                                                    |
+| defaultVisibleDate          | `Date`                                                                                                  | `today`                                                                                                                | The date initially used to determine the visible date range in each view.&#xA;To render a controlled calendar, use the `visibleDate` prop.                                                                                                                                                                                                                                                                                 |
+| defaultVisibleResources     | `Record<string, boolean>`                                                                               | `{} - all resources are visible`                                                                                       | The IDs of the resources initially visible.&#xA;To render a controlled scheduler, use the `visibleResources` prop.                                                                                                                                                                                                                                                                                                         |
+| displayTimezone             | `string`                                                                                                | `"default"`                                                                                                            | The timezone used to display events in the scheduler. Accepts any valid IANA timezone name&#xA;(for example "America/New_York", "Europe/Paris", "Asia/Tokyo"),&#xA;or keywords understood by the adapter, such as&#xA;"default" (use the adapter's default timezone),&#xA;"locale" (use the user's current locale timezone),&#xA;or "UTC". This timezone only affects rendering, events keep their original data timezone. |
+| eventColor                  | `SchedulerEventColor`                                                                                   | `"teal"`                                                                                                               | The color palette used for all events.&#xA;Can be overridden per resource using the `eventColor` property on the resource model.&#xA;Can be overridden per event using the `color` property on the event model.                                                                                                                                                                                                            |
+| eventCreation               | `Partial<SchedulerEventCreationConfig> \| boolean`                                                      | -                                                                                                                      | -                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| eventModelStructure         | `SchedulerEventModelStructure<{}>`                                                                      | -                                                                                                                      | The structure of the event model.&#xA;It defines how to read and write the properties of the event model.&#xA;If not provided, the event model is assumed to match the `CalendarEvent` interface.                                                                                                                                                                                                                          |
+| events                      | `{}[]`                                                                                                  | `[]`                                                                                                                   | The events currently available in the calendar.                                                                                                                                                                                                                                                                                                                                                                            |
+| onEventsChange              | `((value: {}[], eventDetails: SchedulerChangeEventDetails) => void)`                                    | -                                                                                                                      | Callback fired when some event of the calendar change.                                                                                                                                                                                                                                                                                                                                                                     |
+| onPreferencesChange         | `((preferences: Partial<EventCalendarPreferences>, eventDetails: SchedulerChangeEventDetails) => void)` | -                                                                                                                      | Event handler called when the preferences change.                                                                                                                                                                                                                                                                                                                                                                          |
+| onViewChange                | `((view: CalendarView, eventDetails: SchedulerChangeEventDetails) => void)`                             | -                                                                                                                      | Event handler called when the view changes.                                                                                                                                                                                                                                                                                                                                                                                |
+| onVisibleDateChange         | `((visibleDate: Date, eventDetails: SchedulerChangeEventDetails) => void)`                              | -                                                                                                                      | Event handler called when the visible date changes.                                                                                                                                                                                                                                                                                                                                                                        |
+| onVisibleResourcesChange    | `((visibleResources: Record<string, boolean>, eventDetails: SchedulerChangeEventDetails) => void)`      | -                                                                                                                      | Event handler called when the visible resources change.                                                                                                                                                                                                                                                                                                                                                                    |
+| preferences                 | `Partial<EventCalendarPreferences>`                                                                     | -                                                                                                                      | Preferences currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                           |
+| preferencesMenuConfig       | `Partial<EventCalendarPreferencesMenuConfig> \| false`                                                  | `{ toggleWeekendVisibility: true, toggleWeekNumberVisibility: true, toggleAmpm: true, toggleEmptyDaysInAgenda: true }` | Config of the preferences menu.&#xA;Defines which options are visible in the menu.&#xA;If `false`, the menu will be entirely hidden.                                                                                                                                                                                                                                                                                       |
+| resourceModelStructure      | `SchedulerResourceModelStructure<{}>`                                                                   | -                                                                                                                      | The structure of the resource model.&#xA;It defines how to read and write the properties of the resource model.&#xA;If not provided, the resource model is assumed to match the `CalendarResource` interface.                                                                                                                                                                                                              |
+| resources                   | `{}[]`                                                                                                  | -                                                                                                                      | The resources the events can be assigned to.                                                                                                                                                                                                                                                                                                                                                                               |
+| showCurrentTimeIndicator    | `boolean`                                                                                               | `true`                                                                                                                 | Whether the component should display the current time indicator.                                                                                                                                                                                                                                                                                                                                                           |
+| sx                          | `SxProps<Theme>`                                                                                        | -                                                                                                                      | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                    |
+| view                        | `CalendarView`                                                                                          | -                                                                                                                      | The view currently displayed in the calendar.                                                                                                                                                                                                                                                                                                                                                                              |
+| views                       | `CalendarView[]`                                                                                        | `["day", "week", "month", "agenda"]`                                                                                   | The views available in the calendar.                                                                                                                                                                                                                                                                                                                                                                                       |
+| visibleDate                 | `Date`                                                                                                  | -                                                                                                                      | The date currently used to determine the visible date range in each view.                                                                                                                                                                                                                                                                                                                                                  |
+| visibleResources            | `Record<string, boolean>`                                                                               | -                                                                                                                      | The IDs of the resources currently visible.&#xA;A resource is visible if it is not included in this object or if it is included with `true` value.                                                                                                                                                                                                                                                                         |
+| readOnly                    | `boolean`                                                                                               | `false`                                                                                                                | Whether the calendar is in read-only mode.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+### WeekView
+
+A Week View to use inside the Event Calendar.
+
+## External Types
+
+### CalendarView
+
+```typescript
+type CalendarView = 'day' | 'week' | 'month' | 'agenda';
+```
+
+### SchedulerEventSide
+
+```typescript
+type SchedulerEventSide = 'start' | 'end';
+```
+
+### SchedulerEventColor
+
+```typescript
+type SchedulerEventColor =
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'indigo'
+  | 'blue'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'amber'
+  | 'orange'
+  | 'grey';
+```
diff --git a/docs/pages/x/api/scheduler/types.standalone-week-view.ts b/docs/pages/x/api/scheduler/types.standalone-week-view.ts
new file mode 100644
index 0000000000000..bd5b0d6597d83
--- /dev/null
+++ b/docs/pages/x/api/scheduler/types.standalone-week-view.ts
@@ -0,0 +1,4 @@
+import { StandaloneWeekView } from '@mui/x-scheduler/week-view';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesStandaloneWeekView = createTypes(import.meta.url, StandaloneWeekView);
diff --git a/docs/pages/x/api/tree-view/rich-tree-view-pro.js b/docs/pages/x/api/tree-view/rich-tree-view-pro.js
index 89a3367f3b82a..d44f2390727f4 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view-pro.js
+++ b/docs/pages/x/api/tree-view/rich-tree-view-pro.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './rich-tree-view-pro.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRichTreeViewPro } from './types.rich-tree-view-pro';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'canMoveItemToNewPosition', 'checkboxSelection', 'classes', 'dataSource', 'dataSourceCache', 'defaultExpandedItems', 'defaultSelectedItems', 'disableSelection', 'disableVirtualization', 'disabledItemsFocusable', 'domStructure', 'expandedItems', 'expansionTrigger', 'getItemChildren', 'getItemId', 'getItemLabel', 'id', 'isItemDisabled', 'isItemEditable', 'isItemReorderable', 'isItemSelectionDisabled', 'itemChildrenIndentation', 'itemHeight', 'itemsReordering', 'multiSelect', 'onExpandedItemsChange', 'onItemClick', 'onItemExpansionToggle', 'onItemFocus', 'onItemLabelChange', 'onItemPositionChange', 'onItemSelectionToggle', 'onItemsLazyLoaded', 'onSelectedItemsChange', 'selectedItems', 'selectionPropagation', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/rich-tree-view-pro',
-    false,
-    /\.\/rich-tree-view-pro.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RichTreeViewPro" allowedProps={allowedProps}>
+      <TypesRichTreeViewPro />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/rich-tree-view.js b/docs/pages/x/api/tree-view/rich-tree-view.js
index 7ebbfaa67eac4..cd73f77123c34 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view.js
+++ b/docs/pages/x/api/tree-view/rich-tree-view.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './rich-tree-view.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesRichTreeView } from './types.rich-tree-view';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'checkboxSelection', 'classes', 'defaultExpandedItems', 'defaultSelectedItems', 'disableSelection', 'disabledItemsFocusable', 'domStructure', 'expandedItems', 'expansionTrigger', 'getItemChildren', 'getItemId', 'getItemLabel', 'id', 'isItemDisabled', 'isItemEditable', 'isItemSelectionDisabled', 'itemChildrenIndentation', 'itemHeight', 'multiSelect', 'onExpandedItemsChange', 'onItemClick', 'onItemExpansionToggle', 'onItemFocus', 'onItemLabelChange', 'onItemSelectionToggle', 'onSelectedItemsChange', 'selectedItems', 'selectionPropagation', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/rich-tree-view',
-    false,
-    /\.\/rich-tree-view.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="RichTreeView" allowedProps={allowedProps}>
+      <TypesRichTreeView />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/simple-tree-view.js b/docs/pages/x/api/tree-view/simple-tree-view.js
index 8df887fda57d9..fa72124f086cf 100644
--- a/docs/pages/x/api/tree-view/simple-tree-view.js
+++ b/docs/pages/x/api/tree-view/simple-tree-view.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './simple-tree-view.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesSimpleTreeView } from './types.simple-tree-view';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['apiRef', 'checkboxSelection', 'children', 'classes', 'defaultExpandedItems', 'defaultSelectedItems', 'disableSelection', 'disabledItemsFocusable', 'expandedItems', 'expansionTrigger', 'id', 'itemChildrenIndentation', 'itemHeight', 'multiSelect', 'onExpandedItemsChange', 'onItemClick', 'onItemExpansionToggle', 'onItemFocus', 'onItemSelectionToggle', 'onSelectedItemsChange', 'selectedItems', 'selectionPropagation', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/simple-tree-view',
-    false,
-    /\.\/simple-tree-view.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="SimpleTreeView" allowedProps={allowedProps}>
+      <TypesSimpleTreeView />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/tree-item-drag-and-drop-overlay.js b/docs/pages/x/api/tree-view/tree-item-drag-and-drop-overlay.js
index 1d34101233bb0..10cbe01e6a8ba 100644
--- a/docs/pages/x/api/tree-view/tree-item-drag-and-drop-overlay.js
+++ b/docs/pages/x/api/tree-view/tree-item-drag-and-drop-overlay.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './tree-item-drag-and-drop-overlay.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTreeItemDragAndDropOverlay } from './types.tree-item-drag-and-drop-overlay';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/tree-item-drag-and-drop-overlay',
-    false,
-    /\.\/tree-item-drag-and-drop-overlay.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TreeItemDragAndDropOverlay" allowedProps={allowedProps}>
+      <TypesTreeItemDragAndDropOverlay />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/tree-item-icon.js b/docs/pages/x/api/tree-view/tree-item-icon.js
index 359de74ecb136..70df9589fd8f4 100644
--- a/docs/pages/x/api/tree-view/tree-item-icon.js
+++ b/docs/pages/x/api/tree-view/tree-item-icon.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './tree-item-icon.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTreeItemIcon } from './types.tree-item-icon';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['slotProps', 'slots'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/tree-item-icon',
-    false,
-    /\.\/tree-item-icon.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TreeItemIcon" allowedProps={allowedProps}>
+      <TypesTreeItemIcon />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/tree-item-provider.js b/docs/pages/x/api/tree-view/tree-item-provider.js
index 8f601ef0cfbb3..865475b5a8065 100644
--- a/docs/pages/x/api/tree-view/tree-item-provider.js
+++ b/docs/pages/x/api/tree-view/tree-item-provider.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './tree-item-provider.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTreeItemProvider } from './types.tree-item-provider';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = [];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/tree-item-provider',
-    false,
-    /\.\/tree-item-provider.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TreeItemProvider" allowedProps={allowedProps}>
+      <TypesTreeItemProvider />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/tree-item.js b/docs/pages/x/api/tree-view/tree-item.js
index d0a66d84ae0ac..08ca03548fcf0 100644
--- a/docs/pages/x/api/tree-view/tree-item.js
+++ b/docs/pages/x/api/tree-view/tree-item.js
@@ -1,20 +1,12 @@
-import * as React from 'react';
-import ApiPage from 'docs/src/modules/components/ApiPage';
-import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './tree-item.json';
+import { TypesPageShell } from 'docsx/src/modules/api-docs/TypesPageShell';
+import { TypesTreeItem } from './types.tree-item';
 
-export default function Page(props) {
-  const { descriptions } = props;
-  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
-}
+const allowedProps = ['children', 'classes', 'disableSelection', 'disabled', 'id', 'itemId', 'label', 'onBlur', 'onFocus', 'onKeyDown', 'slotProps', 'slots', 'sx'];
 
-export async function getStaticProps() {
-  const req = require.context(
-    'docsx/translations/api-docs/tree-view/tree-item',
-    false,
-    /\.\/tree-item.*\.json$/,
+export default function Page() {
+  return (
+    <TypesPageShell name="TreeItem" allowedProps={allowedProps}>
+      <TypesTreeItem />
+    </TypesPageShell>
   );
-  const descriptions = mapApiPageTranslations(req);
-
-  return { props: { descriptions } };
 }
diff --git a/docs/pages/x/api/tree-view/types.rich-tree-view-pro.md b/docs/pages/x/api/tree-view/types.rich-tree-view-pro.md
new file mode 100644
index 0000000000000..14450565a4837
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.rich-tree-view-pro.md
@@ -0,0 +1,731 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.rich-tree-view-pro.md'
+
+## API Reference
+
+### getRichTreeViewProUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### RichTreeViewPro
+
+Demos:
+
+- [Tree View](https://mui.com/x/react-tree-view/)
+
+API:
+
+- [RichTreeView API](https://mui.com/x/api/tree-view/rich-tree-view/)
+
+**RichTreeViewPro Props:**
+
+| Prop                     | Type                                                                                                                                | Default                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| :----------------------- | :---------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                   | `RichTreeViewProApiRef`                                                                                                             | -                                        | The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiProRef()`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| canMoveItemToNewPosition | `((parameters: { itemId: string; oldPosition: TreeViewItemReorderPosition; newPosition: TreeViewItemReorderPosition }) => boolean)` | -                                        | Used to determine if a given item can move to some new position.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| checkboxSelection        | `boolean`                                                                                                                           | `false`                                  | Whether the Tree View renders a checkbox at the left of its label that allows selecting it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| classes                  | `Partial<RichTreeViewProClasses>`                                                                                                   | -                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| dataSource               | `DataSource<{}>`                                                                                                                    | -                                        | The data source object.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| dataSourceCache          | `DataSourceCache<{}>`                                                                                                               | -                                        | The data source cache object.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| defaultExpandedItems     | `string[]`                                                                                                                          | `[]`                                     | Expanded item ids.&#xA;Used when the item's expansion is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| defaultSelectedItems     | `string \| string[] \| null`                                                                                                        | `[]`                                     | Selected item ids. (Uncontrolled)&#xA;When `multiSelect` is true this takes an array of strings; when false (default) a string.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| disableSelection         | `boolean`                                                                                                                           | `false`                                  | Whether selection is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disableVirtualization    | `boolean`                                                                                                                           | `false`                                  | If `true`, virtualization is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| disabledItemsFocusable   | `boolean`                                                                                                                           | `false`                                  | Whether the items should be focusable when disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| domStructure             | `TreeViewDOMStructure`                                                                                                              | `'flat'`                                 | When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).&#xA;When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).&#xA;Nested DOM structure is not compatible with collapse / expansion animations.                                                                                                                                                                                                                                    |
+| expandedItems            | `string[]`                                                                                                                          | -                                        | Expanded item ids.&#xA;Used when the item's expansion is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| expansionTrigger         | `'content' \| 'iconContainer'`                                                                                                      | `'content'`                              | The slot that triggers the item's expansion when clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| getItemChildren          | `((item: {}) => {}[] \| undefined)`                                                                                                 | `(item) => item.children`                | Used to determine the children of a given item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| getItemId                | `((item: {}) => string)`                                                                                                            | `(item) => item.id`                      | Used to determine the id of a given item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| getItemLabel             | `((item: {}) => string)`                                                                                                            | `(item) => item.label`                   | Used to determine the string label for a given item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| isItemDisabled           | `((item: {}) => boolean)`                                                                                                           | -                                        | Used to determine if a given item should be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| isItemEditable           | `boolean \| ((item: {}) => boolean)`                                                                                                | `() => false`                            | Determine if a given item can be edited.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| isItemReorderable        | `((itemId: string) => boolean)`                                                                                                     | `() => true`                             | Determine if a given item can be reordered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| isItemSelectionDisabled  | `((item: {}) => boolean)`                                                                                                           | -                                        | Used to determine if a given item should have selection disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| itemChildrenIndentation  | `string \| number`                                                                                                                  | `12px`                                   | Horizontal indentation between an item and its children.&#xA;Examples: 24, "24px", "2rem", "2em".                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| itemHeight               | `number \| null`                                                                                                                    | `32`                                     | Sets the height in pixel of an item.&#xA;Set to `null` to explicitly remove any item height restriction when items have different heights (not compatible with virtualization).                                                                                                                                                                                                                                                                                                                                                                                                      |
+| items\*                  | `{}[]`                                                                                                                              | -                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| itemsReordering          | `boolean`                                                                                                                           | `false`                                  | If `true`, the reordering of items is enabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| multiSelect              | `boolean`                                                                                                                           | `false`                                  | Whether multiple items can be selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onExpandedItemsChange    | `((event: React.SyntheticEvent \| null, itemIds: string[]) => void)`                                                                | -                                        | Callback fired when Tree Items are expanded/collapsed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onItemClick              | `((event: React.MouseEvent, itemId: string) => void)`                                                                               | -                                        | Callback fired when the `content` slot of a given Tree Item is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onItemExpansionToggle    | `((event: React.SyntheticEvent \| null, itemId: string, isExpanded: boolean) => void)`                                              | -                                        | Callback fired when a Tree Item is expanded or collapsed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onItemFocus              | `((event: React.SyntheticEvent \| null, itemId: string) => void)`                                                                   | -                                        | Callback fired when a given Tree Item is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onItemLabelChange        | `((itemId: string, newLabel: string) => void)`                                                                                      | -                                        | Callback fired when the label of an item changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onItemPositionChange     | `((parameters: { itemId: string; oldPosition: TreeViewItemReorderPosition; newPosition: TreeViewItemReorderPosition }) => void)`    | -                                        | Callback fired when a Tree Item is moved in the tree.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| onItemSelectionToggle    | `((event: React.SyntheticEvent \| null, itemId: string, isSelected: boolean) => void)`                                              | -                                        | Callback fired when a Tree Item is selected or deselected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onItemsLazyLoaded        | `((parameters: { items: {}[]; parentId: string \| null; isCacheHit: boolean }) => void)`                                            | -                                        | Callback fired when the children of an item are loaded from the data source.&#xA;Only relevant for lazy-loaded tree views.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onSelectedItemsChange    | `((event: React.SyntheticEvent \| null, itemIds: string \| string[] \| null) => void)`                                              | -                                        | Callback fired when Tree Items are selected/deselected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| selectedItems            | `string \| string[] \| null`                                                                                                        | -                                        | Selected item ids. (Controlled)&#xA;When `multiSelect` is true this takes an array of strings; when false (default) a string.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| selectionPropagation     | `TreeViewSelectionPropagation`                                                                                                      | `{ parents: false, descendants: false }` | When `selectionPropagation.descendants` is set to `true`. Selecting a parent selects all its descendants automatically.Deselecting a parent deselects all its descendants automatically. When `selectionPropagation.parents` is set to `true`. Selecting all the descendants of a parent selects the parent automatically.Deselecting a descendant of a selected parent deselects the parent automatically. Only works when `multiSelect` is `true`.&#xA;On the , only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all) |
+| slotProps                | `RichTreeViewProSlotProps<{}, boolean \| undefined>`                                                                                | `{}`                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| slots                    | `RichTreeViewProSlots`                                                                                                              | `{}`                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| sx                       | `SxProps<Theme>`                                                                                                                    | -                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| id                       | `string`                                                                                                                            | -                                        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| className                | `string`                                                                                                                            | -                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+
+## Additional Types
+
+### RichTreeViewProApiRef
+
+```typescript
+type RichTreeViewProApiRef = {};
+```
+
+### richTreeViewProClasses
+
+```typescript
+type richTreeViewProClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's label input element (visible only when editing is enabled). */
+  itemLabelInput: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+  /** Styles applied to the item's drag and drop overlay element. */
+  itemDragAndDropOverlay: string;
+  /** Styles applied to the item's error icon element */
+  itemErrorIcon: string;
+  /** Styles applied to the item's loading icon element */
+  itemLoadingIcon: string;
+};
+```
+
+### RichTreeViewProClasses
+
+```typescript
+type RichTreeViewProClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's label input element (visible only when editing is enabled). */
+  itemLabelInput: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+  /** Styles applied to the item's drag and drop overlay element. */
+  itemDragAndDropOverlay: string;
+  /** Styles applied to the item's error icon element */
+  itemErrorIcon: string;
+  /** Styles applied to the item's loading icon element */
+  itemLoadingIcon: string;
+};
+```
+
+### RichTreeViewProClassKey
+
+```typescript
+type RichTreeViewProClassKey =
+  | 'root'
+  | 'item'
+  | 'itemContent'
+  | 'itemGroupTransition'
+  | 'itemIconContainer'
+  | 'itemLabel'
+  | 'itemLabelInput'
+  | 'itemCheckbox'
+  | 'itemDragAndDropOverlay'
+  | 'itemErrorIcon'
+  | 'itemLoadingIcon';
+```
+
+### RichTreeViewProProps
+
+```typescript
+type RichTreeViewProProps<R extends {}, Multiple extends boolean | undefined> = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RichTreeViewProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RichTreeViewProSlotProps<R, Multiple>;
+  /** The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiProRef()`. */
+  apiRef?: RichTreeViewProApiRef;
+  /** The data source object. */
+  dataSource?: DataSource<R>;
+  /** The data source cache object. */
+  dataSourceCache?: DataSourceCache<R>;
+  /**
+   * If `true`, the reordering of items is enabled.
+   * @default false
+   */
+  itemsReordering?: boolean;
+  /**
+   * Determine if a given item can be reordered.
+   * @default () => true
+   * @returns `true` if the item can be reordered.
+   */
+  isItemReorderable?: (itemId: string) => boolean;
+  /**
+   * Used to determine if a given item can move to some new position.
+   * @returns `true` if the item can move to the new position.
+   */
+  canMoveItemToNewPosition?: (parameters: {
+    itemId: string;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+  }) => boolean;
+  /**
+   * Callback fired when the children of an item are loaded from the data source.
+   * Only relevant for lazy-loaded tree views.
+   */
+  onItemsLazyLoaded?: (parameters: {
+    items: R[];
+    parentId: string | null;
+    isCacheHit: boolean;
+  }) => void;
+  /** Callback fired when a Tree Item is moved in the tree. */
+  onItemPositionChange?: (parameters: {
+    itemId: string;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+  }) => void;
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   * @default 'flat'
+   */
+  domStructure?: TreeViewDOMStructure;
+  /**
+   * If `true`, virtualization is disabled.
+   * @default false
+   */
+  disableVirtualization?: boolean;
+  /**
+   * Sets the height in pixel of an item.
+   * Set to `null` to explicitly remove any item height restriction when items have different heights (not compatible with virtualization).
+   * @default 32
+   */
+  itemHeight?: number | null;
+  /** Callback fired when the label of an item changes. */
+  onItemLabelChange?: (itemId: string, newLabel: string) => void;
+  /**
+   * Determine if a given item can be edited.
+   * @default () => false
+   * @template
+   * @returns `true` if the item can be edited.
+   */
+  isItemEditable?: boolean | ((item: R) => boolean);
+  /**
+   * Whether the items should be focusable when disabled.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  items: R[];
+  /**
+   * Used to determine if a given item should be disabled.
+   * @template
+   * @returns `true` if the item should be disabled.
+   */
+  isItemDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine if a given item should have selection disabled.
+   * @template
+   * @returns `true` if the item should have selection disabled.
+   */
+  isItemSelectionDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine the string label for a given item.
+   * @default (item) => item.label
+   * @template
+   * @returns The label of the item.
+   */
+  getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the children of a given item.
+   * @default (item) => item.children
+   * @template
+   * @returns The children of the item.
+   */
+  getItemChildren?: (item: R) => R[] | undefined;
+  /**
+   * Used to determine the id of a given item.
+   * @default (item) => item.id
+   * @template
+   * @returns The id of the item.
+   */
+  getItemId?: (item: R) => string;
+  /** Callback fired when the `content` slot of a given Tree Item is clicked. */
+  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is controlled.
+   */
+  expandedItems?: string[];
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is not controlled.
+   * @default []
+   */
+  defaultExpandedItems?: string[];
+  /** Callback fired when Tree Items are expanded/collapsed. */
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
+  /** Callback fired when a Tree Item is expanded or collapsed. */
+  onItemExpansionToggle?: (
+    event: React.SyntheticEvent | null,
+    itemId: string,
+    isExpanded: boolean,
+  ) => void;
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger?: 'content' | 'iconContainer';
+  /**
+   * Whether selection is disabled.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * Selected item ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selectedItems?: string | string[] | null;
+  /**
+   * Selected item ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelectedItems?: string | string[] | null;
+  /**
+   * Whether multiple items can be selected.
+   * @default false
+   */
+  multiSelect?: boolean | undefined;
+  /**
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection?: boolean;
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation?: TreeViewSelectionPropagation;
+  /** Callback fired when Tree Items are selected/deselected. */
+  onSelectedItemsChange?: (
+    event: React.SyntheticEvent | null,
+    itemIds: string | string[] | null,
+  ) => void;
+  /** Callback fired when a Tree Item is selected or deselected. */
+  onItemSelectionToggle?: (
+    event: React.SyntheticEvent | null,
+    itemId: string,
+    isSelected: boolean,
+  ) => void;
+  /** Callback fired when a given Tree Item is focused. */
+  onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RichTreeViewProClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### RichTreeViewProPropsBase
+
+```typescript
+type RichTreeViewProPropsBase = {
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RichTreeViewProClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### RichTreeViewProRoot
+
+```typescript
+type RichTreeViewProRoot = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: RichTreeViewProProps<any, any> },
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'children'
+    | 'onFocus'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### RichTreeViewProSlotProps
+
+```typescript
+type RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> = {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+  item?: SlotComponentProps<TreeItemComponent, {}, RichTreeViewItemsOwnerState>;
+  root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
+};
+```
+
+### RichTreeViewProSlots
+
+```typescript
+type RichTreeViewProSlots = {
+  /**
+   * Element rendered at the root.
+   * @default RichTreeViewProRoot
+   */
+  root?: React.ElementType;
+  /** The default icon used to collapse the item. */
+  collapseIcon?: React.ElementType | null;
+  /** The default icon used to expand the item. */
+  expandIcon?: React.ElementType | null;
+  /**
+   * The default icon displayed next to an end item.
+   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
+   */
+  endIcon?: React.ElementType | null;
+  /**
+   * Custom component to render a Tree Item.
+   * @default TreeItem.
+   */
+  item?: React.JSXElementConstructor<TreeItemProps>;
+};
+```
+
+## External Types
+
+### TreeViewDOMStructure
+
+```typescript
+type TreeViewDOMStructure = 'flat' | 'nested';
+```
diff --git a/docs/pages/x/api/tree-view/types.rich-tree-view-pro.ts b/docs/pages/x/api/tree-view/types.rich-tree-view-pro.ts
new file mode 100644
index 0000000000000..0cef5cad9919c
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.rich-tree-view-pro.ts
@@ -0,0 +1,4 @@
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRichTreeViewPro = createTypes(import.meta.url, RichTreeViewPro);
diff --git a/docs/pages/x/api/tree-view/types.rich-tree-view.md b/docs/pages/x/api/tree-view/types.rich-tree-view.md
new file mode 100644
index 0000000000000..9bd8db485b8f7
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.rich-tree-view.md
@@ -0,0 +1,664 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.rich-tree-view.md'
+
+## API Reference
+
+### getRichTreeViewUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### RichTreeView
+
+Demos:
+
+- [Tree View](https://mui.com/x/react-tree-view/)
+
+API:
+
+- [RichTreeView API](https://mui.com/x/api/tree-view/rich-tree-view/)
+
+**RichTreeView Props:**
+
+| Prop                    | Type                                                                                   | Default                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| :---------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                  | `RichTreeViewApiRef`                                                                   | -                                        | The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiRef()`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| checkboxSelection       | `boolean`                                                                              | `false`                                  | Whether the Tree View renders a checkbox at the left of its label that allows selecting it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| classes                 | `Partial<RichTreeViewClasses>`                                                         | -                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| defaultExpandedItems    | `string[]`                                                                             | `[]`                                     | Expanded item ids.&#xA;Used when the item's expansion is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| defaultSelectedItems    | `string \| string[] \| null`                                                           | `[]`                                     | Selected item ids. (Uncontrolled)&#xA;When `multiSelect` is true this takes an array of strings; when false (default) a string.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| disableSelection        | `boolean`                                                                              | `false`                                  | Whether selection is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabledItemsFocusable  | `boolean`                                                                              | `false`                                  | Whether the items should be focusable when disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| domStructure            | `TreeViewDOMStructure`                                                                 | `'nested'`                               | When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).&#xA;When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).&#xA;Nested DOM structure is not compatible with collapse / expansion animations.                                                                                                                                                                                                                                    |
+| expandedItems           | `string[]`                                                                             | -                                        | Expanded item ids.&#xA;Used when the item's expansion is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| expansionTrigger        | `'content' \| 'iconContainer'`                                                         | `'content'`                              | The slot that triggers the item's expansion when clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| getItemChildren         | `((item: {}) => {}[] \| undefined)`                                                    | `(item) => item.children`                | Used to determine the children of a given item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| getItemId               | `((item: {}) => string)`                                                               | `(item) => item.id`                      | Used to determine the id of a given item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| getItemLabel            | `((item: {}) => string)`                                                               | `(item) => item.label`                   | Used to determine the string label for a given item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| isItemDisabled          | `((item: {}) => boolean)`                                                              | -                                        | Used to determine if a given item should be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| isItemEditable          | `boolean \| ((item: {}) => boolean)`                                                   | `() => false`                            | Determine if a given item can be edited.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| isItemSelectionDisabled | `((item: {}) => boolean)`                                                              | -                                        | Used to determine if a given item should have selection disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| itemChildrenIndentation | `string \| number`                                                                     | `12px`                                   | Horizontal indentation between an item and its children.&#xA;Examples: 24, "24px", "2rem", "2em".                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| itemHeight              | `number \| null`                                                                       | `null`                                   | Sets the height in pixel of an item.&#xA;Set to `null` to explicitly remove any item height restriction when items have different heights.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| items\*                 | `{}[]`                                                                                 | -                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| multiSelect             | `boolean`                                                                              | `false`                                  | Whether multiple items can be selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onExpandedItemsChange   | `((event: React.SyntheticEvent \| null, itemIds: string[]) => void)`                   | -                                        | Callback fired when Tree Items are expanded/collapsed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onItemClick             | `((event: React.MouseEvent, itemId: string) => void)`                                  | -                                        | Callback fired when the `content` slot of a given Tree Item is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onItemExpansionToggle   | `((event: React.SyntheticEvent \| null, itemId: string, isExpanded: boolean) => void)` | -                                        | Callback fired when a Tree Item is expanded or collapsed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onItemFocus             | `((event: React.SyntheticEvent \| null, itemId: string) => void)`                      | -                                        | Callback fired when a given Tree Item is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onItemLabelChange       | `((itemId: string, newLabel: string) => void)`                                         | -                                        | Callback fired when the label of an item changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onItemSelectionToggle   | `((event: React.SyntheticEvent \| null, itemId: string, isSelected: boolean) => void)` | -                                        | Callback fired when a Tree Item is selected or deselected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onSelectedItemsChange   | `((event: React.SyntheticEvent \| null, itemIds: string \| string[] \| null) => void)` | -                                        | Callback fired when Tree Items are selected/deselected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| selectedItems           | `string \| string[] \| null`                                                           | -                                        | Selected item ids. (Controlled)&#xA;When `multiSelect` is true this takes an array of strings; when false (default) a string.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| selectionPropagation    | `TreeViewSelectionPropagation`                                                         | `{ parents: false, descendants: false }` | When `selectionPropagation.descendants` is set to `true`. Selecting a parent selects all its descendants automatically.Deselecting a parent deselects all its descendants automatically. When `selectionPropagation.parents` is set to `true`. Selecting all the descendants of a parent selects the parent automatically.Deselecting a descendant of a selected parent deselects the parent automatically. Only works when `multiSelect` is `true`.&#xA;On the , only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all) |
+| slotProps               | `RichTreeViewSlotProps<{}, boolean \| undefined>`                                      | `{}`                                     | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| slots                   | `RichTreeViewSlots`                                                                    | `{}`                                     | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| sx                      | `SxProps<Theme>`                                                                       | -                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| id                      | `string`                                                                               | -                                        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| className               | `string`                                                                               | -                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+
+## Additional Types
+
+### RichTreeViewApiRef
+
+```typescript
+type RichTreeViewApiRef = {};
+```
+
+### richTreeViewClasses
+
+```typescript
+type richTreeViewClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's label input element (visible only when editing is enabled). */
+  itemLabelInput: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+};
+```
+
+### RichTreeViewClasses
+
+```typescript
+type RichTreeViewClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's label input element (visible only when editing is enabled). */
+  itemLabelInput: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+};
+```
+
+### RichTreeViewClassKey
+
+```typescript
+type RichTreeViewClassKey =
+  | 'root'
+  | 'item'
+  | 'itemContent'
+  | 'itemGroupTransition'
+  | 'itemIconContainer'
+  | 'itemLabel'
+  | 'itemLabelInput'
+  | 'itemCheckbox';
+```
+
+### RichTreeViewProps
+
+```typescript
+type RichTreeViewProps<R extends {}, Multiple extends boolean | undefined> = {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: RichTreeViewSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: RichTreeViewSlotProps<R, Multiple>;
+  /** The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiRef()`. */
+  apiRef?: RichTreeViewApiRef;
+  /** Callback fired when the label of an item changes. */
+  onItemLabelChange?: (itemId: string, newLabel: string) => void;
+  /**
+   * Determine if a given item can be edited.
+   * @default () => false
+   * @template
+   * @returns `true` if the item can be edited.
+   */
+  isItemEditable?: boolean | ((item: R) => boolean);
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   * @default 'nested'
+   */
+  domStructure?: TreeViewDOMStructure;
+  /**
+   * Whether the items should be focusable when disabled.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  items: R[];
+  /**
+   * Used to determine if a given item should be disabled.
+   * @template
+   * @returns `true` if the item should be disabled.
+   */
+  isItemDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine if a given item should have selection disabled.
+   * @template
+   * @returns `true` if the item should have selection disabled.
+   */
+  isItemSelectionDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine the string label for a given item.
+   * @default (item) => item.label
+   * @template
+   * @returns The label of the item.
+   */
+  getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the children of a given item.
+   * @default (item) => item.children
+   * @template
+   * @returns The children of the item.
+   */
+  getItemChildren?: (item: R) => R[] | undefined;
+  /**
+   * Used to determine the id of a given item.
+   * @default (item) => item.id
+   * @template
+   * @returns The id of the item.
+   */
+  getItemId?: (item: R) => string;
+  /** Callback fired when the `content` slot of a given Tree Item is clicked. */
+  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is controlled.
+   */
+  expandedItems?: string[];
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is not controlled.
+   * @default []
+   */
+  defaultExpandedItems?: string[];
+  /** Callback fired when Tree Items are expanded/collapsed. */
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
+  /** Callback fired when a Tree Item is expanded or collapsed. */
+  onItemExpansionToggle?: (
+    event: React.SyntheticEvent | null,
+    itemId: string,
+    isExpanded: boolean,
+  ) => void;
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger?: 'content' | 'iconContainer';
+  /**
+   * Whether selection is disabled.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * Selected item ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selectedItems?: string | string[] | null;
+  /**
+   * Selected item ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelectedItems?: string | string[] | null;
+  /**
+   * Whether multiple items can be selected.
+   * @default false
+   */
+  multiSelect?: boolean | undefined;
+  /**
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection?: boolean;
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation?: TreeViewSelectionPropagation;
+  /** Callback fired when Tree Items are selected/deselected. */
+  onSelectedItemsChange?: (
+    event: React.SyntheticEvent | null,
+    itemIds: string | string[] | null,
+  ) => void;
+  /** Callback fired when a Tree Item is selected or deselected. */
+  onItemSelectionToggle?: (
+    event: React.SyntheticEvent | null,
+    itemId: string,
+    isSelected: boolean,
+  ) => void;
+  /** Callback fired when a given Tree Item is focused. */
+  onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
+  /**
+   * Sets the height in pixel of an item.
+   * Set to `null` to explicitly remove any item height restriction when items have different heights.
+   * @default null
+   */
+  itemHeight?: number | null;
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RichTreeViewClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### RichTreeViewPropsBase
+
+```typescript
+type RichTreeViewPropsBase = {
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<RichTreeViewClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+};
+```
+
+### RichTreeViewRoot
+
+```typescript
+type RichTreeViewRoot = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'children'
+    | 'onFocus'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### RichTreeViewSlotProps
+
+```typescript
+type RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> = {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+  item?: SlotComponentProps<TreeItemComponent, {}, RichTreeViewItemsOwnerState>;
+  root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
+};
+```
+
+### RichTreeViewSlots
+
+```typescript
+type RichTreeViewSlots = {
+  /**
+   * Element rendered at the root.
+   * @default RichTreeViewRoot
+   */
+  root?: React.ElementType;
+  /** The default icon used to collapse the item. */
+  collapseIcon?: React.ElementType | null;
+  /** The default icon used to expand the item. */
+  expandIcon?: React.ElementType | null;
+  /**
+   * The default icon displayed next to an end item.
+   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
+   */
+  endIcon?: React.ElementType | null;
+  /**
+   * Custom component to render a Tree Item.
+   * @default TreeItem.
+   */
+  item?: React.JSXElementConstructor<TreeItemProps>;
+};
+```
+
+## External Types
+
+### TreeViewDOMStructure
+
+```typescript
+type TreeViewDOMStructure = 'flat' | 'nested';
+```
diff --git a/docs/pages/x/api/tree-view/types.rich-tree-view.ts b/docs/pages/x/api/tree-view/types.rich-tree-view.ts
new file mode 100644
index 0000000000000..d0ee3a3c3a41c
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.rich-tree-view.ts
@@ -0,0 +1,4 @@
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesRichTreeView = createTypes(import.meta.url, RichTreeView);
diff --git a/docs/pages/x/api/tree-view/types.simple-tree-view.md b/docs/pages/x/api/tree-view/types.simple-tree-view.md
new file mode 100644
index 0000000000000..7b5464a9ffbe9
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.simple-tree-view.md
@@ -0,0 +1,571 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.simple-tree-view.md'
+
+## API Reference
+
+### getSimpleTreeViewUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### SimpleTreeView
+
+Demos:
+
+- [Tree View](https://mui.com/x/react-tree-view/)
+
+API:
+
+- [SimpleTreeView API](https://mui.com/x/api/tree-view/simple-tree-view/)
+
+**SimpleTreeView Props:**
+
+| Prop                    | Type                                                                                   | Default                                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| :---------------------- | :------------------------------------------------------------------------------------- | :--------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| apiRef                  | `SimpleTreeViewApiRef`                                                                 | -                                        | The ref object that allows Tree View manipulation. Can be instantiated with `useSimpleTreeViewApiRef()`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| checkboxSelection       | `boolean`                                                                              | `false`                                  | Whether the Tree View renders a checkbox at the left of its label that allows selecting it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| classes                 | `Partial<SimpleTreeViewClasses>`                                                       | -                                        | Override or extend the styles applied to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| defaultExpandedItems    | `string[]`                                                                             | `[]`                                     | Expanded item ids.&#xA;Used when the item's expansion is not controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| defaultSelectedItems    | `string \| string[] \| null`                                                           | `[]`                                     | Selected item ids. (Uncontrolled)&#xA;When `multiSelect` is true this takes an array of strings; when false (default) a string.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| disableSelection        | `boolean`                                                                              | `false`                                  | Whether selection is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| disabledItemsFocusable  | `boolean`                                                                              | `false`                                  | Whether the items should be focusable when disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| expandedItems           | `string[]`                                                                             | -                                        | Expanded item ids.&#xA;Used when the item's expansion is controlled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| expansionTrigger        | `'content' \| 'iconContainer'`                                                         | `'content'`                              | The slot that triggers the item's expansion when clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| itemChildrenIndentation | `string \| number`                                                                     | `12px`                                   | Horizontal indentation between an item and its children.&#xA;Examples: 24, "24px", "2rem", "2em".                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| itemHeight              | `number \| null`                                                                       | `null`                                   | Sets the height in pixel of an item.&#xA;Set to `null` to explicitly remove any item height restriction when items have different heights.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| multiSelect             | `boolean`                                                                              | `false`                                  | Whether multiple items can be selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onExpandedItemsChange   | `((event: React.SyntheticEvent \| null, itemIds: string[]) => void)`                   | -                                        | Callback fired when Tree Items are expanded/collapsed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| onItemClick             | `((event: React.MouseEvent, itemId: string) => void)`                                  | -                                        | Callback fired when the `content` slot of a given Tree Item is clicked.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| onItemExpansionToggle   | `((event: React.SyntheticEvent \| null, itemId: string, isExpanded: boolean) => void)` | -                                        | Callback fired when a Tree Item is expanded or collapsed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onItemFocus             | `((event: React.SyntheticEvent \| null, itemId: string) => void)`                      | -                                        | Callback fired when a given Tree Item is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onItemSelectionToggle   | `((event: React.SyntheticEvent \| null, itemId: string, isSelected: boolean) => void)` | -                                        | Callback fired when a Tree Item is selected or deselected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onSelectedItemsChange   | `((event: React.SyntheticEvent \| null, itemIds: string \| string[] \| null) => void)` | -                                        | Callback fired when Tree Items are selected/deselected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| selectedItems           | `string \| string[] \| null`                                                           | -                                        | Selected item ids. (Controlled)&#xA;When `multiSelect` is true this takes an array of strings; when false (default) a string.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| selectionPropagation    | `TreeViewSelectionPropagation`                                                         | `{ parents: false, descendants: false }` | When `selectionPropagation.descendants` is set to `true`. Selecting a parent selects all its descendants automatically.Deselecting a parent deselects all its descendants automatically. When `selectionPropagation.parents` is set to `true`. Selecting all the descendants of a parent selects the parent automatically.Deselecting a descendant of a selected parent deselects the parent automatically. Only works when `multiSelect` is `true`.&#xA;On the , only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all) |
+| slotProps               | `SimpleTreeViewSlotProps`                                                              | -                                        | The props used for each component slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| slots                   | `SimpleTreeViewSlots`                                                                  | -                                        | Overridable component slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| sx                      | `SxProps<Theme>`                                                                       | -                                        | The system prop that allows defining system overrides as well as additional CSS styles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| id                      | `string`                                                                               | -                                        | This prop is used to help implement the accessibility logic.&#xA;If you don't provide this prop. It falls back to a randomly generated id.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| children                | `React.ReactNode`                                                                      | -                                        | The content of the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| className               | `string`                                                                               | -                                        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+
+## Additional Types
+
+### SimpleTreeViewApiRef
+
+```typescript
+type SimpleTreeViewApiRef = {};
+```
+
+### simpleTreeViewClasses
+
+```typescript
+type simpleTreeViewClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+};
+```
+
+### SimpleTreeViewClasses
+
+```typescript
+type SimpleTreeViewClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+};
+```
+
+### SimpleTreeViewClassKey
+
+```typescript
+type SimpleTreeViewClassKey =
+  | 'root'
+  | 'item'
+  | 'itemContent'
+  | 'itemGroupTransition'
+  | 'itemIconContainer'
+  | 'itemLabel'
+  | 'itemCheckbox';
+```
+
+### SimpleTreeViewProps
+
+```typescript
+type SimpleTreeViewProps<Multiple extends boolean | undefined> = {
+  /** The content of the component. */
+  children?: React.ReactNode;
+  /** Overridable component slots. */
+  slots?: SimpleTreeViewSlots;
+  /** The props used for each component slot. */
+  slotProps?: SimpleTreeViewSlotProps;
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<SimpleTreeViewClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** The ref object that allows Tree View manipulation. Can be instantiated with `useSimpleTreeViewApiRef()`. */
+  apiRef?: SimpleTreeViewApiRef;
+  /**
+   * Whether the items should be focusable when disabled.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  /** Callback fired when the `content` slot of a given Tree Item is clicked. */
+  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is controlled.
+   */
+  expandedItems?: string[];
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is not controlled.
+   * @default []
+   */
+  defaultExpandedItems?: string[];
+  /** Callback fired when Tree Items are expanded/collapsed. */
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
+  /** Callback fired when a Tree Item is expanded or collapsed. */
+  onItemExpansionToggle?: (
+    event: React.SyntheticEvent | null,
+    itemId: string,
+    isExpanded: boolean,
+  ) => void;
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger?: 'content' | 'iconContainer';
+  /**
+   * Whether selection is disabled.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * Selected item ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selectedItems?: string | string[] | null;
+  /**
+   * Selected item ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelectedItems?: string | string[] | null;
+  /**
+   * Whether multiple items can be selected.
+   * @default false
+   */
+  multiSelect?: boolean | undefined;
+  /**
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection?: boolean;
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation?: TreeViewSelectionPropagation;
+  /** Callback fired when Tree Items are selected/deselected. */
+  onSelectedItemsChange?: (
+    event: React.SyntheticEvent | null,
+    itemIds: string | string[] | null,
+  ) => void;
+  /** Callback fired when a Tree Item is selected or deselected. */
+  onItemSelectionToggle?: (
+    event: React.SyntheticEvent | null,
+    itemId: string,
+    isSelected: boolean,
+  ) => void;
+  /** Callback fired when a given Tree Item is focused. */
+  onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
+  /**
+   * Sets the height in pixel of an item.
+   * Set to `null` to explicitly remove any item height restriction when items have different heights.
+   * @default null
+   */
+  itemHeight?: number | null;
+};
+```
+
+### SimpleTreeViewRoot
+
+```typescript
+type SimpleTreeViewRoot = StyledComponent<
+  MUIStyledCommonProps<Theme> & { ownerState: SimpleTreeViewProps<any> },
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'slot'
+    | 'style'
+    | 'title'
+    | 'color'
+    | 'content'
+    | 'translate'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'spellCheck'
+    | 'tabIndex'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'children'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocus'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### SimpleTreeViewSlotProps
+
+```typescript
+type SimpleTreeViewSlotProps = {
+  root?: SlotComponentProps<'ul', {}, {}>;
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+};
+```
+
+### SimpleTreeViewSlots
+
+```typescript
+type SimpleTreeViewSlots = {
+  /**
+   * Element rendered at the root.
+   * @default SimpleTreeViewRoot
+   */
+  root?: React.ElementType;
+  /** The default icon used to collapse the item. */
+  collapseIcon?: React.ElementType | null;
+  /** The default icon used to expand the item. */
+  expandIcon?: React.ElementType | null;
+  /**
+   * The default icon displayed next to an end item.
+   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
+   */
+  endIcon?: React.ElementType | null;
+};
+```
diff --git a/docs/pages/x/api/tree-view/types.simple-tree-view.ts b/docs/pages/x/api/tree-view/types.simple-tree-view.ts
new file mode 100644
index 0000000000000..92c6de4eee25b
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.simple-tree-view.ts
@@ -0,0 +1,4 @@
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesSimpleTreeView = createTypes(import.meta.url, SimpleTreeView);
diff --git a/docs/pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.md b/docs/pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.md
new file mode 100644
index 0000000000000..611bcb2625210
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.md
@@ -0,0 +1,37 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.md'
+
+## API Reference
+
+### TreeItemDragAndDropOverlay
+
+**TreeItemDragAndDropOverlay Props:**
+
+| Prop   | Type                            | Default | Description |
+| :----- | :------------------------------ | :------ | :---------- |
+| action | `TreeViewItemsReorderingAction` | -       | -           |
+| style  | `React.CSSProperties`           | -       | -           |
+
+## Additional Types
+
+### TreeItemDragAndDropOverlayProps
+
+```typescript
+type TreeItemDragAndDropOverlayProps = {
+  action?: TreeViewItemsReorderingAction;
+  style?: React.CSSProperties;
+};
+```
+
+## External Types
+
+### TreeViewItemsReorderingAction
+
+```typescript
+type TreeViewItemsReorderingAction =
+  | 'reorder-above'
+  | 'reorder-below'
+  | 'make-child'
+  | 'move-to-parent';
+```
diff --git a/docs/pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.ts b/docs/pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.ts
new file mode 100644
index 0000000000000..99f14033a64c4
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item-drag-and-drop-overlay.ts
@@ -0,0 +1,4 @@
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTreeItemDragAndDropOverlay = createTypes(import.meta.url, TreeItemDragAndDropOverlay);
diff --git a/docs/pages/x/api/tree-view/types.tree-item-icon.md b/docs/pages/x/api/tree-view/types.tree-item-icon.md
new file mode 100644
index 0000000000000..63c766d4128c8
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item-icon.md
@@ -0,0 +1,61 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.tree-item-icon.md'
+
+## API Reference
+
+### TreeItemIcon
+
+**TreeItemIcon Props:**
+
+| Prop      | Type                    | Default | Description                             |
+| :-------- | :---------------------- | :------ | :-------------------------------------- |
+| slotProps | `TreeItemIconSlotProps` | `{}`    | The props used for each component slot. |
+| slots     | `TreeItemIconSlots`     | `{}`    | Overridable component slots.            |
+| status\*  | `UseTreeItemStatus`     | -       | -                                       |
+
+## Additional Types
+
+### TreeItemIconProps
+
+```typescript
+type TreeItemIconProps = {
+  status: UseTreeItemStatus;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TreeItemIconSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TreeItemIconSlotProps;
+};
+```
+
+### TreeItemIconSlotProps
+
+```typescript
+type TreeItemIconSlotProps = {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+  icon?: SlotComponentProps<'svg', {}, {}>;
+};
+```
+
+### TreeItemIconSlots
+
+```typescript
+type TreeItemIconSlots = {
+  /** The icon used to collapse the item. */
+  collapseIcon?: React.ElementType | null;
+  /** The icon used to expand the item. */
+  expandIcon?: React.ElementType | null;
+  /** The icon displayed next to an end item. */
+  endIcon?: React.ElementType | null;
+  /** The icon to display next to the Tree Item's label. */
+  icon?: React.ElementType | null;
+};
+```
diff --git a/docs/pages/x/api/tree-view/types.tree-item-icon.ts b/docs/pages/x/api/tree-view/types.tree-item-icon.ts
new file mode 100644
index 0000000000000..d4b04f535c0f1
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item-icon.ts
@@ -0,0 +1,4 @@
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTreeItemIcon = createTypes(import.meta.url, TreeItemIcon);
diff --git a/docs/pages/x/api/tree-view/types.tree-item-provider.md b/docs/pages/x/api/tree-view/types.tree-item-provider.md
new file mode 100644
index 0000000000000..c3885b0f65cfc
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item-provider.md
@@ -0,0 +1,23 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.tree-item-provider.md'
+
+## API Reference
+
+### TreeItemProvider
+
+**TreeItemProvider Props:**
+
+| Prop       | Type                  | Default | Description |
+| :--------- | :-------------------- | :------ | :---------- |
+| itemId\*   | `string`              | -       | -           |
+| id\*       | `string \| undefined` | -       | -           |
+| children\* | `React.ReactNode`     | -       | -           |
+
+## Additional Types
+
+### TreeItemProviderProps
+
+```typescript
+type TreeItemProviderProps = { children: React.ReactNode; itemId: string; id: string | undefined };
+```
diff --git a/docs/pages/x/api/tree-view/types.tree-item-provider.ts b/docs/pages/x/api/tree-view/types.tree-item-provider.ts
new file mode 100644
index 0000000000000..dae2e40c2221e
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item-provider.ts
@@ -0,0 +1,4 @@
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTreeItemProvider = createTypes(import.meta.url, TreeItemProvider);
diff --git a/docs/pages/x/api/tree-view/types.tree-item.md b/docs/pages/x/api/tree-view/types.tree-item.md
new file mode 100644
index 0000000000000..7d3a7f2efbe67
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item.md
@@ -0,0 +1,1704 @@
+# Tree View
+
+[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/tree-view/types.tree-item.md'
+
+## API Reference
+
+### getTreeItemUtilityClass
+
+**Parameters:**
+
+| Parameter | Type     | Default | Description |
+| :-------- | :------- | :------ | :---------- |
+| slot      | `string` | -       | -           |
+
+**Return Value:**
+
+```tsx
+type ReturnValue = string;
+```
+
+### TreeItem
+
+Demos:
+
+- [Tree View](https://mui.com/x/react-tree-view/)
+
+API:
+
+- [TreeItem API](https://mui.com/x/api/tree-view/tree-item-2/)
+
+**TreeItem Props:**
+
+| Prop             | Type                                                                        | Default | Description                                                                                                       |
+| :--------------- | :-------------------------------------------------------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------- |
+| label            | `React.ReactNode`                                                           | -       | The label of the item.                                                                                            |
+| classes          | `Partial<TreeItemClasses>`                                                  | -       | Override or extend the styles applied to the component.                                                           |
+| disableSelection | `boolean`                                                                   | `false` | If `true`, the item cannot be selected.                                                                           |
+| itemId\*         | `string`                                                                    | -       | The id of the item.&#xA;Must be unique.                                                                           |
+| onBlur           | `TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement, Element>>` | -       | Callback fired when the item root is blurred.                                                                     |
+| onFocus          | `null`                                                                      | -       | This prop isn't supported.&#xA;Use the `onItemFocus` callback on the tree if you need to monitor an item's focus. |
+| onKeyDown        | `TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>`       | -       | Callback fired when a key is pressed on the keyboard and the tree is in focus.                                    |
+| slotProps        | `TreeItemSlotProps`                                                         | `{}`    | The props used for each component slot.                                                                           |
+| slots            | `TreeItemSlots`                                                             | `{}`    | Overridable component slots.                                                                                      |
+| sx               | `SxProps<Theme>`                                                            | -       | The system prop that allows defining system overrides as well as additional CSS styles.                           |
+| disabled         | `boolean`                                                                   | `false` | If `true`, the item is disabled.                                                                                  |
+| id               | `string`                                                                    | -       | The id attribute of the item. If not provided, it will be generated.                                              |
+| children         | `React.ReactNode`                                                           | -       | The content of the component.                                                                                     |
+| className        | `string`                                                                    | -       | -                                                                                                                 |
+
+## Additional Types
+
+### TreeItemCheckbox
+
+```typescript
+type TreeItemCheckbox = StyledComponent<
+  Pick<
+    Omit<CheckboxProps & { visible?: boolean }, 'ref'> & React.RefAttributes<HTMLButtonElement>,
+    | 'id'
+    | 'disabled'
+    | 'onFocus'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'form'
+    | 'visible'
+    | 'name'
+    | 'value'
+    | 'action'
+    | 'classes'
+    | 'component'
+    | 'sx'
+    | 'slots'
+    | 'slotProps'
+    | 'checkedIcon'
+    | 'icon'
+    | 'centerRipple'
+    | 'disableRipple'
+    | 'disableTouchRipple'
+    | 'focusRipple'
+    | 'focusVisibleClassName'
+    | 'LinkComponent'
+    | 'onFocusVisible'
+    | 'TouchRippleProps'
+    | 'touchRippleRef'
+    | 'formAction'
+    | 'formEncType'
+    | 'formMethod'
+    | 'formNoValidate'
+    | 'formTarget'
+    | 'checked'
+    | 'disableFocusRipple'
+    | 'edge'
+    | 'readOnly'
+    | 'required'
+    | 'indeterminate'
+    | 'indeterminateIcon'
+    | 'size'
+    | 'ref'
+    | 'key'
+  > &
+    MUIStyledCommonProps<Theme>,
+  {},
+  {}
+>;
+```
+
+### treeItemClasses
+
+```typescript
+type treeItemClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the content element. */
+  content: string;
+  /** Styles applied to the transition element. */
+  groupTransition: string;
+  /** Styles applied to the icon container element. */
+  iconContainer: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the label input element (visible only when editing is enabled). */
+  labelInput: string;
+  /** Styles applied to the checkbox element. */
+  checkbox: string;
+  /** Styles applied to the drag and drop overlay element. */
+  dragAndDropOverlay: string;
+  /** Styles applied to the error icon element */
+  errorIcon: string;
+  /** Styles applied to the loading icon element */
+  loadingIcon: string;
+};
+```
+
+### TreeItemClasses
+
+```typescript
+type TreeItemClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the content element. */
+  content: string;
+  /** Styles applied to the transition element. */
+  groupTransition: string;
+  /** Styles applied to the icon container element. */
+  iconContainer: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the label input element (visible only when editing is enabled). */
+  labelInput: string;
+  /** Styles applied to the checkbox element. */
+  checkbox: string;
+  /** Styles applied to the drag and drop overlay element. */
+  dragAndDropOverlay: string;
+  /** Styles applied to the error icon element */
+  errorIcon: string;
+  /** Styles applied to the loading icon element */
+  loadingIcon: string;
+};
+```
+
+### TreeItemClassKey
+
+```typescript
+type TreeItemClassKey =
+  | 'label'
+  | 'content'
+  | 'root'
+  | 'groupTransition'
+  | 'iconContainer'
+  | 'labelInput'
+  | 'checkbox'
+  | 'dragAndDropOverlay'
+  | 'errorIcon'
+  | 'loadingIcon';
+```
+
+### TreeItemContent
+
+```typescript
+type TreeItemContent = StyledComponent<
+  MUIStyledCommonProps<Theme> & { status: UseTreeItemStatus },
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  {}
+>;
+```
+
+### TreeItemGroupTransition
+
+```typescript
+type TreeItemGroupTransition = StyledComponent<
+  Pick<
+    CollapseProps,
+    | 'id'
+    | 'children'
+    | 'onFocus'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'in'
+    | 'mountOnEnter'
+    | 'unmountOnExit'
+    | 'timeout'
+    | 'easing'
+    | 'addEndListener'
+    | 'onEnter'
+    | 'onEntering'
+    | 'onEntered'
+    | 'onExit'
+    | 'onExiting'
+    | 'onExited'
+    | 'appear'
+    | 'enter'
+    | 'exit'
+    | 'ref'
+    | 'classes'
+    | 'collapsedSize'
+    | 'component'
+    | 'orientation'
+    | 'sx'
+    | 'slots'
+    | 'slotProps'
+  > &
+    MUIStyledCommonProps<Theme>,
+  {},
+  {}
+>;
+```
+
+### TreeItemIconContainer
+
+```typescript
+type TreeItemIconContainer = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'children'
+    | 'onFocus'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+  >,
+  {}
+>;
+```
+
+### TreeItemLabel
+
+```typescript
+type TreeItemLabel = StyledComponent<
+  MUIStyledCommonProps<Theme> & { editable?: boolean },
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  {}
+>;
+```
+
+### TreeItemProps
+
+```typescript
+type TreeItemProps = {
+  className?: string;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<TreeItemClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TreeItemSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TreeItemSlotProps;
+  /**
+   * This prop isn't supported.
+   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
+   */
+  onFocus?: null;
+  /** Callback fired when the item root is blurred. */
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement, Element>>;
+  /** Callback fired when a key is pressed on the keyboard and the tree is in focus. */
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+  /** The id attribute of the item. If not provided, it will be generated. */
+  id?: string;
+  /**
+   * If `true`, the item is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the item cannot be selected.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * The id of the item.
+   * Must be unique.
+   */
+  itemId: string;
+  /** The label of the item. */
+  label?: React.ReactNode;
+  /** The content of the component. */
+  children?: React.ReactNode;
+};
+```
+
+### TreeItemRoot
+
+```typescript
+type TreeItemRoot = StyledComponent<
+  MUIStyledCommonProps<Theme>,
+  Pick<
+    React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
+    | 'ref'
+    | 'key'
+    | 'id'
+    | 'children'
+    | 'onFocus'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'accessKey'
+    | 'autoCapitalize'
+    | 'autoFocus'
+    | 'className'
+    | 'contentEditable'
+    | 'contextMenu'
+    | 'dir'
+    | 'draggable'
+    | 'enterKeyHint'
+    | 'hidden'
+    | 'lang'
+    | 'nonce'
+    | 'slot'
+    | 'spellCheck'
+    | 'style'
+    | 'tabIndex'
+    | 'title'
+    | 'translate'
+    | 'radioGroup'
+    | 'role'
+    | 'about'
+    | 'content'
+    | 'datatype'
+    | 'inlist'
+    | 'prefix'
+    | 'property'
+    | 'rel'
+    | 'resource'
+    | 'rev'
+    | 'typeof'
+    | 'vocab'
+    | 'autoCorrect'
+    | 'autoSave'
+    | 'color'
+    | 'itemProp'
+    | 'itemScope'
+    | 'itemType'
+    | 'itemID'
+    | 'itemRef'
+    | 'results'
+    | 'security'
+    | 'unselectable'
+    | 'popover'
+    | 'popoverTargetAction'
+    | 'popoverTarget'
+    | 'inert'
+    | 'inputMode'
+    | 'is'
+    | 'exportparts'
+    | 'part'
+    | 'tw'
+    | 'aria-activedescendant'
+    | 'aria-atomic'
+    | 'aria-autocomplete'
+    | 'aria-braillelabel'
+    | 'aria-brailleroledescription'
+    | 'aria-busy'
+    | 'aria-checked'
+    | 'aria-colcount'
+    | 'aria-colindex'
+    | 'aria-colindextext'
+    | 'aria-colspan'
+    | 'aria-controls'
+    | 'aria-current'
+    | 'aria-describedby'
+    | 'aria-description'
+    | 'aria-details'
+    | 'aria-disabled'
+    | 'aria-dropeffect'
+    | 'aria-errormessage'
+    | 'aria-expanded'
+    | 'aria-flowto'
+    | 'aria-grabbed'
+    | 'aria-haspopup'
+    | 'aria-hidden'
+    | 'aria-invalid'
+    | 'aria-keyshortcuts'
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-level'
+    | 'aria-live'
+    | 'aria-modal'
+    | 'aria-multiline'
+    | 'aria-multiselectable'
+    | 'aria-orientation'
+    | 'aria-owns'
+    | 'aria-placeholder'
+    | 'aria-posinset'
+    | 'aria-pressed'
+    | 'aria-readonly'
+    | 'aria-relevant'
+    | 'aria-required'
+    | 'aria-roledescription'
+    | 'aria-rowcount'
+    | 'aria-rowindex'
+    | 'aria-rowindextext'
+    | 'aria-rowspan'
+    | 'aria-selected'
+    | 'aria-setsize'
+    | 'aria-sort'
+    | 'aria-valuemax'
+    | 'aria-valuemin'
+    | 'aria-valuenow'
+    | 'aria-valuetext'
+    | 'dangerouslySetInnerHTML'
+    | 'onCopy'
+    | 'onCopyCapture'
+    | 'onCut'
+    | 'onCutCapture'
+    | 'onPaste'
+    | 'onPasteCapture'
+    | 'onCompositionEnd'
+    | 'onCompositionEndCapture'
+    | 'onCompositionStart'
+    | 'onCompositionStartCapture'
+    | 'onCompositionUpdate'
+    | 'onCompositionUpdateCapture'
+    | 'onFocusCapture'
+    | 'onBlur'
+    | 'onBlurCapture'
+    | 'onChange'
+    | 'onChangeCapture'
+    | 'onBeforeInput'
+    | 'onBeforeInputCapture'
+    | 'onInput'
+    | 'onInputCapture'
+    | 'onReset'
+    | 'onResetCapture'
+    | 'onSubmit'
+    | 'onSubmitCapture'
+    | 'onInvalid'
+    | 'onInvalidCapture'
+    | 'onLoad'
+    | 'onLoadCapture'
+    | 'onError'
+    | 'onErrorCapture'
+    | 'onKeyDown'
+    | 'onKeyDownCapture'
+    | 'onKeyPress'
+    | 'onKeyPressCapture'
+    | 'onKeyUp'
+    | 'onKeyUpCapture'
+    | 'onAbort'
+    | 'onAbortCapture'
+    | 'onCanPlay'
+    | 'onCanPlayCapture'
+    | 'onCanPlayThrough'
+    | 'onCanPlayThroughCapture'
+    | 'onDurationChange'
+    | 'onDurationChangeCapture'
+    | 'onEmptied'
+    | 'onEmptiedCapture'
+    | 'onEncrypted'
+    | 'onEncryptedCapture'
+    | 'onEnded'
+    | 'onEndedCapture'
+    | 'onLoadedData'
+    | 'onLoadedDataCapture'
+    | 'onLoadedMetadata'
+    | 'onLoadedMetadataCapture'
+    | 'onLoadStart'
+    | 'onLoadStartCapture'
+    | 'onPause'
+    | 'onPauseCapture'
+    | 'onPlay'
+    | 'onPlayCapture'
+    | 'onPlaying'
+    | 'onPlayingCapture'
+    | 'onProgress'
+    | 'onProgressCapture'
+    | 'onRateChange'
+    | 'onRateChangeCapture'
+    | 'onSeeked'
+    | 'onSeekedCapture'
+    | 'onSeeking'
+    | 'onSeekingCapture'
+    | 'onStalled'
+    | 'onStalledCapture'
+    | 'onSuspend'
+    | 'onSuspendCapture'
+    | 'onTimeUpdate'
+    | 'onTimeUpdateCapture'
+    | 'onVolumeChange'
+    | 'onVolumeChangeCapture'
+    | 'onWaiting'
+    | 'onWaitingCapture'
+    | 'onAuxClick'
+    | 'onAuxClickCapture'
+    | 'onClick'
+    | 'onClickCapture'
+    | 'onContextMenu'
+    | 'onContextMenuCapture'
+    | 'onDoubleClick'
+    | 'onDoubleClickCapture'
+    | 'onDrag'
+    | 'onDragCapture'
+    | 'onDragEnd'
+    | 'onDragEndCapture'
+    | 'onDragEnter'
+    | 'onDragEnterCapture'
+    | 'onDragExit'
+    | 'onDragExitCapture'
+    | 'onDragLeave'
+    | 'onDragLeaveCapture'
+    | 'onDragOver'
+    | 'onDragOverCapture'
+    | 'onDragStart'
+    | 'onDragStartCapture'
+    | 'onDrop'
+    | 'onDropCapture'
+    | 'onMouseDown'
+    | 'onMouseDownCapture'
+    | 'onMouseEnter'
+    | 'onMouseLeave'
+    | 'onMouseMove'
+    | 'onMouseMoveCapture'
+    | 'onMouseOut'
+    | 'onMouseOutCapture'
+    | 'onMouseOver'
+    | 'onMouseOverCapture'
+    | 'onMouseUp'
+    | 'onMouseUpCapture'
+    | 'onSelect'
+    | 'onSelectCapture'
+    | 'onTouchCancel'
+    | 'onTouchCancelCapture'
+    | 'onTouchEnd'
+    | 'onTouchEndCapture'
+    | 'onTouchMove'
+    | 'onTouchMoveCapture'
+    | 'onTouchStart'
+    | 'onTouchStartCapture'
+    | 'onPointerDown'
+    | 'onPointerDownCapture'
+    | 'onPointerMove'
+    | 'onPointerMoveCapture'
+    | 'onPointerUp'
+    | 'onPointerUpCapture'
+    | 'onPointerCancel'
+    | 'onPointerCancelCapture'
+    | 'onPointerEnter'
+    | 'onPointerLeave'
+    | 'onPointerOver'
+    | 'onPointerOverCapture'
+    | 'onPointerOut'
+    | 'onPointerOutCapture'
+    | 'onGotPointerCapture'
+    | 'onGotPointerCaptureCapture'
+    | 'onLostPointerCapture'
+    | 'onLostPointerCaptureCapture'
+    | 'onScroll'
+    | 'onScrollCapture'
+    | 'onScrollEnd'
+    | 'onScrollEndCapture'
+    | 'onWheel'
+    | 'onWheelCapture'
+    | 'onAnimationStart'
+    | 'onAnimationStartCapture'
+    | 'onAnimationEnd'
+    | 'onAnimationEndCapture'
+    | 'onAnimationIteration'
+    | 'onAnimationIterationCapture'
+    | 'onToggle'
+    | 'onBeforeToggle'
+    | 'onTransitionCancel'
+    | 'onTransitionCancelCapture'
+    | 'onTransitionEnd'
+    | 'onTransitionEndCapture'
+    | 'onTransitionRun'
+    | 'onTransitionRunCapture'
+    | 'onTransitionStart'
+    | 'onTransitionStartCapture'
+    | 'value'
+  >,
+  {}
+>;
+```
+
+### TreeItemSlotProps
+
+```typescript
+type TreeItemSlotProps = {
+  root?: SlotComponentProps<'li', {}, {}>;
+  content?: SlotComponentProps<'div', {}, {}>;
+  groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
+  iconContainer?: SlotComponentProps<'div', {}, {}>;
+  checkbox?: SlotComponentProps<
+    React.ElementType<
+      React.HTMLAttributes<HTMLButtonElement> & { visible?: boolean },
+      | 'symbol'
+      | 'object'
+      | 'label'
+      | 'slot'
+      | 'style'
+      | 'title'
+      | 'clipPath'
+      | 'filter'
+      | 'marker'
+      | 'mask'
+      | 'p'
+      | 'a'
+      | 'abbr'
+      | 'address'
+      | 'area'
+      | 'article'
+      | 'aside'
+      | 'audio'
+      | 'b'
+      | 'base'
+      | 'bdi'
+      | 'bdo'
+      | 'big'
+      | 'blockquote'
+      | 'body'
+      | 'br'
+      | 'button'
+      | 'canvas'
+      | 'caption'
+      | 'center'
+      | 'cite'
+      | 'code'
+      | 'col'
+      | 'colgroup'
+      | 'data'
+      | 'datalist'
+      | 'dd'
+      | 'del'
+      | 'details'
+      | 'dfn'
+      | 'dialog'
+      | 'div'
+      | 'dl'
+      | 'dt'
+      | 'em'
+      | 'embed'
+      | 'fieldset'
+      | 'figcaption'
+      | 'figure'
+      | 'footer'
+      | 'form'
+      | 'h1'
+      | 'h2'
+      | 'h3'
+      | 'h4'
+      | 'h5'
+      | 'h6'
+      | 'head'
+      | 'header'
+      | 'hgroup'
+      | 'hr'
+      | 'html'
+      | 'i'
+      | 'iframe'
+      | 'img'
+      | 'input'
+      | 'ins'
+      | 'kbd'
+      | 'keygen'
+      | 'legend'
+      | 'li'
+      | 'link'
+      | 'main'
+      | 'map'
+      | 'mark'
+      | 'menu'
+      | 'menuitem'
+      | 'meta'
+      | 'meter'
+      | 'nav'
+      | 'noindex'
+      | 'noscript'
+      | 'ol'
+      | 'optgroup'
+      | 'option'
+      | 'output'
+      | 'param'
+      | 'picture'
+      | 'pre'
+      | 'progress'
+      | 'q'
+      | 'rp'
+      | 'rt'
+      | 'ruby'
+      | 's'
+      | 'samp'
+      | 'search'
+      | 'script'
+      | 'section'
+      | 'select'
+      | 'small'
+      | 'source'
+      | 'span'
+      | 'strong'
+      | 'sub'
+      | 'summary'
+      | 'sup'
+      | 'table'
+      | 'template'
+      | 'tbody'
+      | 'td'
+      | 'textarea'
+      | 'tfoot'
+      | 'th'
+      | 'thead'
+      | 'time'
+      | 'tr'
+      | 'track'
+      | 'u'
+      | 'ul'
+      | 'var'
+      | 'video'
+      | 'wbr'
+      | 'webview'
+      | 'svg'
+      | 'animate'
+      | 'animateMotion'
+      | 'animateTransform'
+      | 'circle'
+      | 'defs'
+      | 'desc'
+      | 'ellipse'
+      | 'feBlend'
+      | 'feColorMatrix'
+      | 'feComponentTransfer'
+      | 'feComposite'
+      | 'feConvolveMatrix'
+      | 'feDiffuseLighting'
+      | 'feDisplacementMap'
+      | 'feDistantLight'
+      | 'feDropShadow'
+      | 'feFlood'
+      | 'feFuncA'
+      | 'feFuncB'
+      | 'feFuncG'
+      | 'feFuncR'
+      | 'feGaussianBlur'
+      | 'feImage'
+      | 'feMerge'
+      | 'feMergeNode'
+      | 'feMorphology'
+      | 'feOffset'
+      | 'fePointLight'
+      | 'feSpecularLighting'
+      | 'feSpotLight'
+      | 'feTile'
+      | 'feTurbulence'
+      | 'foreignObject'
+      | 'g'
+      | 'image'
+      | 'line'
+      | 'linearGradient'
+      | 'metadata'
+      | 'mpath'
+      | 'path'
+      | 'pattern'
+      | 'polygon'
+      | 'polyline'
+      | 'radialGradient'
+      | 'rect'
+      | 'set'
+      | 'stop'
+      | 'switch'
+      | 'text'
+      | 'textPath'
+      | 'tspan'
+      | 'use'
+      | 'view'
+    >,
+    {},
+    {}
+  >;
+  label?: SlotComponentProps<'div', {}, {}>;
+  labelInput?: SlotComponentProps<'input', {}, {}>;
+  dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
+  errorIcon?: SlotComponentProps<'div', {}, {}>;
+  loadingIcon?: SlotComponentProps<'div', {}, {}>;
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+  icon?: SlotComponentProps<'svg', {}, {}>;
+};
+```
+
+### TreeItemSlots
+
+```typescript
+type TreeItemSlots = {
+  /**
+   * The component that renders the root.
+   * @default TreeItemRoot
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the content of the item.
+   * (e.g.: everything related to this item, not to its children).
+   * @default TreeItemContent
+   */
+  content?: React.ElementType;
+  /**
+   * The component that renders the children of the item.
+   * @default TreeItemGroupTransition
+   */
+  groupTransition?: React.ElementType;
+  /**
+   * The component that renders the icon.
+   * @default TreeItemIconContainer
+   */
+  iconContainer?: React.ElementType;
+  /**
+   * The component that renders the item checkbox for selection.
+   * @default TreeItemCheckbox
+   */
+  checkbox?: React.ElementType;
+  /**
+   * The component that renders the item label.
+   * @default TreeItemLabel
+   */
+  label?: React.ElementType;
+  /**
+   * The component that renders the input to edit the label when the item is editable and is currently being edited.
+   * @default TreeItemLabelInput
+   */
+  labelInput?: React.ElementType;
+  /**
+   * The component that renders the overlay when an item reordering is ongoing.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
+   * @default TreeItemDragAndDropOverlay
+   */
+  dragAndDropOverlay?: React.ElementType;
+  /**
+   * The component that is rendered when the item is in an error state.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component is lazy loading is enabled.
+   * @default TreeItemErrorContainer
+   */
+  errorIcon?: React.ElementType;
+  /**
+   * The component that is rendered when the item is in a loading state.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component is lazy loading is enabled.
+   * @default TreeItemLoadingContainer
+   */
+  loadingIcon?: React.ElementType;
+  /** The icon used to collapse the item. */
+  collapseIcon?: React.ElementType | null;
+  /** The icon used to expand the item. */
+  expandIcon?: React.ElementType | null;
+  /** The icon displayed next to an end item. */
+  endIcon?: React.ElementType | null;
+  /** The icon to display next to the Tree Item's label. */
+  icon?: React.ElementType | null;
+};
+```
+
+## External Types
+
+### TreeViewCancellableEventHandler
+
+```typescript
+type TreeViewCancellableEventHandler = (event: unknown) => void;
+```
diff --git a/docs/pages/x/api/tree-view/types.tree-item.ts b/docs/pages/x/api/tree-view/types.tree-item.ts
new file mode 100644
index 0000000000000..f58186ce8ad30
--- /dev/null
+++ b/docs/pages/x/api/tree-view/types.tree-item.ts
@@ -0,0 +1,4 @@
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { createTypes } from 'docsx/src/modules/api-docs/createTypes';
+
+export const TypesTreeItem = createTypes(import.meta.url, TreeItem);
diff --git a/docs/src/modules/api-docs/ReferenceTable.tsx b/docs/src/modules/api-docs/ReferenceTable.tsx
new file mode 100644
index 0000000000000..3b4e5cbf5598c
--- /dev/null
+++ b/docs/src/modules/api-docs/ReferenceTable.tsx
@@ -0,0 +1,256 @@
+/**
+ * Minimal API reference table used by the new `@mui/internal-docs-infra` types pipeline.
+ *
+ * The factory in `createTypes.tsx` pre-renders every HAST field on the metadata into
+ * a React node — render directly, no HAST conversion here.
+ */
+import * as React from 'react';
+import type { TypesTableProps } from '@mui/internal-docs-infra/useTypes';
+import typesRegistry from './typesRegistry.json';
+import { useAllowedProps } from './TypesPageShell';
+
+const registry = typesRegistry as Record<string, string>;
+
+export function ReferenceTable(props: TypesTableProps<{}>) {
+  const { type, additionalTypes } = props;
+  const allowedProps = useAllowedProps();
+
+  const inlineAdditional: any[] = [];
+  const linkedAdditional: Array<{ name: string; href: string }> = [];
+
+  for (const meta of additionalTypes ?? []) {
+    const anyMeta = meta as any;
+    const href = registry[anyMeta.name];
+    if (href) {
+      linkedAdditional.push({ name: anyMeta.name, href });
+    } else if (hasContent(anyMeta)) {
+      inlineAdditional.push(anyMeta);
+    }
+  }
+
+  return (
+    <div>
+      {type ? (
+        <TypeBlock meta={type as any} headingLevel={2} allowedProps={allowedProps} />
+      ) : null}
+
+      {linkedAdditional.length > 0 ? (
+        <p>
+          <strong>Related:</strong>{' '}
+          {linkedAdditional.map((item, i) => (
+            <React.Fragment key={item.name}>
+              {i > 0 ? ', ' : null}
+              <a href={item.href}>
+                <code>{item.name}</code>
+              </a>
+            </React.Fragment>
+          ))}
+        </p>
+      ) : null}
+
+      {inlineAdditional.length > 0 ? (
+        <React.Fragment>
+          <h2>Additional types</h2>
+          {inlineAdditional.map((meta, i) => (
+            <TypeBlock key={meta.name ?? i} meta={meta} headingLevel={3} />
+          ))}
+        </React.Fragment>
+      ) : null}
+    </div>
+  );
+}
+
+function hasContent(meta: any): boolean {
+  const kind = meta?.type;
+  const data = meta?.data ?? {};
+  if (kind === 'component') {
+    return Object.keys(data.props ?? {}).length > 0;
+  }
+  if (kind === 'hook' || kind === 'function') {
+    return (
+      Object.keys(data.expandedProperties ?? {}).length > 0 ||
+      (Array.isArray(data.parameters) && data.parameters.length > 0) ||
+      !!data.returnValue
+    );
+  }
+  if (kind === 'class') {
+    return Object.keys(data.properties ?? {}).length > 0;
+  }
+  if (kind === 'raw') {
+    return (
+      Object.keys(data.properties ?? {}).length > 0 ||
+      (Array.isArray(data.enumMembers) && data.enumMembers.length > 0)
+    );
+  }
+  return false;
+}
+
+function TypeBlock({
+  meta,
+  headingLevel,
+  allowedProps,
+}: {
+  meta: any;
+  headingLevel: 2 | 3;
+  allowedProps?: ReadonlySet<string> | null;
+}) {
+  const Heading = (headingLevel === 2 ? 'h2' : 'h3') as 'h2' | 'h3';
+  const kind: string | undefined = meta?.type;
+  const data = meta?.data ?? {};
+  const name: string = meta?.name ?? data?.name ?? '';
+
+  return (
+    <section className="MuiApiPage-typeBlock">
+      <Heading>{name}</Heading>
+      {data.description ? (
+        <div className="MuiApiPage-description">{data.description}</div>
+      ) : null}
+
+      {kind === 'component' ? (
+        <PropsTable properties={data.props ?? {}} allowedProps={allowedProps} />
+      ) : null}
+
+      {kind === 'hook' || kind === 'function' ? (
+        <React.Fragment>
+          {data.expandedProperties ? (
+            <PropsTable properties={data.expandedProperties} />
+          ) : null}
+          {Array.isArray(data.parameters) && data.parameters.length > 0 ? (
+            <ParametersTable parameters={data.parameters} />
+          ) : null}
+          {data.returnValue ? <ReturnValueBlock value={data.returnValue} /> : null}
+        </React.Fragment>
+      ) : null}
+
+      {kind === 'class' ? <PropsTable properties={data.properties ?? {}} /> : null}
+
+      {kind === 'raw' ? (
+        <React.Fragment>
+          {data.properties ? <PropsTable properties={data.properties} /> : null}
+          {Array.isArray(data.enumMembers) && data.enumMembers.length > 0 ? (
+            <EnumTable members={data.enumMembers} />
+          ) : null}
+        </React.Fragment>
+      ) : null}
+    </section>
+  );
+}
+
+function PropsTable({
+  properties,
+  allowedProps,
+}: {
+  properties: Record<string, any>;
+  allowedProps?: ReadonlySet<string> | null;
+}) {
+  let names = Object.keys(properties ?? {}).sort();
+  if (allowedProps) {
+    names = names.filter((n) => allowedProps.has(n));
+  }
+  if (names.length === 0) {
+    return null;
+  }
+  return (
+    <table className="MuiApiPage-propsTable">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {names.map((propName) => {
+          const p = properties[propName] ?? {};
+          return (
+            <tr key={propName}>
+              <td>
+                <code>
+                  {propName}
+                  {p.optional === false ? '*' : ''}
+                </code>
+              </td>
+              <td>{p.shortType ?? p.type ?? null}</td>
+              <td>{p.default ?? '-'}</td>
+              <td>{p.description ?? null}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function ParametersTable({ parameters }: { parameters: any[] }) {
+  return (
+    <table className="MuiApiPage-propsTable">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {parameters.map((p, i) => (
+          <tr key={p.name ?? i}>
+            <td>
+              <code>
+                {p.name}
+                {p.optional === false ? '*' : ''}
+              </code>
+            </td>
+            <td>{p.shortType ?? p.type ?? null}</td>
+            <td>{p.default ?? '-'}</td>
+            <td>{p.description ?? null}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function ReturnValueBlock({ value }: { value: any }) {
+  if (!value) {
+    return null;
+  }
+  if (value.kind === 'simple') {
+    return (
+      <div>
+        <strong>Returns:</strong> {value.type}
+        {value.description ? <React.Fragment> — {value.description}</React.Fragment> : null}
+      </div>
+    );
+  }
+  if (value.kind === 'object') {
+    return <PropsTable properties={value.properties ?? {}} />;
+  }
+  return null;
+}
+
+function EnumTable({ members }: { members: any[] }) {
+  return (
+    <table className="MuiApiPage-propsTable">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {members.map((m, i) => (
+          <tr key={m.name ?? i}>
+            <td>
+              <code>{m.name}</code>
+            </td>
+            <td>{m.type ?? null}</td>
+            <td>{m.description ?? null}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/docs/src/modules/api-docs/TypesPageShell.tsx b/docs/src/modules/api-docs/TypesPageShell.tsx
new file mode 100644
index 0000000000000..1dab83868f0fd
--- /dev/null
+++ b/docs/src/modules/api-docs/TypesPageShell.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { MarkdownElement } from '@mui/internal-core-docs/MarkdownElement';
+import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
+
+const AllowedPropsContext = React.createContext<ReadonlySet<string> | null>(null);
+
+export function useAllowedProps(): ReadonlySet<string> | null {
+  return React.useContext(AllowedPropsContext);
+}
+
+interface TypesPageShellProps {
+  name: string;
+  allowedProps?: readonly string[];
+  children: React.ReactNode;
+}
+
+export function TypesPageShell(props: TypesPageShellProps) {
+  const { name, allowedProps, children } = props;
+  const allowed = React.useMemo(
+    () => (allowedProps ? new Set(allowedProps) : null),
+    [allowedProps],
+  );
+  return (
+    <AppLayoutDocs
+      description={`API reference for the ${name} component.`}
+      disableAd
+      disableToc
+      toc={[]}
+      location=""
+      title={`${name} API`}
+    >
+      <MarkdownElement>
+        <h1>{name}</h1>
+        <AllowedPropsContext.Provider value={allowed}>{children}</AllowedPropsContext.Provider>
+      </MarkdownElement>
+    </AppLayoutDocs>
+  );
+}
diff --git a/docs/src/modules/api-docs/createTypes.tsx b/docs/src/modules/api-docs/createTypes.tsx
new file mode 100644
index 0000000000000..24bf8dd798953
--- /dev/null
+++ b/docs/src/modules/api-docs/createTypes.tsx
@@ -0,0 +1,33 @@
+/**
+ * Factory wrappers around `@mui/internal-docs-infra/abstractCreateTypes` — bind mui-x's
+ * own reference-table UI to the shared docs-infra pipeline.
+ *
+ * Consumers (per-component `types.ts` files colocated with doc pages) call
+ * `createMultipleTypes(import.meta.url, { Component })`. At build time the webpack loader
+ * `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes` rewrites that call with a
+ * precomputed `meta` argument describing the component's resolved types.
+ */
+import * as React from 'react';
+import {
+  createTypesFactory,
+  createMultipleTypesFactory,
+} from '@mui/internal-docs-infra/abstractCreateTypes';
+import { ReferenceTable } from './ReferenceTable';
+
+function TypePre(props: { children: React.ReactNode }) {
+  return <pre className="MuiApiPage-typePre">{props.children}</pre>;
+}
+
+function InlineCode(props: { children?: React.ReactNode; className?: string }) {
+  return <code className={props.className}>{props.children}</code>;
+}
+
+const factoryOptions = {
+  TypesTable: ReferenceTable,
+  TypePre,
+  ShortTypeCode: InlineCode,
+  DefaultCode: InlineCode,
+};
+
+export const createTypes = createTypesFactory(factoryOptions);
+export const createMultipleTypes = createMultipleTypesFactory(factoryOptions);
diff --git a/docs/src/modules/api-docs/typesRegistry.json b/docs/src/modules/api-docs/typesRegistry.json
new file mode 100644
index 0000000000000..581c22d0ae5cc
--- /dev/null
+++ b/docs/src/modules/api-docs/typesRegistry.json
@@ -0,0 +1,294 @@
+{
+  "AiAssistantPanelTrigger": "/x/api/data-grid/ai-assistant-panel-trigger/",
+  "AnimatedArea": "/x/api/charts/animated-area/",
+  "AnimatedLine": "/x/api/charts/animated-line/",
+  "AreaElement": "/x/api/charts/area-element/",
+  "AreaPlot": "/x/api/charts/area-plot/",
+  "AxisConfig": "/x/api/charts/axis-config/",
+  "BarChart": "/x/api/charts/bar-chart/",
+  "BarChartPremium": "/x/api/charts/bar-chart-premium/",
+  "BarChartPro": "/x/api/charts/bar-chart-pro/",
+  "BarElement": "/x/api/charts/bar-element/",
+  "BarLabel": "/x/api/charts/bar-label/",
+  "BarPlot": "/x/api/charts/bar-plot/",
+  "BarSeries": "/x/api/charts/bar-series/",
+  "CandlestickChart": "/x/api/charts/candlestick-chart/",
+  "CandlestickPlot": "/x/api/charts/candlestick-plot/",
+  "ChartImageExportOptions": "/x/api/charts/chart-image-export-options/",
+  "ChartPrintExportOptions": "/x/api/charts/chart-print-export-options/",
+  "ChartsAxis": "/x/api/charts/charts-axis/",
+  "ChartsAxisHighlight": "/x/api/charts/charts-axis-highlight/",
+  "ChartsAxisTooltipContent": "/x/api/charts/charts-axis-tooltip-content/",
+  "ChartsBrushOverlay": "/x/api/charts/charts-brush-overlay/",
+  "ChartsClipPath": "/x/api/charts/charts-clip-path/",
+  "ChartsContainer": "/x/api/charts/charts-container/",
+  "ChartsContainerPremium": "/x/api/charts/charts-container-premium/",
+  "ChartsContainerPro": "/x/api/charts/charts-container-pro/",
+  "ChartsDataProvider": "/x/api/charts/charts-data-provider/",
+  "ChartsDataProviderPremium": "/x/api/charts/charts-data-provider-premium/",
+  "ChartsDataProviderPro": "/x/api/charts/charts-data-provider-pro/",
+  "ChartsGrid": "/x/api/charts/charts-grid/",
+  "ChartsItemTooltipContent": "/x/api/charts/charts-item-tooltip-content/",
+  "ChartsLegend": "/x/api/charts/charts-legend/",
+  "ChartsLocalizationProvider": "/x/api/charts/charts-localization-provider/",
+  "ChartsPanelTrigger": "/x/api/data-grid/charts-panel-trigger/",
+  "ChartsReferenceLine": "/x/api/charts/charts-reference-line/",
+  "ChartsSurface": "/x/api/charts/charts-surface/",
+  "ChartsText": "/x/api/charts/charts-text/",
+  "ChartsToolbarImageExportTrigger": "/x/api/charts/charts-toolbar-image-export-trigger/",
+  "ChartsToolbarPrintExportTrigger": "/x/api/charts/charts-toolbar-print-export-trigger/",
+  "ChartsToolbarPro": "/x/api/charts/charts-toolbar-pro/",
+  "ChartsToolbarZoomInTrigger": "/x/api/charts/charts-toolbar-zoom-in-trigger/",
+  "ChartsToolbarZoomOutTrigger": "/x/api/charts/charts-toolbar-zoom-out-trigger/",
+  "ChartsTooltip": "/x/api/charts/charts-tooltip/",
+  "ChartsTooltipContainer": "/x/api/charts/charts-tooltip-container/",
+  "ChartsWrapper": "/x/api/charts/charts-wrapper/",
+  "ChartsXAxis": "/x/api/charts/charts-x-axis/",
+  "ChartsYAxis": "/x/api/charts/charts-y-axis/",
+  "ChartsZoomSlider": "/x/api/charts/charts-zoom-slider/",
+  "ChatBox": "/x/api/chat/chat-box/",
+  "ChatCodeBlock": "/x/api/chat/chat-code-block/",
+  "ChatComposerAttachButton": "/x/api/chat/chat-composer-attach-button/",
+  "ChatComposerAttachmentList": "/x/api/chat/chat-composer-attachment-list/",
+  "ChatComposerHelperText": "/x/api/chat/chat-composer-helper-text/",
+  "ChatComposerLabel": "/x/api/chat/chat-composer-label/",
+  "ChatComposerSendButton": "/x/api/chat/chat-composer-send-button/",
+  "ChatComposerTextArea": "/x/api/chat/chat-composer-text-area/",
+  "ChatComposerToolbar": "/x/api/chat/chat-composer-toolbar/",
+  "ChatConfirmation": "/x/api/chat/chat-confirmation/",
+  "ChatConversation": "/x/api/chat/chat-conversation/",
+  "ChatConversationHeader": "/x/api/chat/chat-conversation-header/",
+  "ChatConversationHeaderActions": "/x/api/chat/chat-conversation-header-actions/",
+  "ChatConversationHeaderInfo": "/x/api/chat/chat-conversation-header-info/",
+  "ChatConversationList": "/x/api/chat/chat-conversation-list/",
+  "ChatConversationSubtitle": "/x/api/chat/chat-conversation-subtitle/",
+  "ChatConversationTitle": "/x/api/chat/chat-conversation-title/",
+  "ChatDateDivider": "/x/api/chat/chat-date-divider/",
+  "ChatLayout": "/x/api/chat/chat-layout/",
+  "ChatMessageActions": "/x/api/chat/chat-message-actions/",
+  "ChatMessageAuthorLabel": "/x/api/chat/chat-message-author-label/",
+  "ChatMessageAvatar": "/x/api/chat/chat-message-avatar/",
+  "ChatMessageContent": "/x/api/chat/chat-message-content/",
+  "ChatMessageGroup": "/x/api/chat/chat-message-group/",
+  "ChatMessageInlineMeta": "/x/api/chat/chat-message-inline-meta/",
+  "ChatMessageList": "/x/api/chat/chat-message-list/",
+  "ChatMessageMeta": "/x/api/chat/chat-message-meta/",
+  "ChatMessageSkeleton": "/x/api/chat/chat-message-skeleton/",
+  "ChatMessageSource": "/x/api/chat/chat-message-source/",
+  "ChatMessageSources": "/x/api/chat/chat-message-sources/",
+  "ChatProvider": "/x/api/chat/chat-provider/",
+  "ChatRoot": "/x/api/chat/chat-root/",
+  "ChatScrollToBottomAffordance": "/x/api/chat/chat-scroll-to-bottom-affordance/",
+  "ChatSuggestions": "/x/api/chat/chat-suggestions/",
+  "ChatTypingIndicator": "/x/api/chat/chat-typing-indicator/",
+  "ChatUnreadMarker": "/x/api/chat/chat-unread-marker/",
+  "ColumnsPanelTrigger": "/x/api/data-grid/columns-panel-trigger/",
+  "ComposerAttachButton": "/x/api/chat/composer-attach-button/",
+  "ComposerAttachmentList": "/x/api/chat/composer-attachment-list/",
+  "ComposerHelperText": "/x/api/chat/composer-helper-text/",
+  "ComposerLabel": "/x/api/chat/composer-label/",
+  "ComposerRoot": "/x/api/chat/composer-root/",
+  "ComposerSendButton": "/x/api/chat/composer-send-button/",
+  "ComposerTextArea": "/x/api/chat/composer-text-area/",
+  "ComposerToolbar": "/x/api/chat/composer-toolbar/",
+  "ContinuousColorLegend": "/x/api/charts/continuous-color-legend/",
+  "ConversationHeader": "/x/api/chat/conversation-header/",
+  "ConversationHeaderActions": "/x/api/chat/conversation-header-actions/",
+  "ConversationListItem": "/x/api/chat/conversation-list-item/",
+  "ConversationListItemAvatar": "/x/api/chat/conversation-list-item-avatar/",
+  "ConversationListPreview": "/x/api/chat/conversation-list-preview/",
+  "ConversationListRoot": "/x/api/chat/conversation-list-root/",
+  "ConversationListTimestamp": "/x/api/chat/conversation-list-timestamp/",
+  "ConversationListTitle": "/x/api/chat/conversation-list-title/",
+  "ConversationListUnreadBadge": "/x/api/chat/conversation-list-unread-badge/",
+  "ConversationRoot": "/x/api/chat/conversation-root/",
+  "ConversationSubtitle": "/x/api/chat/conversation-subtitle/",
+  "ConversationTitle": "/x/api/chat/conversation-title/",
+  "DataGrid": "/x/api/data-grid/data-grid/",
+  "DataGridPremium": "/x/api/data-grid/data-grid-premium/",
+  "DataGridPro": "/x/api/data-grid/data-grid-pro/",
+  "DateCalendar": "/x/api/date-pickers/date-calendar/",
+  "DateField": "/x/api/date-pickers/date-field/",
+  "DatePicker": "/x/api/date-pickers/date-picker/",
+  "DatePickerToolbar": "/x/api/date-pickers/date-picker-toolbar/",
+  "DateRangeCalendar": "/x/api/date-pickers/date-range-calendar/",
+  "DateRangePicker": "/x/api/date-pickers/date-range-picker/",
+  "DateRangePickerDay": "/x/api/date-pickers/date-range-picker-day/",
+  "DateRangePickerToolbar": "/x/api/date-pickers/date-range-picker-toolbar/",
+  "DateTimeField": "/x/api/date-pickers/date-time-field/",
+  "DateTimePicker": "/x/api/date-pickers/date-time-picker/",
+  "DateTimePickerTabs": "/x/api/date-pickers/date-time-picker-tabs/",
+  "DateTimePickerToolbar": "/x/api/date-pickers/date-time-picker-toolbar/",
+  "DateTimeRangePicker": "/x/api/date-pickers/date-time-range-picker/",
+  "DateTimeRangePickerTabs": "/x/api/date-pickers/date-time-range-picker-tabs/",
+  "DateTimeRangePickerToolbar": "/x/api/date-pickers/date-time-range-picker-toolbar/",
+  "DayCalendarSkeleton": "/x/api/date-pickers/day-calendar-skeleton/",
+  "DesktopDatePicker": "/x/api/date-pickers/desktop-date-picker/",
+  "DesktopDateRangePicker": "/x/api/date-pickers/desktop-date-range-picker/",
+  "DesktopDateTimePicker": "/x/api/date-pickers/desktop-date-time-picker/",
+  "DesktopDateTimeRangePicker": "/x/api/date-pickers/desktop-date-time-range-picker/",
+  "DesktopTimePicker": "/x/api/date-pickers/desktop-time-picker/",
+  "DesktopTimeRangePicker": "/x/api/date-pickers/desktop-time-range-picker/",
+  "DigitalClock": "/x/api/date-pickers/digital-clock/",
+  "EventCalendar": "/x/api/scheduler/event-calendar/",
+  "EventCalendarPremium": "/x/api/scheduler/event-calendar-premium/",
+  "EventTimelinePremium": "/x/api/scheduler/event-timeline-premium/",
+  "ExportCsv": "/x/api/data-grid/export-csv/",
+  "ExportExcel": "/x/api/data-grid/export-excel/",
+  "ExportPrint": "/x/api/data-grid/export-print/",
+  "FilterPanelTrigger": "/x/api/data-grid/filter-panel-trigger/",
+  "FocusedFunnelSection": "/x/api/charts/focused-funnel-section/",
+  "FocusedHeatmapCell": "/x/api/charts/focused-heatmap-cell/",
+  "FocusedRadarMark": "/x/api/charts/focused-radar-mark/",
+  "FocusedRangeBar": "/x/api/charts/focused-range-bar/",
+  "FocusedSankeyLink": "/x/api/charts/focused-sankey-link/",
+  "FocusedSankeyNode": "/x/api/charts/focused-sankey-node/",
+  "FunnelChart": "/x/api/charts/funnel-chart/",
+  "FunnelPlot": "/x/api/charts/funnel-plot/",
+  "FunnelSeries": "/x/api/charts/funnel-series/",
+  "Gauge": "/x/api/charts/gauge/",
+  "GaugeContainer": "/x/api/charts/gauge-container/",
+  "GridActionsColDef": "/x/api/data-grid/grid-actions-col-def/",
+  "GridAggregationFunction": "/x/api/data-grid/grid-aggregation-function/",
+  "GridAggregationFunctionDataSource": "/x/api/data-grid/grid-aggregation-function-data-source/",
+  "GridApi": "/x/api/data-grid/grid-api/",
+  "GridCellParams": "/x/api/data-grid/grid-cell-params/",
+  "GridChartsPanel": "/x/api/data-grid/grid-charts-panel/",
+  "GridChartsRendererProxy": "/x/api/data-grid/grid-charts-renderer-proxy/",
+  "GridColDef": "/x/api/data-grid/grid-col-def/",
+  "GridCsvExportOptions": "/x/api/data-grid/grid-csv-export-options/",
+  "GridExcelExportOptions": "/x/api/data-grid/grid-excel-export-options/",
+  "GridExportStateParams": "/x/api/data-grid/grid-export-state-params/",
+  "GridFilterForm": "/x/api/data-grid/grid-filter-form/",
+  "GridFilterItem": "/x/api/data-grid/grid-filter-item/",
+  "GridFilterModel": "/x/api/data-grid/grid-filter-model/",
+  "GridFilterOperator": "/x/api/data-grid/grid-filter-operator/",
+  "GridFilterPanel": "/x/api/data-grid/grid-filter-panel/",
+  "GridListViewColDef": "/x/api/data-grid/grid-list-view-col-def/",
+  "GridPrintExportOptions": "/x/api/data-grid/grid-print-export-options/",
+  "GridRenderContext": "/x/api/data-grid/grid-render-context/",
+  "GridRowClassNameParams": "/x/api/data-grid/grid-row-class-name-params/",
+  "GridRowOrderChangeParams": "/x/api/data-grid/grid-row-order-change-params/",
+  "GridRowParams": "/x/api/data-grid/grid-row-params/",
+  "GridRowSpacingParams": "/x/api/data-grid/grid-row-spacing-params/",
+  "GridSingleSelectColDef": "/x/api/data-grid/grid-single-select-col-def/",
+  "GridToolbarQuickFilter": "/x/api/data-grid/grid-toolbar-quick-filter/",
+  "Heatmap": "/x/api/charts/heatmap/",
+  "HeatmapCell": "/x/api/charts/heatmap-cell/",
+  "HeatmapPlot": "/x/api/charts/heatmap-plot/",
+  "HeatmapPremium": "/x/api/charts/heatmap-premium/",
+  "HeatmapSeries": "/x/api/charts/heatmap-series/",
+  "HeatmapTooltip": "/x/api/charts/heatmap-tooltip/",
+  "HeatmapTooltipContent": "/x/api/charts/heatmap-tooltip-content/",
+  "LegendItemParams": "/x/api/charts/legend-item-params/",
+  "LineChart": "/x/api/charts/line-chart/",
+  "LineChartPro": "/x/api/charts/line-chart-pro/",
+  "LineElement": "/x/api/charts/line-element/",
+  "LineHighlightElement": "/x/api/charts/line-highlight-element/",
+  "LineHighlightPlot": "/x/api/charts/line-highlight-plot/",
+  "LinePlot": "/x/api/charts/line-plot/",
+  "LineSeries": "/x/api/charts/line-series/",
+  "LocalizationProvider": "/x/api/date-pickers/localization-provider/",
+  "MarkElement": "/x/api/charts/mark-element/",
+  "MarkPlot": "/x/api/charts/mark-plot/",
+  "MessageActions": "/x/api/chat/message-actions/",
+  "MessageAuthorLabel": "/x/api/chat/message-author-label/",
+  "MessageAvatar": "/x/api/chat/message-avatar/",
+  "MessageContent": "/x/api/chat/message-content/",
+  "MessageGroup": "/x/api/chat/message-group/",
+  "MessageListDateDivider": "/x/api/chat/message-list-date-divider/",
+  "MessageListRoot": "/x/api/chat/message-list-root/",
+  "MessageMeta": "/x/api/chat/message-meta/",
+  "MessageRoot": "/x/api/chat/message-root/",
+  "MobileDatePicker": "/x/api/date-pickers/mobile-date-picker/",
+  "MobileDateRangePicker": "/x/api/date-pickers/mobile-date-range-picker/",
+  "MobileDateTimePicker": "/x/api/date-pickers/mobile-date-time-picker/",
+  "MobileDateTimeRangePicker": "/x/api/date-pickers/mobile-date-time-range-picker/",
+  "MobileTimePicker": "/x/api/date-pickers/mobile-time-picker/",
+  "MobileTimeRangePicker": "/x/api/date-pickers/mobile-time-range-picker/",
+  "MonthCalendar": "/x/api/date-pickers/month-calendar/",
+  "MultiInputDateRangeField": "/x/api/date-pickers/multi-input-date-range-field/",
+  "MultiInputDateTimeRangeField": "/x/api/date-pickers/multi-input-date-time-range-field/",
+  "MultiInputTimeRangeField": "/x/api/date-pickers/multi-input-time-range-field/",
+  "MultiSectionDigitalClock": "/x/api/date-pickers/multi-section-digital-clock/",
+  "PickerDay": "/x/api/date-pickers/picker-day/",
+  "PickersActionBar": "/x/api/date-pickers/pickers-action-bar/",
+  "PickersCalendarHeader": "/x/api/date-pickers/pickers-calendar-header/",
+  "PickersLayout": "/x/api/date-pickers/pickers-layout/",
+  "PickersRangeCalendarHeader": "/x/api/date-pickers/pickers-range-calendar-header/",
+  "PickersSectionList": "/x/api/date-pickers/pickers-section-list/",
+  "PickersShortcuts": "/x/api/date-pickers/pickers-shortcuts/",
+  "PickersTextField": "/x/api/date-pickers/pickers-text-field/",
+  "PieArc": "/x/api/charts/pie-arc/",
+  "PieArcLabel": "/x/api/charts/pie-arc-label/",
+  "PieArcLabelPlot": "/x/api/charts/pie-arc-label-plot/",
+  "PieArcPlot": "/x/api/charts/pie-arc-plot/",
+  "PieChart": "/x/api/charts/pie-chart/",
+  "PieChartPro": "/x/api/charts/pie-chart-pro/",
+  "PiePlot": "/x/api/charts/pie-plot/",
+  "PieSeries": "/x/api/charts/pie-series/",
+  "PiecewiseColorLegend": "/x/api/charts/piecewise-color-legend/",
+  "PivotPanelTrigger": "/x/api/data-grid/pivot-panel-trigger/",
+  "PromptField": "/x/api/data-grid/prompt-field/",
+  "PromptFieldControl": "/x/api/data-grid/prompt-field-control/",
+  "PromptFieldRecord": "/x/api/data-grid/prompt-field-record/",
+  "PromptFieldSend": "/x/api/data-grid/prompt-field-send/",
+  "QuickFilter": "/x/api/data-grid/quick-filter/",
+  "QuickFilterClear": "/x/api/data-grid/quick-filter-clear/",
+  "QuickFilterControl": "/x/api/data-grid/quick-filter-control/",
+  "QuickFilterTrigger": "/x/api/data-grid/quick-filter-trigger/",
+  "RadarAxis": "/x/api/charts/radar-axis/",
+  "RadarAxisHighlight": "/x/api/charts/radar-axis-highlight/",
+  "RadarChart": "/x/api/charts/radar-chart/",
+  "RadarChartPro": "/x/api/charts/radar-chart-pro/",
+  "RadarGrid": "/x/api/charts/radar-grid/",
+  "RadarMetricLabels": "/x/api/charts/radar-metric-labels/",
+  "RadarSeries": "/x/api/charts/radar-series/",
+  "RadarSeriesArea": "/x/api/charts/radar-series-area/",
+  "RadarSeriesMarks": "/x/api/charts/radar-series-marks/",
+  "RadarSeriesPlot": "/x/api/charts/radar-series-plot/",
+  "RangeBarPlot": "/x/api/charts/range-bar-plot/",
+  "RichTreeView": "/x/api/tree-view/rich-tree-view/",
+  "RichTreeViewPro": "/x/api/tree-view/rich-tree-view-pro/",
+  "SankeyChart": "/x/api/charts/sankey-chart/",
+  "SankeyDataProvider": "/x/api/charts/sankey-data-provider/",
+  "SankeyPlot": "/x/api/charts/sankey-plot/",
+  "SankeyTooltip": "/x/api/charts/sankey-tooltip/",
+  "SankeyTooltipContent": "/x/api/charts/sankey-tooltip-content/",
+  "Scatter": "/x/api/charts/scatter/",
+  "ScatterChart": "/x/api/charts/scatter-chart/",
+  "ScatterChartPro": "/x/api/charts/scatter-chart-pro/",
+  "ScatterPlot": "/x/api/charts/scatter-plot/",
+  "ScatterSeries": "/x/api/charts/scatter-series/",
+  "ScrollToBottomAffordance": "/x/api/chat/scroll-to-bottom-affordance/",
+  "SimpleTreeView": "/x/api/tree-view/simple-tree-view/",
+  "SingleInputDateRangeField": "/x/api/date-pickers/single-input-date-range-field/",
+  "SingleInputDateTimeRangeField": "/x/api/date-pickers/single-input-date-time-range-field/",
+  "SingleInputTimeRangeField": "/x/api/date-pickers/single-input-time-range-field/",
+  "SparkLineChart": "/x/api/charts/spark-line-chart/",
+  "StandaloneAgendaView": "/x/api/scheduler/standalone-agenda-view/",
+  "StandaloneDayView": "/x/api/scheduler/standalone-day-view/",
+  "StandaloneEvent": "/x/api/scheduler/standalone-event/",
+  "StandaloneMonthView": "/x/api/scheduler/standalone-month-view/",
+  "StandaloneWeekView": "/x/api/scheduler/standalone-week-view/",
+  "StaticDatePicker": "/x/api/date-pickers/static-date-picker/",
+  "StaticDateRangePicker": "/x/api/date-pickers/static-date-range-picker/",
+  "StaticDateTimePicker": "/x/api/date-pickers/static-date-time-picker/",
+  "StaticTimePicker": "/x/api/date-pickers/static-time-picker/",
+  "TimeClock": "/x/api/date-pickers/time-clock/",
+  "TimeField": "/x/api/date-pickers/time-field/",
+  "TimePicker": "/x/api/date-pickers/time-picker/",
+  "TimePickerToolbar": "/x/api/date-pickers/time-picker-toolbar/",
+  "TimeRangePicker": "/x/api/date-pickers/time-range-picker/",
+  "TimeRangePickerTabs": "/x/api/date-pickers/time-range-picker-tabs/",
+  "TimeRangePickerToolbar": "/x/api/date-pickers/time-range-picker-toolbar/",
+  "Toolbar": "/x/api/data-grid/toolbar/",
+  "ToolbarButton": "/x/api/data-grid/toolbar-button/",
+  "TreeItem": "/x/api/tree-view/tree-item/",
+  "TreeItemDragAndDropOverlay": "/x/api/tree-view/tree-item-drag-and-drop-overlay/",
+  "TreeItemIcon": "/x/api/tree-view/tree-item-icon/",
+  "TreeItemProvider": "/x/api/tree-view/tree-item-provider/",
+  "TypingIndicator": "/x/api/chat/typing-indicator/",
+  "UnreadMarker": "/x/api/chat/unread-marker/",
+  "YearCalendar": "/x/api/date-pickers/year-calendar/"
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6379c017d673..347fa4d2d269f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -501,7 +501,7 @@ importers:
         version: 9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-docs-infra':
         specifier: ^0.7.1-canary.3
-        version: 0.7.1-canary.3(@types/react@19.2.14)(next@16.2.2(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
+        version: 0.7.1-canary.5(@types/react@19.2.14)(next@16.2.2(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)
       '@mui/lab':
         specifier: ^9.0.0-beta.2
         version: 9.0.0-beta.2(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -807,7 +807,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1084,7 +1084,7 @@ importers:
         version: 9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1122,7 +1122,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       react:
         specifier: 'catalog:'
         version: 19.2.4
@@ -1204,7 +1204,7 @@ importers:
         version: 9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1322,7 +1322,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1384,7 +1384,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1443,7 +1443,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1538,7 +1538,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1601,7 +1601,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@types/use-sync-external-store':
         specifier: 'catalog:'
         version: 1.5.0
@@ -1633,7 +1633,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       react:
         specifier: 'catalog:'
         version: 19.2.4
@@ -1683,7 +1683,7 @@ importers:
         version: 9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@types/react@19.2.14)(react@19.2.4)
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1751,7 +1751,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@types/prop-types':
         specifier: 'catalog:'
         version: 15.7.15
@@ -1795,7 +1795,7 @@ importers:
         version: 1.4.1
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@types/prop-types':
         specifier: 'catalog:'
         version: 15.7.15
@@ -1860,7 +1860,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1907,7 +1907,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       rimraf:
         specifier: 'catalog:'
         version: 6.1.3
@@ -1948,7 +1948,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2019,7 +2019,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/material':
         specifier: 'catalog:'
         version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react@19.2.4))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2057,7 +2057,7 @@ importers:
     devDependencies:
       '@mui/internal-test-utils':
         specifier: 'catalog:'
-        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@mui/types':
         specifier: 'catalog:'
         version: 9.0.0(@types/react@19.2.14)
@@ -2277,7 +2277,7 @@ importers:
         version: 7.7.1
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 5.1.4(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
+        version: 5.1.4(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
       react:
         specifier: 'catalog:'
         version: 19.2.4
@@ -2298,7 +2298,7 @@ importers:
     devDependencies:
       '@codspeed/vitest-plugin':
         specifier: 5.2.0
-        version: 5.2.0(tinybench@2.9.0)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 5.2.0(tinybench@2.9.0)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@emotion/react':
         specifier: 'catalog:'
         version: 11.14.0(@types/react@19.2.14)(react@19.2.4)
@@ -2319,13 +2319,13 @@ importers:
         version: 14.6.1(@testing-library/dom@10.4.1)
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 5.1.4(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
+        version: 5.1.4(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
       '@vitejs/plugin-react-swc':
         specifier: 'catalog:'
-        version: 4.2.3(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
+        version: 4.2.3(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
       '@vitest/browser-playwright':
         specifier: 'catalog:'
-        version: 4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+        version: 4.0.18(playwright@1.58.2)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@vitest/ui':
         specifier: 'catalog:'
         version: 4.0.18(vitest@4.0.18)
@@ -4437,8 +4437,8 @@ packages:
       typescript:
         optional: true
 
-  '@mui/internal-docs-infra@0.7.1-canary.3':
-    resolution: {integrity: sha512-rNF3/q39tWAmYXfhW3AhcjtTfyv1B9qLeFSrZRwp1s9zoUNqpko4VhuYjL3DoRlDDVYNDb4P4p9ary27Jqu4sw==}
+  '@mui/internal-docs-infra@0.7.1-canary.5':
+    resolution: {integrity: sha512-epJ9nEg35TTlMFf0YoGjYqHMONHiH0KXH1WXAo+pdAlEtm7k/w1pf7YEY5DuPhrkwRyWvUXgKQ1Md5mBtu98dg==}
     engines: {node: '>=22.18.0'}
     hasBin: true
     peerDependencies:
@@ -4446,7 +4446,7 @@ packages:
       next: ^15.0.0 || ^16.0.0
       prettier: ^3.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      typescript: ^5.9.3
+      typescript: ^6.0.2
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -8727,8 +8727,8 @@ packages:
     resolution: {integrity: sha512-pXVMn67Jdw2hPKLCuJZj62NC9B2OIDd1R3JwZXTHXuEnfN3Uq5kJbKOSld6YEU+KOGfMD82EzxFTYz5o0SSJoA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  inline-style-parser@0.2.6:
-    resolution: {integrity: sha512-gtGXVaBdl5mAes3rPcMedEBm12ibjt1kDMFfheul1wUAOVEJW60voNdMVzVkfLN06O7ZaD/rxhfKgtlgtTbMjg==}
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
   inlineresources@1.2.0:
     resolution: {integrity: sha512-4nqegG4MexBhm9w1a14rueyd3SKfXroAJfFYaxIEkz+GKRchWzPzKnh8c3mCCIz7t7rtkmtGkLD8MqCpmcNqZg==}
@@ -11404,11 +11404,11 @@ packages:
   strnum@2.2.0:
     resolution: {integrity: sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==}
 
-  style-to-js@1.1.19:
-    resolution: {integrity: sha512-Ev+SgeqiNGT1ufsXyVC5RrJRXdrkRJ1Gol9Qw7Pb72YCKJXrBvP0ckZhBeVSrw2m06DJpei2528uIpjMb4TsoQ==}
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
 
-  style-to-object@1.0.12:
-    resolution: {integrity: sha512-ddJqYnoT4t97QvN2C95bCgt+m7AAgXjVnkk/jxAfmp7EAB8nnqqZYEbMd3em7/vEomDb2LAQKAy1RFfv41mdNw==}
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
   styled-components@6.3.12:
     resolution: {integrity: sha512-hFR6xsVkVYbsdcUlzPYFvFfoc6o2KlV0VvgRIQwSYMtdThM7SCxnjX9efh/cWce2kTq16I/Kl3xM98xiLptsXA==}
@@ -11762,8 +11762,8 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
-  typescript-api-extractor@1.0.0-beta.2:
-    resolution: {integrity: sha512-vcpVgRHrNBbhoHj4qcjNf5hvA2BEskNyoZLvasUOv0bls/Py1akVTyeCwElSxj5XfcG+a0TTETVG/PyNc2Eh6A==}
+  typescript-api-extractor@1.0.0-beta.3:
+    resolution: {integrity: sha512-kniM+MhKK2egY8Vs6etsX8oWdBtjDOoSSPI0p7p5zlGtEuYfdozS5aCyJReLSTpLP+c2886oJ2c/6Nw7cTyJEQ==}
     engines: {node: '>=22'}
     peerDependencies:
       typescript: ^5.8
@@ -12079,8 +12079,8 @@ packages:
   vscode-oniguruma@2.0.1:
     resolution: {integrity: sha512-poJU8iHIWnC3vgphJnrLZyI3YdqRlR27xzqDmpPXYzA93R4Gk8z7T6oqDzDoHjoikA2aS82crdXFkjELCdJsjQ==}
 
-  vscode-textmate@9.2.1:
-    resolution: {integrity: sha512-eXiUi2yYFv9bdvgrYtJynA7UemCEkpVNE50S9iBBA08LYG5t9+/TB+8IRS/YoYOubCez2OkSyZ1Q12eQMwzbrw==}
+  vscode-textmate@9.3.2:
+    resolution: {integrity: sha512-n2uGbUcrjhUEBH16uGA0TvUfhWwliFZ1e3+pTjrkim1Mt7ydB41lV08aUvsi70OlzDWp6X7Bx3w/x3fAXIsN0Q==}
 
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
@@ -13944,11 +13944,11 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  '@codspeed/vitest-plugin@5.2.0(tinybench@2.9.0)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
+  '@codspeed/vitest-plugin@5.2.0(tinybench@2.9.0)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
     dependencies:
       '@codspeed/core': 5.2.0
       tinybench: 2.9.0
-      vite: 7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+      vite: 8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
       vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@24.5.2)(@vitest/browser-playwright@4.0.18)(@vitest/ui@4.0.18)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - debug
@@ -15032,7 +15032,7 @@ snapshots:
       - supports-color
       - vitest
 
-  '@mui/internal-docs-infra@0.7.1-canary.3(@types/react@19.2.14)(next@16.2.2(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
+  '@mui/internal-docs-infra@0.7.1-canary.5(@types/react@19.2.14)(next@16.2.2(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-macros@3.1.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@5.9.3)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@babel/standalone': 7.29.2
@@ -15060,7 +15060,7 @@ snapshots:
       remark-stringify: 11.0.0
       remark-typography: 0.7.3
       typescript: 5.9.3
-      typescript-api-extractor: 1.0.0-beta.2(typescript@5.9.3)
+      typescript-api-extractor: 1.0.0-beta.3(typescript@5.9.3)
       uint8-to-base64: 0.2.1
       unified: 11.0.5
       unist-util-visit: 5.1.0
@@ -15129,7 +15129,7 @@ snapshots:
       - vite
       - vitest
 
-  '@mui/internal-test-utils@2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
+  '@mui/internal-test-utils@2.0.18-canary.19(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.4))(@playwright/test@1.58.2)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vitest/utils@4.0.18)(chai@6.2.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@playwright/test': 1.58.2
@@ -15146,7 +15146,7 @@ snapshots:
       prop-types: 15.8.1
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
-      vitest-fail-on-console: 0.10.1(@vitest/utils@4.0.18)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+      vitest-fail-on-console: 0.10.1(@vitest/utils@4.0.18)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
     optionalDependencies:
       '@emotion/cache': 11.14.0
       '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.4)
@@ -17104,11 +17104,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vitejs/plugin-react-swc@4.2.3(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))':
+  '@vitejs/plugin-react-swc@4.2.3(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
       '@swc/core': 1.15.13
-      vite: 7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+      vite: 8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -17136,6 +17136,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitejs/plugin-react@5.1.4(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.0-rc.3
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/browser-playwright@4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@22.19.3)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
     dependencies:
       '@vitest/browser': 4.0.18(vite@7.3.1(@types/node@22.19.3)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
@@ -17149,10 +17161,10 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/browser-playwright@4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
+  '@vitest/browser-playwright@4.0.18(playwright@1.58.2)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
     dependencies:
-      '@vitest/browser': 4.0.18(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
-      '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
+      '@vitest/browser': 4.0.18(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+      '@vitest/mocker': 4.0.18(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
       playwright: 1.58.2
       tinyrainbow: 3.0.3
       vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@24.5.2)(@vitest/browser-playwright@4.0.18)(@vitest/ui@4.0.18)(jsdom@27.4.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
@@ -17179,9 +17191,9 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/browser@4.0.18(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
+  '@vitest/browser@4.0.18(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)':
     dependencies:
-      '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
+      '@vitest/mocker': 4.0.18(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))
       '@vitest/utils': 4.0.18
       magic-string: 0.30.21
       pixelmatch: 7.1.0
@@ -17249,6 +17261,14 @@ snapshots:
     optionalDependencies:
       vite: 7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
+  '@vitest/mocker@4.0.18(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 4.0.18
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+
   '@vitest/pretty-format@4.0.18':
     dependencies:
       tinyrainbow: 3.0.3
@@ -17363,7 +17383,7 @@ snapshots:
       '@types/hast': 3.0.4
       import-meta-resolve: 4.2.0
       vscode-oniguruma: 2.0.1
-      vscode-textmate: 9.2.1
+      vscode-textmate: 9.3.2
 
   '@xtuc/ieee754@1.2.0': {}
 
@@ -19742,7 +19762,7 @@ snapshots:
       mdast-util-mdxjs-esm: 2.0.1
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
-      style-to-js: 1.1.19
+      style-to-js: 1.1.21
       unist-util-position: 5.0.0
       vfile-message: 4.0.3
     transitivePeerDependencies:
@@ -19932,7 +19952,7 @@ snapshots:
       validate-npm-package-license: 3.0.4
       validate-npm-package-name: 6.0.2
 
-  inline-style-parser@0.2.6: {}
+  inline-style-parser@0.2.7: {}
 
   inlineresources@1.2.0:
     dependencies:
@@ -23239,13 +23259,13 @@ snapshots:
 
   strnum@2.2.0: {}
 
-  style-to-js@1.1.19:
+  style-to-js@1.1.21:
     dependencies:
-      style-to-object: 1.0.12
+      style-to-object: 1.0.14
 
-  style-to-object@1.0.12:
+  style-to-object@1.0.14:
     dependencies:
-      inline-style-parser: 0.2.6
+      inline-style-parser: 0.2.7
 
   styled-components@6.3.12(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
@@ -23632,7 +23652,7 @@ snapshots:
 
   typedarray@0.0.6: {}
 
-  typescript-api-extractor@1.0.0-beta.2(typescript@5.9.3):
+  typescript-api-extractor@1.0.0-beta.3(typescript@5.9.3):
     dependencies:
       es-toolkit: 1.45.1
       typescript: 5.9.3
@@ -23893,6 +23913,21 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.1
 
+  vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.3
+      postcss: 8.5.8
+      rolldown: 1.0.0-rc.11
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.5.2
+      esbuild: 0.27.3
+      fsevents: 2.3.3
+      terser: 5.43.1
+      tsx: 4.21.0
+      yaml: 2.8.1
+
   vitest-fail-on-console@0.10.1(@vitest/utils@4.0.18)(vite@7.3.1(@types/node@22.19.3)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18):
     dependencies:
       '@vitest/utils': 4.0.18
@@ -23900,11 +23935,11 @@ snapshots:
       vite: 7.3.1(@types/node@22.19.3)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
       vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@22.19.3)(@vitest/browser-playwright@4.0.18)(@vitest/ui@4.0.18)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
-  vitest-fail-on-console@0.10.1(@vitest/utils@4.0.18)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18):
+  vitest-fail-on-console@0.10.1(@vitest/utils@4.0.18)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18):
     dependencies:
       '@vitest/utils': 4.0.18
       chalk: 5.6.2
-      vite: 7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
+      vite: 8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
       vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@24.5.2)(@vitest/browser-playwright@4.0.18)(@vitest/ui@4.0.18)(jsdom@27.4.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1)
 
   vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@22.19.3)(@vitest/browser-playwright@4.0.18)(@vitest/ui@4.0.18)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1):
@@ -23973,7 +24008,7 @@ snapshots:
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
       '@types/node': 24.5.2
-      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@vitest/ui': 4.0.18(vitest@4.0.18)
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -24014,7 +24049,7 @@ snapshots:
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
       '@types/node': 24.5.2
-      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@7.3.1(@types/node@24.5.2)(lightningcss@1.32.0)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
+      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@8.0.2(@types/node@24.5.2)(esbuild@0.27.3)(terser@5.43.1)(tsx@4.21.0)(yaml@2.8.1))(vitest@4.0.18)
       '@vitest/ui': 4.0.18(vitest@4.0.18)
       jsdom: 27.4.0
     transitivePeerDependencies:
@@ -24032,7 +24067,7 @@ snapshots:
 
   vscode-oniguruma@2.0.1: {}
 
-  vscode-textmate@9.2.1: {}
+  vscode-textmate@9.3.2: {}
 
   w3c-xmlserializer@5.0.0:
     dependencies:
diff --git a/scripts/docs-infra-oom-repro.md b/scripts/docs-infra-oom-repro.md
new file mode 100644
index 0000000000000..ce583b34b2aa8
--- /dev/null
+++ b/scripts/docs-infra-oom-repro.md
@@ -0,0 +1,118 @@
+# `@mui/internal-docs-infra` OOM on large component types — diagnosis
+
+**Scope:** `@mui/internal-docs-infra@0.7.1-canary.1`, specifically
+`pipeline/loadServerTypes/typeHighlighting.mjs::formatInlineTypeAsHast`.
+
+## Symptom
+
+Running `pnpm dev` on mui-x docs with a `types.ts` page entry that calls
+`createTypes(import.meta.url, DataGrid)` produces a 500 after ~100s with:
+
+```
+⨯ ./pages/x/api/data-grid/types.data-grid.ts
+Error: fail to memory allocation
+...
+⨯ ./pages/x/api/data-grid/types.data-grid.ts
+RuntimeError: memory access out of bounds
+    at wasm://wasm/001ce0fe:wasm-function[218]:0x26b63
+    at wasm://wasm/001ce0fe:wasm-function[202]:0x23386
+```
+
+The WASM module with hash `001ce0fe` is **Oniguruma**, consumed by
+`@wooorm/starry-night` for TextMate-grammar syntax highlighting.
+
+## Root cause
+
+`formatInlineTypeAsHast(typeText, unionPrintWidth)` is called once per
+individual type string that needs syntax highlighting. It is **not memoized**.
+
+Instrumenting the call site to log every input for DataGrid revealed:
+
+- **1947 total calls** over the ~100s extraction window
+- **5 unique input strings** (sizes: 1848 and 5779 chars each, repeated)
+- Average ~389 calls per unique input
+
+Each call pipes the text through `transformHtmlCodeInline` →
+`parseSource` → Oniguruma's regex VM. Oniguruma runs inside a fixed-size
+WebAssembly linear memory buffer; each regex match allocates scratch
+space inside that buffer. With thousands of redundant invocations on
+the same inputs, the WASM heap fragments and eventually overruns.
+
+This is **not** a "single huge input" failure. The inputs are all well
+under any reasonable size cap. It is a cumulative resource leak via call
+count.
+
+## Where the duplication comes from
+
+`buildHighlightedExports()` in `highlightTypes.mjs` builds a map of
+`{ExportName.Props, .DataAttributes, .CssVariables}` entries, each of
+which calls `formatInlineTypeAsHast` on a synthetic object type string.
+Separately, `highlightTypesMeta()` walks every prop and calls
+`formatInlineTypeAsHast` on each prop's `typeText` and `shortType`.
+
+For DataGrid, many props share the same nested structural type
+(e.g. `GridColDef<R, V, F>`, `GridRowModesModel`, `GridCallbackDetails`).
+Each reference re-enters the formatter with the same string. Multiply
+~400 props × shared types × multiple fields (type/shortType/default/
+detailedType) and you land at ~2000 calls with ~5 unique strings.
+
+## Fix
+
+**Filed as mui-public branch `jcquintas/fix-highlightTypes-memoization`
+(commit `e60dafa2`).** Wraps `formatInlineTypeAsHast` with a
+`Map<string, Promise<HastRoot>>` keyed on
+`${unionPrintWidth ?? ''}:${typeText}`. Deep-clones the cached result on
+return to prevent downstream mutation from poisoning the cache.
+Adds 4 regression tests under `typeHighlighting > memoization`.
+
+```js
+const __cache = new Map();
+const impl = async function (typeText, unionPrintWidth) { /* original body */ };
+export async function formatInlineTypeAsHast(typeText, unionPrintWidth) {
+  const key = `${unionPrintWidth ?? ''}:${typeText}`;
+  let cached = __cache.get(key);
+  if (!cached) {
+    cached = impl(typeText, unionPrintWidth);
+    __cache.set(key, cached);
+  }
+  const result = await cached;
+  return structuredClone(result);
+}
+```
+
+## Verification
+
+With the above patch applied locally to the installed
+`@mui/internal-docs-infra` under `node_modules/.pnpm`:
+
+- `/x/api/data-grid/data-grid` compiles in **63s** (previously: crash)
+- `/x/api/charts/gauge` compiles in ~8s cold / ~140ms warm (unchanged)
+- No `RuntimeError: memory access out of bounds`
+- The 6 `Unable to handle a type with flag "TemplateLiteral"` warnings
+  are unrelated and survive the fix — they come from
+  `typescript-api-extractor/dist/parsers/typeResolver.js:295` and are a
+  separate best-effort fallback, not a crash path.
+
+## Related concerns worth filing separately
+
+1. **`typeResolver.js:295` silently downgrades `TemplateLiteral` types
+   to `any`.** The warning doesn't surface to the build user and the
+   downgraded types appear in docs as `any`, which is a correctness bug.
+2. **DataGrid's extracted type shape is wrong.** Even with the OOM
+   fixed, the extractor only surfaces 1 prop (`pagination`) on DataGrid
+   and emits ~40 `BasePropsOverrides` augmentation interfaces as
+   additional types. The generic component signature isn't being fully
+   instantiated. Separate investigation needed.
+3. **`loadTypescriptConfig.mts` `extends` resolver.** Doesn't handle
+   node_modules package specifiers. Worked around by flattening
+   mui-x's root tsconfig in commit `efe32b0bf9`.
+
+## Repro steps on this branch
+
+1. Check out `docs-apitest-infra`.
+2. Apply the memoization patch above to
+   `node_modules/.pnpm/@mui+internal-docs-infra@*/node_modules/@mui/internal-docs-infra/pipeline/loadServerTypes/typeHighlighting.mjs`.
+3. `cd docs && PORT=3099 pnpm dev`
+4. `curl -L http://localhost:3099/x/api/data-grid/data-grid` → HTTP 200
+5. Without the patch, same command → 500 after ~100s with the WASM
+   stack trace above.
diff --git a/tsconfig.json b/tsconfig.json
index 98e51581654fb..33f4609f5388d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,18 @@
 {
-  "extends": "@mui/monorepo/tsconfig.json",
+  // Previously: "extends": "@mui/monorepo/tsconfig.json". Flattened so that tools
+  // which resolve `extends` as a relative path (notably the `loadTypescriptConfig`
+  // walk inside `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes`) don't
+  // choke on the node_modules package specifier.
   "compilerOptions": {
+    // --- Inlined from @mui/monorepo/tsconfig.json ---
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "module": "preserve",
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "noErrorTruncation": false,
+    // --- mui-x-specific overrides ---
     "lib": ["dom", "dom.iterable", "esnext"],
     "moduleResolution": "bundler",
     // Already tested with eslint